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

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

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

Answer 1

ServiceWorkerRegistration.active 不是立即可用的，因此应先使用installing 或waiting 获取实例。 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))