时间戳

首页 > 解决方案 > ServiceWorker 安装后不会立即拦截呼叫

service-worker - ServiceWorker 安装后不会立即拦截呼叫

问题描述

我在玩 ServiceWorkers，我注意到即使在成功注册后，ServiceWorker 也没有拦截调用

我的 sw.js：

self.addEventListener('install', (event) => {
    console.log('install')
})

self.addEventListener('activate', (event) => {
    console.log('activate')
})

self.addEventListener('fetch', (event) => {
  console.log('fetch')
})

在我的 index.html 中：

...
<head>
...
<script>
    navigator.serviceWorker.register('./sw.js', { scope: './' }).then(() => {
        // just delay it so we're sure sw is active before we load that script
        setTimeout(() => {
            console.log('load jsx script to be intercepted')
            const script = document.createElement('script')
            script.setAttribute('src', 'test.js')
            document.head.appendChild(script)
        }, 2000)
    })
</script>
...
</head>
...

结果：当尚未安装服务工作者时，我从第一个页面加载的控制台输出是（按此顺序）：

install
activate
load jsx script to be intercepted
Uncaught SyntaxError: Unexpected token '<'

语法错误是因为我正在尝试加载 JSX 脚本，并且我想在服务工作者中拦截该加载，以便在执行之前先编译它。

但是在初始加载时，服务工作人员似乎没有拦截，因为我没有看到日志输出“获取”，虽然我清楚地看到，当我尝试加载 jsx 脚本时，服务工作人员已经处于活动状态.

当我现在重新加载页面时，我得到以下控制台输出：

fetch     (<-- that's the loading of the index.html itself)
load jsx script that should be intercepted
fetch     (<-- that's the loading of the test.js)

所以从那时起，事情按计划进行，但不是在初始负载上。为什么会这样？

标签： service-workerservice-worker-events

解决方案

经过一些研究，我似乎能够使用此处的相关帖子以及“声明”api 的文档来解决问题。

因此，如果我将以下内容添加到我的“活动”处理程序中，事情似乎会奏效：

self.addEventListener('activate', (event) => {
    event.waitUntil(self.clients.claim())

对于这是否确实是正确的方法，我将不胜感激:-)

推荐阅读