javascript - serviceWorker 'activate' 和 'message' 事件未触发

Question

我是第一次尝试使用 serviceWorkers，尽管它开始很好，但我还是有点卡住了..

这是我的非常简单的 service-worker.js:

self.addEventListener('install', () => {
  console.log('Hello world from the Service worker')
})

self.addEventListener('activate', () => {
  console.log('Serive worker now active')
})

self.addEventListener('message', event => {
  console.log('Service worker received message ' + JSON.stringify(event))
})

我像这样注册 service worker:

useEffect(() => {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker
        .register('/service-worker.js')
        .then(() => {
          console.log('Service worker registration successful')
        })
        .catch(e => {
          console.error('Service worker registration failed: ' + e)
        })
    }
  }, [])

当我加载我的应用程序时，我得到以下日志:

Service worker registration successful // APP
Hello world from the Service worker // SERVICE WORKER install event

因此，我确实调用了 install 事件，但没有调用 activate 事件。

此外，当我从我的应用程序向 service worker 发送消息时:

navigator.serviceWorker.controller.postMessage({test: 'test'})

service worker 上的 message 事件也没有被调用...

我做错了什么吗？ Service Worker 不会以某种方式激活吗？

对于其他上下文，我的应用程序使用 Next.js，我将 service-worker.js 放在我的 public 文件夹中项目。

此外，在应用程序上，如果我尝试像这样发布消息:

navigator.serviceWorker.ready.then(registration => {
  console.log(registration.active)
  registration.active.postMessage({test: 'test'})
})

我记录了 service worker 的实例，(我假设)这意味着 service worker 确实处于事件/就绪状态。

Answer 1

ServiceWorkerRegistration.active 不是立即可用的，因此应该先通过安装 或等待 来获取实例。 skipWaiting() 可以在自上次安装后更新/修改 SW 时使用。

// main.js

navigator.serviceWorker?.register('./service-worker.js')
  .then(reg  => {
    console.log('registered', reg)
    const sw = reg.installing || reg.waiting || reg.active
    sw.postMessage({ milliseconds: Date.now() })
  })
  .catch(() => console.error('registration failed'))

// service-worker.js

self.addEventListener('install', e => {
  console.log(e.type)
  self.skipWaiting() // always activate updated SW immediately
})

self.addEventListener('activate', e => console.log(e.type))

self.addEventListener('message', e => console.log(e.type, e.data))