我第一次尝试使用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'})
})
我记录了服务工作者的实例，(我认为(这意味着服务工作者确实是活动的/准备好的。
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))