Question

我正在用React开发一个应用程序，我想将其转换为PWA，所以我遵循this tutorial添加了自己的缓存规则。服务人员可以工作，并且模板如下所示：

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 App的子文件夹相同，但仍然出现错误

未检测到匹配的服务程序。您可能需要重新加载页面，或检查当前页面的服务工作者的范围是否包含该范围并从清单中开始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"
}

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

Answer 1

结果是我的manifest.json缺少一个字符。在进行灯塔审核之后，我发现服务人员的范围是https://example.net/reactapp/，而start_url是https://example.net/reactapp，结尾处没有斜线。所以我要做的就是改变这个：

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

...对此：

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

无法安装React PWA

1 个答案: