reactjs - React PWA 无法安装

Question

我正在使用 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();

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

No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest. My manifest looks like this:

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

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

Answer 1

结果我的 manifest.json 缺少一个字符。运行灯塔审核后，我发现 Service Worker 的范围是 https://example.net/reactapp/，而 start_url 是 https://example。 net/reactapp 末尾没有斜杠。所以我所做的就是改变这个:

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

...对此:

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