Javascript 推送WebAPI+；IndexedDB+；服务人员

正如许多文章在web上解释的那样，我已经在我的web应用程序中使用ServiceWorker实现了PushWebAPI。 现在我需要在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: "/" });
            }
        }
    };
});

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

未捕获的DomeException:未能在“ExtendBleevent”上执行“waitUntil”：事件处理程序已完成。 在IDBRequest.request.onsuccess（）处

我如何解决这个问题

---

提前感谢

首次调用事件处理程序时，需要同步完成对

event.waitUntil（）

的初始调用。然后，您可以将一个承诺链传递给

event.waitUntil（）

，并在该承诺链内执行任意数量的异步操作

当前代码在调用

event.waitUntil（）

之前调用异步IndexedDB回调，这就是您看到该错误的原因

在承诺链中包含IndexedDB操作的最简单方法是使用包装器库，如，它接受基于回调的IndexedDB API并将其转换为基于承诺的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(...)
  );
});

---

对于感兴趣的人，我使用了self.importScripts（'/libs/idb-keyval/dist/idb-keyval-min.js'）；要使用来自服务工作者的idb keyval