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

我看到＆＃39;安装新的服务工作者＆＃39;在预期时输出到控制台，但不是“获取请求”。我正在使用Chrome devtools并访问过＆＃34; Inspect＆＃34; “应用程序”选项卡下ServiceWorker旁边的选项。

Answer 1

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

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

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

Answer 2

在动态网站上，请小心！

如果服务人员有范围：example.com/weather/ 它没有范围：example.com/weather

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

在这种情况下，服务工作者将安装，激活甚至缓存文件，但不会收到“获取”事件！很难调试。

在'hosting'下添加“trailingSlash”：true到firebase.json。这将解决问题。确保从以下位置修改重写：

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

致：

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

以及manifest.json

ServiceWorker未收到提取请求

2 个答案: