为什么我的“添加到主屏幕”网络应用程序安装横幅没有显示在我的网络应用程序中

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"
}

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

原文由 PPShein 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

首先，让我们检查您的清单是否满足显示 Web 应用程序安装横幅的要求。

要求

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

• 有一个网络应用程序清单文件：
  • 简称
  • 名称（在横幅提示中使用）
  • 一个 144x144 的 png 图标
  • 加载的 start_url
• 通过 HTTPS 提供服务（使用 service worker 的要求）。
• 被访问至少两次，两次访问之间至少间隔五分钟。

参考

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

测试

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

1. 打开 Chrome 开发者工具，
2. 转到 应用程序 面板
3. 转到“ 清单” 选项卡
4. 单击 添加到主屏幕。

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

故障排除

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

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

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

此外，

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

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

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

原文由 Extricate 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

那么下一个问题是您是否为您的应用程序实施了 service-worker？

我在某处读到一个空的 service-worker 文件可以工作但是当我尝试一个空的 service-worker 实现时，它说

“无法安装网站：页面无法离线使用”

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

您可以尝试转到 Basic web app prompt ，转到 chrome 中的 devtools ，导航到 Application 选项卡。在那里你会找到 manifest.json。在清单文件的左侧，您可以看到添加到主屏幕。当你点击时，它会打印

“无法安装网站：页面无法离线使用”

相同的 PFA 屏幕截图

原文由 Parth Mistry 发布，翻译遵循 CC BY-SA 3.0 许可协议