服务工作者skipWaiting和clients.claim在第一次加载时不控制浏览器

Question

现在我的服务人员看起来像这样：

\n\n

self.addEventListener('install', event => {\n  console.log('V1 installing\xe2\x80\xa6')\n  self.skipWaiting()\n\n  event.waitUntil(\n    caches\n      .open('sw-cache')\n      .then(cache =>\n        cache.addAll([\n          '/assets/img/bbcourt-2pt.png',\n          '/assets/img/bbcourt-3pt.png'\n        ])\n      )\n  )\n})\n\nself.addEventListener('activate', event => {\n  self.clients.claim()\n  console.log('V1 now ready to handle fetches!')\n})\n\nself.addEventListener('fetch', event => {\n  const url = new URL(event.request.url)\n\n  if (\n    url.origin == location.origin &&\n    url.pathname == '/assets/img/bbcourt-2pt.png'\n  ) {\n    event.respondWith(caches.match('/assets/img/bbcourt-2pt.png'))\n  }\n\n  if (\n    url.origin == location.origin &&\n    url.pathname == '/assets/img/bbcourt-3pt.png'\n  ) {\n    event.respondWith(caches.match('/assets/img/bbcourt-3pt.png'))\n  }\n})\n

\n\n

目前，我正在尝试使用 self.skipWaiting() 和 self.clients.claim() 立即通过此服务工作线程控制浏览器，这样即使我转到带有 bbcourt-2pt.png 和 bbcourt- 的页面， 3pt.png 在第一次加载时离线时，缓存的图像仍然由服务工作线程提供。然而，服务工作线程似乎仍然没有在第一次加载时接管。我究竟做错了什么？

\n