为什么我的"添加到主屏幕"Web应用安装横幅未显示在我的网络应用中

Question

我创建了一个服务工作者和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"
}

如果我忘记添加任何内容,请告诉我？

Answer 1

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

要求

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

• 拥有一个Web应用程序清单文件:
  • 一个short_name
  • 名称(在横幅提示中使用)
  • 一个144x144 png的图标
  • 加载的start_url
• 通过HTTPS提供(使用服务工作者的要求).
• 至少访问两次,访问时间至少为五分钟.

参考

好的,现在让我们假设这一切都是有效的.让我们继续测试.

测试

要测试您是否已正确安装,可以尝试以下步骤:

1. 打开Chrome DevTools,
2. 转到" 应用程序"面板
3. 转到清单选项卡
4. 单击" 添加到主屏幕".

现在,您的浏览器会显示一个提示,询问您是否要将该网址添加到您的内容中(在Chrome桌面上).

故障排除

如果在测试后您在控制台中收到以下错误:

未检测到匹配的服务工作者 您可能需要重新加载页面,或检查当前页面的服务工作者是否也控制清单中的起始URL

然后请确保1.您的服务人员是否正确,并没有错误功能,并2.您start_url匹配您的网站的实际URL 负载.否则,你永远不会得到提示!

另外,

请注意,用户(以及您!)也可以通过(Android)Chrome菜单手动添加到主屏幕.不需要等待提示!我在主屏幕上添加了很多我每天都会使用的网站,而且我几乎看不到横幅!

*请注意,这些要求可能会不时发生变化(以前有过!).2017年推出的"添加到主屏幕"的更新已在此处公布

**另请注意,这些要求与本机应用安装提示有很大不同.**

Answer 2

你的manifest.json似乎还不错.@Extricate提到的上述观点是正确和完美的.

那么接下来的问题是你为你的应用实现了服务工作者吗？
我在某个地方看到一个空的服务工作文件可以工作但是当我尝试一个空的服务工作者实现时,它说

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

所以我认为如果服务工作者不支持离线工作,那么最新的chrome版本将不支持APP INSTALL BANNERS的A2HS提示.

您可以尝试转到基本Web应用程序提示,转到chrome中的devtools,导航到Application选项卡.在那里你会找到manifest.json.在清单文件的LHS上,您可以看到ADD TO HOME SCREEN.单击时,将打印

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

PFA截图相同

Answer 3

在您的 Service Worker js 文件中添加以下一行代码：

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