angular - workbox.backgroundSync.Plugin 不创建 IndexedDB
问题描述
我已将我的 Angular 应用程序转换为 PWA。Angular 服务工作者完成它的工作并缓存静态资源,以便在离线时加载应用程序外壳。
现在,我还想缓存 POST 请求,这些请求将在设备重新上线后立即发送。不幸的是,Angular Service Worker 不支持 GET 和 HEAD 以外的 HTTP 方法。因此,我使用的是 Google 的工作箱库。
按照官方的“基本用法”片段 [1],我使用了 workbox.backgroundSync.Plugin() 并定义了要缓存的路由:
sw.js:
importScripts('ngsw-worker.js');
importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.0.0/workbox-sw.js')
console.log(`Yay! Workbox is loaded `);
const bgSyncPlugin = new workbox.backgroundSync.Plugin('http-queue');
workbox.routing.registerRoute(
/.*/,
new workbox.strategies.NetworkOnly({plugins: [bgSyncPlugin]}),
'POST'
);
跟踪服务.ts:
addTrack(track: Track): Observable<Track> {
return this.http.post<Track>(`https://backend/track`, track);
}
Workbox 已加载,但在离线时执行 POST 请求时,不会创建 IndexedDB。使用 Fetch API 而不是 Angular HTTP 客户端也不起作用。
[1] https://developers.google.com/web/tools/workbox/modules/workbox-background-sync
解决方案
不知道是什么原因导致了问题,但是在第一行注释掉 Angular 服务工作者可以解决问题。显然,混合使用 Angular 服务工作者和工作箱并不是一个好主意。也许是我使用了后台同步插件。现在,我将为我的服务工作者使用工作箱——至少在 Angular 服务工作者允许后台同步之前。