Chrome 为什么我的“添加到主屏幕”Web App安装横幅未显示在我的Web App中

nom7f22z  于 2023-06-19  发布在  Go
关注(0)|答案(4)|浏览(164)

我创建了一个service-worker和manifest.json文件,以便为Chrome浏览器用户显示“添加到主屏幕”Web App安装横幅。
它没有按预期工作。
这里是我的manifest.json文件

{
  "name": "MySite",
  "short_name": "Mysite",
  "start_url": "./?utm_source=homescreen",
  "icons": [{
      "src": "assets/cacheable/images/shortcut/120x120.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "assets/cacheable/images/shortcut/142x142.png",
      "sizes": "142x142",
      "type": "image/png"
    }, {
      "src": "assets/cacheable/images/shortcut/192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "assets/cacheable/images/shortcut/192x192.png",
      "sizes": "384x384",
      "type": "image/png"
    }],
  "orientation": "portrait" ,
  "background_color": "#fff",
  "display": "standalone",
  "theme_color": "#fff"
}

请让我知道如果我忘记添加任何东西。

ffscu2ro

ffscu2ro1#

首先,让我们检查您的清单是否满足显示Web App安装横幅的要求。

    • 要求:**

显示Web App安装横幅的完整(* 当前 *)要求为:

  • 拥有一个Web应用清单文件,其中包含:
  • 简称
  • 名称(在横幅提示中使用)
  • 144x144 png图标
  • 加载的start_url
  • 通过HTTPS提供(使用service worker的要求)。
  • 至少访视两次,访视间隔至少5分钟。

Reference
好吧,现在我们假设这些都是有效的。让我们继续测试。

    • 测试:**

要测试是否已正确安装,可以尝试以下步骤:
1.打开Chrome DevTools,
1.进入应用面板
1.进入清单页签
1.单击【添加到主屏幕】。
现在,您的浏览器顶部会显示一个提示,询问您是否要将URL添加到您的内容(在Chrome桌面上)。

    • 故障排除:**

如果在测试后,您在控制台中出现以下错误:
未检测到匹配的服务工作程序。您可能需要重新加载页面,或者检查当前页面的服务工作线程是否也控制清单中的起始URL
那么请确保:
1.您的Service Worker工作正常且没有错误,并且
1.您的start_url与您的网站的实际URL匹配 * 加载 *。
否则,你永远不会得到提示显示!

    • 另外**,

请注意,用户(和你!)也可以通过(Android)Chrome菜单手动添加到主屏幕。不需要等待提示!我在我的主屏幕上添加了很多我每天都要使用的网站,我几乎从来没有看到过横幅!

    • 请注意,这些要求可能会不时更改(以前有过!)。here * 已宣布将于2017年推出“添加到主屏幕”的更新
  • 还请注意,这些要求与原生应用安装提示有很大差异。*
8yoxcaq7

8yoxcaq72#

你的manifest.json看起来足够好了。@Extricate的上述观点是正确和完美的。
那么下一个问题是,您是否为您的应用实现了service-worker?
我在某个地方读到空的service-worker文件可以工作,但是当我尝试一个空的service-worker实现时,它说

'Site cannot be installed: the page does not work offline'

所以我想,最新的 chrome 版本将不支持A2 HS提示应用程序安装横幅,如果你的服务工人不支持离线工作。
你可以尝试去Basic web app prompt,去chrome中的devtools,导航到应用程序选项卡。在那里你会找到manifest.json。在清单文件的LHS上,您可以看到“添加到主屏幕”。当你点击时,它会打印出来

'Site cannot be installed: the page does not work offline'

PFA screenshot for same

rqenqsqc

rqenqsqc3#

在service worker js文件中添加以下代码:

self.addEventListener('fetch', function(event) {});
gtlvzcf8

gtlvzcf84#

可能是有用的,因为有类似的问题。安装信息栏出现了一次,再也没有出现过。
Developers Google
当网站符合标准时,迷你信息栏将出现,一旦用户关闭,它将不会再次出现,直到足够的时间已经过去(目前为3个月)。

相关问题