React PWA 无法安装答案

【问题标题】：React PWA not installableReact PWA 无法安装
【发布时间】：2020-05-15 15:28:01
【问题描述】：

我正在用 React 制作一个应用程序，我想把它变成一个 PWA，所以我按照 this tutorial 添加了我自己的缓存规则。 Service Worker 正常工作，模板如下所示：

function run() {
  if ('function' === typeof importScripts) {
    importScripts(
      'https://storage.googleapis.com/workbox-cdn/releases/3.5.0/workbox-sw.js'
    );

    /* Global workbox */
    if(!workbox) return;
    workbox.setConfig({ debug: false });

    /* Injection point for manifest files. */
    workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);

    /* Custom cache rules */
    workbox.routing.registerRoute(
      ({ url }) => url.origin === "https://www.instagram.com",
      workbox.strategies.cacheFirst({
        cacheName: 'instagram',
        plugins: [
          new workbox.expiration.Plugin({ maxAgeSeconds: 24 * 60 * 60 }),
        ],
      })
    );
  }
}

run();

软件可以工作，它会缓存它应该做的事情。清单正在传递，start_url 字段与我托管 React 应用程序的子文件夹相同，但我仍然收到错误

未检测到匹配的 Service Worker。您可能需要重新加载页面，或检查当前页面的服务工作者范围是否包含清单中的范围和启动 URL。我的清单如下所示：

{
  "short_name": "ReactApp",
  "name": "My React App",
  "description": "blah blah blah",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/reactapp",
  "display": "standalone",
  "theme_color": "#7b1fa2",
  "background_color": "#7b1fa2"
}

正如我所说，服务工作者完美地完成了它的工作，但浏览器似乎并不认为它是可安装的。会是什么？

【问题讨论】：

使用 HTTPS URL 运行时，您的 PWA 是否通过 Chrome Lighthouse 工具作为有效的 PWA 传递？如果有问题，它通常会给出很好的提示。

标签： reactjs create-react-app service-worker progressive-web-apps

【解决方案1】：

原来我的manifest.json 缺少一个字符。运行灯塔审计后，我发现服务人员的范围是https://example.net/reactapp/，而start_url 是https://example.net/reactapp，末尾没有斜线。所以我所做的就是改变这个：

{
  ...
  "start_url": "/reactapp",
  ...
}

...到这个：

{
  ...
  "start_url": "/reactapp/",
  ...
}

【讨论】：