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 事件。

此外，当我从我的应用向服务人员发送消息时：

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 确实是 active/ready。

Answer 1

ServiceWorkerRegistration.active 不是立即可用的，所以应该先用 installing 或 waiting 获得实例。 skipWaiting() 可以在软件自上次安装后 updated/modified 时使用。

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

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

serviceWorker 'activate' and 'message' events not firing

javascript

service-worker

service-worker-events