serviceWorker“激活”和“消息”事件未触发

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

我像这样注册服务人员：

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

服务工作者的message事件也不会被调用......

我做错了什么吗？ 服务人员不会以某种方式激活吗？

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

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

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

我记录了服务人员的实例，（我假设）这意味着服务人员确实处于活动状态/准备就绪。

Answer 1

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

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