You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

首次授权通知后ServiceWorker激活状态异常问题求助

问题:ServiceWorker激活后sw.active为null,无法执行推送订阅逻辑

我在项目中使用ServiceWorker实现通知推送功能,预期流程是用户授权通知权限后,激活ServiceWorker并将用户的通知订阅信息发送至后端。但出现异常:控制台能正常显示ServiceWorker对象,代码中却检测到sw.active为null,导致后续订阅逻辑无法执行。

原代码

Notification.requestPermission().then(async function(permission) {
        if(permission === "granted"){
            if("serviceWorker" in navigator){
                const sw = await navigator.serviceWorker.register("scripts/worker.js", {
                    scope: "/billings/scripts/"
                });
                console.log(sw); // 控制台显示为ServiceWorker对象
                if(sw.active){ // 此处代码终止,因sw.active为null
                    const subscription = await reg.pushManager.subscribe({
                        userVisibleOnly: true,
                        applicationServerKey: urlBase64ToUint8Array(pubKey)
                    });
                    fetch("http://192.168.1.10:8080/pushSub", {
                        method: "POST",
                        headers: {
                            'Accept': 'application/json',
                            'Access-Control-Allow-Origin': '*',
                            'Content-Type': 'application/json',
                            'Authorization': 'Bearer ' + localStorage.getItem("user")
                        },
                        body: JSON.stringify({
                            sub: JSON.stringify(subscription)
                        })
                    });
                }
            }
        }else{
            alert("Permissão não autorizada."); // 葡萄牙语:未授权权限
        }
    });

Service Worker代码

self.addEventListener("push", e => {
    const data = e.data.json();
    self.registration.showNotification(data.title, {
      body: data.message,
      icon: "http://image.ibb.co/frYOFd/tmlogo.png"
    });
});

尝试的解决方案代码

function createSW(){
    if("serviceWorker" in navigator){
        navigator.serviceWorker.register("scripts/worker.js", {
            scope: "/billings/scripts/"
        }).then(async function(reg){
            console.log(reg);
            if(reg.active){
                const subscription = await reg.pushManager.subscribe({
                    userVisibleOnly: true,
                    applicationServerKey: urlBase64ToUint8Array(pubKey)
                });
                fetch("http://192.168.1.10:8080/pushSub", {
                    method: "POST",
                    headers: {
                        'Accept': 'application/json',
                        'Access-Control-Allow-Origin': '*',
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + localStorage.getItem("user")
                    },
                    body: JSON.stringify({
                        sub: JSON.stringify(subscription)
                    })
                });
            }
        });
    }
}

内容的提问来源于stack exchange,提问作者Tomás

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.21 16:06:25