首次授权通知后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
相关产品推荐
相关产品推荐

