javascript - Service worker 'sync' 事件在 IOS 上不起作用，如何将离线数据存储到 indexedDB 中？

Question

我正在尝试为 PWA 构建一个离线站点版本，但遇到了一个问题。Service Worker 的“同步”事件在 Android 和桌面上运行良好，但在 IOS 上不起作用。我的代码在这里初始化。

        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('${appDns!}/serviceWorker.js?v=${appVersion!}')
                    .then(function() {
                        return navigator.serviceWorker.ready
                    })
                    .then(function (registration) {
                        if (registration.sync) {
                            registration.sync.register('offline-sync')
                                    .then(function () {
                                    })
                                    .catch(function (err) {
                                        console.error('Service workers sync problem.', err);

                                    });
                        }
                    })
                    .catch(function (err) {
                        console.info('Service workers "register" is not supported.');
                        return err;
                    });
}

但是在 IOS 上 registration 没有 sync 并且 service worker 中的方法 sync 没有触发

    self.addEventListener('sync', event => {
        console.log('SYNC!!!!!!!!!! event:', event);
        return event.waitUntil(syncDataForOffline().catch(e => console.error("syncDataForOffline: ", e)));
    });

也许有人知道如何将数据存储到 IOS 的 indexedBD 中。

.

Answer 1

一种选择是使用 workbox-background-sync .

在原生支持后台同步 API 的浏览器上，它将使用它。在没有 native 支持的浏览器上，它会在每次服务工作线程启动时自动尝试重播排队的请求。

在这两种情况下，它都“在幕后”使用 IndexedDB 来存储失败的 Request 的序列化版本。