ServiceWorker 没有收到获取请求

Question

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

我的 service 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))
      }
    )
  )
})

我看到 'Installing new service worker' 按预期输出到控制台，但没有 'Fetch req'。我正在使用 Chrome devtools 并访问了应用程序选项卡下 ServiceWorker 旁边的 "Inspect" 选项。

Answer 1

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

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

如果您不调用 clients.claim()，则服务工作者将激活，但不会控制任何当前打开的页面。直到您导航到其范围内的下一个页面（或重新加载当前页面），Service Worker 才会接管控制权，并通过其 fetch 处理程序开始拦截网络请求。

Answer 2

动态网站，小心！

如果 service worker 有作用域：example.com/weather/ 它没有作用域：example.com/weather

特别是在默认情况下删除尾部斜线的 firebase

在这种情况下，service worker 将安装、激活甚至缓存文件，但不会接收“获取”事件！很难调试。

将“trailingSlash”: true 添加到“托管”下的 firebase.json。这将解决问题。确保修改重写自：

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

收件人：

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

以及manifest.json

ServiceWorker 没有收到获取请求

ServiceWorker not receiving fetch requests

service-worker