为什么我的 'add to home screen' 网络应用程序安装横幅没有显示在我的网络应用程序中

Question

我创建了一个 service-worker 和 manifest.json 文件，以便为 Chrome 浏览器用户显示 'add to home screen' 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 应用程序安装横幅的要求。

要求

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

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

Reference

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

测试

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

打开 Chrome DevTools，
转到应用程序面板
转到清单选项卡
单击添加到主屏幕。

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

疑难解答

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

No matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest

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

另外,

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

* 请注意，这些要求可能会不时更改（他们以前有过！）。 2017 年 'Add to home screen' 的更新已经公布 here

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

Answer 2

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

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

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

所以我想如果你的 service-worker 不支持离线工作，最新的 chrome 版本将不支持应用程序安装横幅的 A2HS 提示。

您可以尝试转至 Basic web app prompt，转至 chrome 中的开发工具，导航至“应用程序”选项卡。在那里你会发现 manifest.json。在清单文件的左侧，您可以看到添加到主屏幕。当你点击时，它会打印

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

PFA screenshot for same

Answer 3

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

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

Answer 4

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

来自Developers Google

The mini-infobar will appear when the site meets the criteria, and once dismissed by the user, it will not appear again until a sufficient amount of time has passed (currently 3 months).

为什么我的 'add to home screen' 网络应用程序安装横幅没有显示在我的网络应用程序中

Why is my 'add to home screen' Web App Install Banner not showing up in my web app

html

google-chrome

progressive-web-apps