嘗試為用戶訂閱推送通知時，我的服務人員需要刷新才能激活

Question

嘗試為用戶訂閱推送通知時，我的服務人員需要刷新才能激活。 如果我然后刷新頁面，我可以繼續訂閱用戶的過程，這對我來說意味着服務人員還沒有完成注冊。 我已經嘗試將 await 等添加到我的代碼中，但它仍然需要刷新。

async function send() {
    // Register Service Worker
    console.log("Registering service worker...");
    const register = await navigator.serviceWorker.register("worker.js", {
        scope: "/portal/"
    });
    console.log("Service Worker Registered...");

    console.log("Registering Push...");
    const subscription = await register.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array(publicVapidKey)
    });
    console.log("Push Registered...");

    // Store info
    await fetch("/subscribe", {
        method: "POST",
        body: JSON.stringify(subscription),
        headers: {
            "content-type": "application/json"
        }
    });
    console.log("Subscribed..."); 
}

以上是我目前所處的位置。 首次訪問該頁面會記錄錯誤。 Failed to execute 'subscribe' on 'PushManager': Subscription failed - no active Service Worker 。 刷新后 chrome 上的通知提示出現，我可以完成該過程。

Answer 1

我這樣做了，它奏效了。 我不認為它是 100% 正確的，但它最終對我有用。

    // Register Service Worker
    console.log("Registering service worker...");
    const register = await navigator.serviceWorker.register("worker.js", {
        scope: "/portal/"
    }).then(
    function (register) {
        var serviceWorker;
        if (register.installing) {
            serviceWorker = register.installing;
            // console.log('Service worker installing');
        } else if (register.waiting) {
            serviceWorker = register.waiting;
            // console.log('Service worker installed & waiting');
        } else if (register.active) {
            serviceWorker = register.active;
            // console.log('Service worker active');
        }

        if (serviceWorker) {
            console.log("sw current state", serviceWorker.state);
            if (serviceWorker.state == "activated") {
                //If push subscription wasnt done yet have to do here
                console.log("sw already activated - Do watever needed here");
            }
            serviceWorker.addEventListener("statechange", function(e) {
                console.log("sw statechange : ", e.target.state);
                if (e.target.state == "activated") {
                    // use pushManger for subscribing here.
                    console.log("Just now activated. now we can subscribe for push notification")
                    subscribeForPushNotification(register);
                }
            });
        }
    }
);
}
async function subscribeForPushNotification(){
 // Register Service Worker
    console.log("Registering service worker...");
    const register = await navigator.serviceWorker.register("worker.js", {
        scope: "/portal/"
    });
    console.log("Service Worker Registered...");

    console.log("Registering Push...");
    const subscription = await register.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array(publicVapidKey)
    });
    console.log("Push Registered...");

    // Store
    await fetch("/subscribe", {
        method: "POST",
        body: JSON.stringify(subscription),
        headers: {
            "content-type": "application/json"
        }
    });
    console.log("Push Sent...");   
}```