javascript - Chrome : Add to homescreen error: Site cannot be installed

Question

索引.html

<link rel="manifest" href="~/manifest.json">

list .json

{
  "name": "Board",
  "short_name": "Board",
  "icons": [
    {
      "src": "public/sw-Board-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": ".",
  "scope": "/",
  "display": "standalone",
  "orientation": "any",
  "background_color": "#303030",
  "theme_color": "#212121",
  "description": "SLA Monitoring Tool",
  "dir": "ltr",
  "lang": "en-US"
}

Service Worker 注册

navigator.serviceWorker.register(`Board/service-worker.js`)

我在本地 IIS 上运行我的应用程序，因此我的应用程序从 http://localhost/Board 运行

这似乎有效，因为 Chrome 中的应用程序选项卡显示了 list 文件信息，还显示了正在安装的服务 worker 。

但是，当我从“应用程序”>“ list ”选项卡中单击“添加到主屏幕”链接时，出现以下错误:

Site cannot be installed: 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

我不确定发生了什么，但是当我在开发一个 node express 支持的 pwa 时没有遇到这个问题。

我正在尝试调整 manifest.json 中的 start_url 和 scope 属性，但我没有任何运气。

Answer 1

有一个 Google 代码实验室 Add Your Web App to a User's Home Screen您可以关注。

您还可以检查 Web App Install Banners和新的 The New and Improved Add to Home screen .