Question

我已经创建了一个服务工作者和manifest.json文件，以便显示“添加到主屏幕”＃39;适用于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安装横幅的完整（当前）要求是*：

拥有一个网络应用清单文件：
- a short_name
- 一个名字（用于横幅提示）
- 一个144x144 png图标
- 加载
通过HTTPS提供服务（使用服务工作者的要求）。
至少访问过两次，访问时间至少为五分钟。

Reference

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

<强>测试

要测试您是否正确安装了它，可以尝试以下步骤：

打开Chrome DevTools，
转到应用面板
转到清单标签
点击添加到主屏幕。

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

<强>疑难解答

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

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

然后请确保1.您的服务人员运行正常且没有错误，并且2.您的start_url匹配加载的网站的实际网址。否则，你永远不会得到提示！

<强>另外，

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

*请注意，这些要求可能会不时发生变化（以前有过！）。更新为“添加到主屏幕”＆＃39; 2017年即将宣布here

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

Answer 2

你的manifest.json看起来还不错。 @Extricate提到的上述观点是正确和完美的。

那么接下来的问题是您是否为您的应用实施了服务工作者？我在某处读到一个空的服务工作文件可以工作但是当我尝试一个空服务工作者的实现时，它说

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

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

您可以尝试转到Basic web app prompt，转到chrome中的devtools，导航到“应用程序”标签。在那里你会找到manifest.json。在清单文件的LHS上，您可以看到ADD TO HOME SCREEN。单击时，将打印

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

PFA screenshot for same

Answer 3

与类似的问题一样可能有用。 “安装”信息栏出现一次且不再出现。

来自Developers Google

当网站符合条件时，将显示迷你信息栏，并且一旦被用户撤消，则直到已经有足够的时间（目前为3个月）。

Answer 4

在服务工作者js文件中添加以下一行代码：

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

我为什么要添加到主屏幕＆＃39; Web应用程序安装横幅未显示在我的Web应用程序中

4 个答案: