Question

我已经使用Service Worker在我的Web应用程序中实现了推送WebAPI，因为很多文章都在网上解释。现在我需要在IndexedDB中存储一些数据，以便在Web应用程序关闭时使它们可用（chrome选项卡关闭，后台执行中的服务工作者）。特别是我想存储一个简单的URL来检索通知数据（来自服务器）。

这是我的代码：

    self.addEventListener("push", (event) => {
    console.log("[serviceWorker] Push message received", event);

    notify({ event: "push" }); // This notifies the push service for handling the notification

    var open = indexedDB.open("pushServiceWorkerDb", 1);
    open.onsuccess = () => {
        var db = open.result;
        var tx = db.transaction("urls");
        var store = tx.objectStore("urls");
        var request = store.get("fetchNotificationDataUrl");

        request.onsuccess = (ev) => {
            var fetchNotificationDataUrl = request.result;
            console.log("[serviceWorker] Fetching notification data from ->", fetchNotificationDataUrl);

            if (!(!fetchNotificationDataUrl || fetchNotificationDataUrl.length === 0 || !fetchNotificationDataUrl.trim().length === 0)) {
                event.waitUntil(
                    fetch(fetchNotificationDataUrl, {
                        credentials: "include"
                    }).then((response) => {
                        if (response.status !== 200) {  
                            console.log("[serviceWorker] Looks like there was a problem. Status Code: " + response.status);
                            throw new Error();
                        }

                        return response.json().then((data) => {
                            if (!data) {
                                console.error("[serviceWorker] The API returned no data. Showing default notification", data);
                                //throw new Error();
                                showDefaultNotification({ url: "/" });
                            }

                            var title = data.Title;
                            var message = data.Message;
                            var icon = data.Icon;
                            var tag = data.Tag;
                            var url = data.Url;

                            return self.registration.showNotification(title, {
                                body: message,
                                icon: icon,
                                tag: tag,
                                data: {
                                    url: url
                                },
                                requireInteraction: true
                            });
                        });
                    }).catch((err) => {
                        console.error("[serviceWorker] Unable to retrieve data", err);

                        var title = "An error occurred";
                        var message = "We were unable to get the information for this push message";
                        var icon = "/favicon.ico";
                        var tag = "notification-error";
                        return self.registration.showNotification(title, {
                            body: message,
                            icon: icon,
                            tag: tag,
                            data: {
                                url: "/"
                            },
                            requireInteraction: true
                        });
                    })
                );
            } else {
                showDefaultNotification({ url: "/" });
            }
        }
    };
});

不幸的是，当我收到新的推送事件时，它不起作用，显示此异常：

未捕获的DOMException：无法在'ExtendableEvent'上执行'waitUntil'：事件处理程序已经完成。在IDBRequest.request.onsuccess（https://192.168.0.102/pushServiceWorker.js:99:23）

我该如何解决这个问题？

提前致谢

Answer 1

首次调用事件处理程序时，需要同步完成对event.waitUntil()的初始调用。然后，您可以将承诺链传递给event.waitUntil()，并在该承诺链内部执行任意数量的异步操作。

您当前的代码在调用event.waitUntil()之前调用异步的IndexedDB回调，这就是您看到错误的原因。

在promise链中包含IndexedDB操作的最简单方法是使用包装库，如idb-keyval，它采用基于回调的IndexedDB API并将其转换为基于promise的API。

您的代码可能如下所示：

self.addEventListener('push', event => {
  // Call event.waitUntil() immediately:
  event.waitUntil(
    // You can chain together promises:
    idbKeyval.get('fetchNotificationDataUrl')
      .then(url => fetch(url))
      .then(response => response.json())
      .then(json => self.registration.showNotification(...)
  );
});

推送WebAPI + IndexedDB + ServiceWorker

1 个答案: