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

Question

我正在尝试为 PWA 构建离线站点版本，但遇到了问题。 Service Worker 'sync' 事件在 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 的浏览器上，它将使用它。在没有本机支持的浏览器上，它会在每次服务工作线程启动时自动尝试重播排队的请求。

在这两种情况下，它都使用 IndexedDB "under the hood" 来存储失败的序列化版本 Request。