Question

的index.html

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

的manifest.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"
}

服务工作者注册

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

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

运行

这似乎有效，因为Chrome中的应用程序标签显示了Manifest文件信息，并且还显示了正在安装的服务工作者。

然而，当我点击＆＃34;添加到主屏幕＆＃34;来自应用程序的链接＆gt;清单选项卡我收到以下错误：

无法安装站点：未检测到匹配的服务工作者。你可以需要重新加载页面，或检查服务工作者是否当前页面还控制清单
中的起始URL

我不确定发生了什么，但是当我开发节点快速支持的pwa时我没有遇到这个问题。

我试图调整manifest.json中的start_url和scope属性，但我没有运气。

Answer 1

您可以关注Google Codelab Add Your Web App to a User's Home Screen。

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

Answer 2

仅当服务工作者生效且没有引发任何错误时，浏览器才会调用beforeinstallprompt。

并且create react app service worker将仅在生产中生效，因此请对其进行构建并在本地提供服务，然后尝试“添加到主屏幕”。

如果尚未安装，请先安装服务npm：npm i serve -g

然后...

npm run build

serve -s build

Chrome：添加到主屏幕错误：无法安装网站

2 个答案: