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

Question

我创建了一个 service-worker 和 manifest.json 文件，以便为 Chrome 浏览器用户显示“添加到主屏幕”Web 应用安装横幅。

它没有按预期工作。

这是我的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 应用安装横幅的要求。

要求

显示 Web 应用安装横幅的完整（当前）要求是*：

• 拥有一个包含以下内容的 Web 应用清单文件：
  • 短名称
  • 一个名称（用于 横幅提示）
  • 144x144 png 图标
  • 加载的 start_url
• 通过 HTTPS 提供服务（使用 service worker 的要求）。
• 至少访问过两次，两次访问之间至少间隔五分钟。

Reference

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

测试

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

1. 打开 Chrome DevTools，
2. 转到应用程序面板
3. 转到清单标签
4. 点击添加到主屏幕。

现在您的浏览器顶部应该会显示一个提示，询问您是否要将 URL 添加到您的东西（在 Chrome 桌面上）。

疑难解答

如果在测试后您的控制台中出现以下错误：

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

那么请确保 1. 您的 Service Worker 运行正常且没有错误，以及 2. 您的 start_url 与您的网站的实际网址匹配加载。否则，您将永远不会得到显示的提示！

另外，

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

* 请注意，这些要求可能会不时更改（以前有过！）。 2017 年“添加到主屏幕”的更新已经公布here

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

Answer 2

可能有用，因为有类似的问题。安装信息栏出现了一次，再也没有出现过。

来自Developers Google

当网站符合条件时，会出现迷你信息栏，并且 一旦被用户关闭，它不会再次出现，直到 已经过去了足够长的时间（目前为 3 个月）。

Answer 3

在你的 service worker js 文件中添加这一行代码：

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

Answer 4

您的 manifest.json 似乎足够好。 @Extricate 的上述几点是正确和完美的。

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

 '网站无法安装：页面无法离线工作' 

因此，如果您的服务人员不支持离线工作，我想最新的 chrome 版本将不支持 APP INSTALL BANNERS 的 A2HS 提示。

您可以尝试转到 Basic web app prompt ，转到 chrome 中的 devtools，导航到应用程序选项卡。 在那里你会找到 manifest.json。在清单文件的 LHS 上，您可以看到 ADD TO HOME SCREEN。当你点击时，它会打印出来

 '网站无法安装：页面无法离线工作' 

PFA screenshot for same