即使我有一个 Service Worker 并且我的 PWA 工作正常，也没有检测到匹配的 Service Worker

Question

我一直在开发一个用 HTML、CSS 和 JS 编写的项目，并在屏幕上随机显示不同的视频。我希望它成为一个 PWA，所以它做到了。它工作得很好，但是当我打开 Chrome DevTools 和“应用程序”页面时，在“清单”部分中它会抛出警告：“没有匹配的服务工作线程检测器。您可能需要重新加载页面，或者检查当前页面的 Service Worker 是否也控制清单中的起始 URL。”

\n\n

我对 Service Worker 不太了解，我想知道它为什么有效，但似乎不起作用。另一个问题是我从来没有弹出“添加到主屏幕”。但如果我手动添加它，它就可以正常工作。它也可以离线工作。

\n\n

网站链接： https: //ondersumer07.github.io/vinematik/

\n\n

我的 main.js 中的 Service Worker 代码：

\n\n

window.addEventListener("load", () => {\n  registerSW();\n});\n\nasync function registerSW() {\n  if (\'serviceWorker\' in navigator) {\n    try {\n      await navigator.serviceWorker.register(\'./sw.js\');\n    } catch (e) {\n      console.log(`SW registration failed`);\n    }\n  }\n}\n

\n\n

我的 sw.js：

\n\n

//CACHING FILES//\nconst filesToCache = [\n  \'./\',\n  \'./offline.html\',\n  \'./css/offline.css\',\n];\n\nconst staticCacheName = \'pages-cache-v2\';\n\nself.addEventListener(\'install\', event => {\n  console.log(\'Attempting to install service worker and cache static assets\');\n  event.waitUntil(\n    caches.open(staticCacheName)\n    .then(cache => {\n      return cache.addAll(filesToCache);\n    })\n  );\n});\n\n//LOADING FILES WHEN OFFLINE//\nself.addEventListener(\'fetch\', event => {\n  console.log(\'Fetch event for \', event.request.url);\n  event.respondWith(\n    caches.match(event.request)\n    .then(response => {\n      if (response) {\n        console.log(\'Found \', event.request.url, \' in cache\');\n        return response;\n      }\n      console.log(\'Network request for \', event.request.url);\n      return fetch(event.request)\n\n        .then(response => {\n          // TODO 5 - Respond with custom 404 page\n          return caches.open(staticCacheName).then(cache => {\n            cache.put(event.request.url, response.clone());\n            return response;\n          });\n        });\n\n\n    }).catch(error => {\n      console.log(\'Error, \', error);\n      return caches.match(\'./offline.html\');\n    })\n  );\n});\n// TODO 6 - Respond with custom offline page\n\nself.addEventListener(\'activate\', event => {\n  console.log(\'Activating new service worker...\');\n\n  const cacheWhitelist = [staticCacheName];\n\n  event.waitUntil(\n    caches.keys().then(cacheNames => {\n      return Promise.all(\n        cacheNames.map(cacheName => {\n          if (cacheWhitelist.indexOf(cacheName) === -1) {\n            return caches.delete(cacheName);\n          }\n        })\n      );\n    })\n  );\n});\n

\n\n

我的网络清单：

\n\n

{\n  "short_name": "Vinematik",\n  "name": "Vinematik",\n  "description": "Rastgele ve s\xc4\xb1n\xc4\xb1rs\xc4\xb1z vine izleme uygulamas\xc4\xb1!",\n  "icons": [\n    {\n      "src": "images/android-chrome-192x192.png",\n      "type": "image/png",\n      "sizes": "192x192"\n    },\n    {\n      "src": "images/android-chrome-512x512.png",\n      "type": "image/png",\n      "sizes": "512x512"\n    },\n    {\n      "src": "images/apple-touch-icon.png",\n      "type": "image/png",\n      "sizes": "180x180"\n    },\n    {\n      "src": "images/favicon-16x16.png",\n      "type": "image/png",\n      "sizes": "16x16"\n    },\n    {\n      "src": "images/favicon-32x32.png",\n      "type": "image/png",\n      "sizes": "32x32"\n    }\n  ],\n  "start_url": "https://ondersumer07.github.io/vinematik/",\n  "background_color": "#00adb5",\n  "display": "standalone",\n  "scope": "/",\n  "theme_color": "#00adb5"\n}\n

\n

Answer 1

解决方案是我没有使scope和start_url内部的manifest.json相同，它需要是网站地址。所以我将代码更改为：

  "start_url": "https://ondersumer07.github.io/vinematik/",
  "background_color": "#00adb5",
  "display": "standalone",
  "scope": "https://ondersumer07.github.io/vinematik/",
  "theme_color": "#00adb5"

问题就解决了。