从Service Worker向React组件传数据时提示Event未定义如何解决？

错误原因分析 #

1. event未定义：activate事件监听的回调函数没有接收event参数，导致后续调用event.waitUntil()时抛出引用错误。
2. subscription作用域问题：subscription变量在try代码块内部声明，外部的postMessage无法访问该变量，会引发新的未定义错误。

修正后的Service Worker代码 #

self.addEventListener('activate', async (event) => { // 添加event参数
    let subscription;
    try {
        const applicationServerKey = urlB64ToUint8Array('***');
        const options = { 
            applicationServerKey,
            userVisibleOnly: true 
        };
        subscription = await self.registration.pushManager.subscribe(options);
    } catch (err) {
        console.log('Error', err);
        return; // 订阅失败时直接返回，避免后续无效执行
    }

    event.waitUntil(
        self.clients.matchAll({ type: "window" }).then(clientsArr => {
            if(clientsArr[0]) {
                clientsArr[0].focus();
                clientsArr[0].postMessage({
                    msg: subscription
                });
            }
        })
    );
});

额外优化建议 #

• 确保urlB64ToUint8Array函数已正确定义，否则会引发新的执行错误。
• React组件中可优化消息监听逻辑，避免内存泄漏：

useEffect(() => {
    if("serviceWorker" in navigator) {
        const handleMessage = (message) => {
            console.log('serviceworker returns', message.data);
            // 在这里处理接收到的subscription数据
        };
        navigator.serviceWorker.addEventListener("message", handleMessage);
        // 组件卸载时移除监听
        return () => {
            navigator.serviceWorker.removeEventListener("message", handleMessage);
        };
    }
},[]);

内容的提问来源于stack exchange，提问作者Emm