service-worker - ServiceWorker 未收到提取请求

Question

我是第一次安装 Service Worker，并按照以下教程操作:https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

我的服务 worker 在安装和更新时按预期运行，但未按预期触发获取请求。

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))
      }
    )
  )
})

我看到“安装新服务 worker ”在预期时输出到控制台，但没有“获取请求”。我正在使用 Chrome devtools 并访问了“应用程序”选项卡下 ServiceWorker 旁边的“检查”选项。

Answer 1

如果你听 activate事件，并添加对 clients.claim() 的调用在该事件中，您的新活跃 Service Worker 将控制其范围内的现有网页，包括注册它的页面。更多信息在this article关于 Service Worker 生命周期。以下代码就足够了:

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

如果你不打电话 clients.claim() ，那么 Service Worker 将激活，但不会控制任何当前打开的页面。直到您导航到其范围内的下一个页面(或重新加载当前页面)，Service Worker 才会控制并开始通过其 fetch 拦截网络请求。处理程序。