javascript - navigator.serviceWorker.controller.postMessage 为空，但仅在第一页加载时

Question

在第一个页面加载（清空 IndexDB、缓存和注销服务工作者之后）或在没有缓存的情况下重新加载（Ctrl + F5）时，我收到以下错误：

Uncaught (in promise) TypeError: Cannot read property 'postMessage' of null

并且这个错误不断出现在服务工作者的所有其他发布消息中。直到我再次重新加载页面（使用缓存）。这不是比赛条件。第一次加载页面时出现问题。

我只是不明白什么。有什么提示吗？谷歌什么也没想到。

导致它的代码如下：

const loadUUID = (callback, storename, data) => {
    let request = window.indexedDB.open(DBN, DBN_VERSION), db, tx, store, index;

    request.onerror = e => {
        console.log('request.onerror');
        console.log(e);
    };

    request.onsuccess = e => {
        db = request.result;
        tx = db.transaction('uuid', 'readonly');
        store = tx.objectStore('uuid');
        let cursor = store.openCursor(null, 'next');
        var mostRecent = null;

        cursor.onsuccess = e => {
            if (e.target.result) {
                mostRecent = e.target.result.value.uuid;
            }
        };


        tx.oncomplete = e => {
            db.close();
            if (data) {
                data.uuid = mostRecent;
                //navigator.serviceWorker.controller.postMessage(data);
                navigator.serviceWorker.ready.then(serviceworkerRegistration => {
                    console.log('within ready');
                    return serviceworkerRegistration.pushManager.getSubscription();

                })
                .then(subscription => {
                    if (!subscription) {
                        console.log('subscription MISSING');
                    }
                    console.log('within then of subscription');
                    navigator.serviceWorker.controller.postMessage(data); //line triggering the error

                });
            } else {
                callback(mostRecent);
            }
        };
    };
    request.onupgradeneeded = e => {
        let db = request.result;
        STORES.forEach(storename => {
            if (!db.objectStoreNames.contains(storename)) {
                db.createObjectStore(storename, {autoIncrement: true});
            }
        });
    };
};

注释掉的行会导致完全相同的问题。我认为这可能是一种竞争条件，SO 上的另一篇文章建议等待 SW 准备好。但这对我没有帮助。

标签： javascriptservice-worker

Answer 1

这似乎可以解决问题：

        navigator.serviceWorker.ready.then(worker => {
            worker.active.postMessage(loggingdata); 
        });