reactjs - 即使成功注册也无法在清单上找到服务人员

Question

我有一个由npx create-react-app my-app --template cra-template-pwa-typescript.

根据可安装 pwa的要求，我更改了一些属性manifest.webmanifest并将其替换为 on index.html，然后fetch在 service worker 上添加处理程序

manifest.webmanifest

{
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "name": "Sample PWA",
  "short_name": "Sample PWA",
  "description": "Sample PWA",
  "orientation": "landscape",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

索引.html

...
<link rel="manifest" href="%PUBLIC_URL%/manifest.webmanifest" />
...

service_worker.ts

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches
      .match(event.request)
      .then((response) => response || fetch(event.request))
  );
});

使用默认配置一切正常，但是当我添加homepageon时package.json，即使注册成功，清单也无法检测到服务工作者

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

它导致beforeinstallprompt事件没有被触发并且我的应用程序不再可安装。那么我应该如何更改上面的那些代码/配置以使其再次工作？

标签： reactjscreate-react-appprogressive-web-appsservice-worker