ServiceWorker在安装后不会立即截取呼叫

本文介绍了ServiceWorker在安装后不会立即截取呼叫的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在和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>
...

结果：在尚未安装Service Worker的情况下，加载第一个页面后，我的控制台输出结果为(按该顺序)：

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

语法错误是因为我正在尝试加载JSX脚本，并且我希望在服务工作进程中截取该加载，以便在执行它之前首先对其进行编译。

但是在初始加载时，服务工作器似乎没有截取，因为我没有看到日志输出‘FETCH’，尽管我清楚地看到，当我尝试加载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)

因此，从那时起，事情按计划进行，但不是在初始加载时。为什么会这样？

推荐答案

经过研究，我似乎能够通过相关帖子here，再加上documentation of the "claim" api来解决这个问题。

因此，如果我将以下内容添加到我的"active"处理程序中，事情似乎就会正常进行：

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

我希望得到任何关于这是否确实是正确方法的反馈：-)

这篇关于ServiceWorker在安装后不会立即截取呼叫的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！