ServiceWorker未收到提取请求

Question

我是第一次安装服务工作者,并按照以下教程进行操作:https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

我的服务工作程序在安装和更新时的行为与预期一致,但未按预期触发获取请求.

var CACHE_NAME = 'test-cache-v1'
var urlsToCache = [
  '/',
  '/public/scripts/app.js'
]

self.addEventListener('install', function (event) {
  console.log('Installing new service worker', event)
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function (cache) {
        return cache.addAll(urlsToCache)
      })
      .catch(err => console.log('Error Caching', err))
)
})

self.addEventListener('fetch', function (event) {
  console.log('Fetch req', event)
  event.respondWith(
    caches.match(event.request)
      .then(function (response) {
        console.log('Cache hit', response)
        // Cache hit - return response
        if (response) {
          return response
        }
        return fetch(event.request)
        .catch(e => console.log('Error matching cache', e))
      }
    )
  )
})

我看到"安装新服务工作者"在预期时输出到控制台,但不是"获取请求".我正在使用Chrome devtools并访问了Application选项卡下ServiceWorker旁边的"Inspect"选项.

Answer 1

如果您监听activate事件并添加clients.claim()对该事件内部的调用,那么新的活动服务工作者将控制其范围内的现有网页,包括注册它的页面.本文中有关服务工作者生命周期的更多信息.以下代码就足够了:

self.addEventListener('activate', () => self.clients.claim());

如果您不打电话clients.claim(),服务工作人员将激活,但不控制任何当前打开的页面.直到您导航到其范围下的下一页(或重新加载当前页面),服务工作者才能控制,并开始通过其fetch处理程序拦截网络请求.

Answer 2

在动态网站上，要小心！

\n\n

如果 Service Worker 具有范围：example.com/weather/\n它没有范围：example.com/weather

\n\n

特别是在 firebase 上，默认情况下会删除尾部斜杠

\n\n

在这种情况下，Service Worker 将安装、激活甚至缓存文件，但不会接收 \xe2\x80\x98fetch\xe2\x80\x99 事件！非常难以调试。

\n\n

将 \xe2\x80\x9ctrailingSlash\xe2\x80\x9d: true 添加到 \xe2\x80\x98hosting\xe2\x80\x99 下的 firebase.json 中。这将解决问题。确保修改重写：

\n\n

  {\n    "source": "/weather", "function": "weather"\n  }\n

\n\n

到 ：

\n\n

  {\n    "source": "/weather/", "function": "weather"\n  }\n

\n\n

以及manifest.json

\n