workbox.backgroundSync.Plugin 不创建 IndexedDB

Question

我已经将我的 Angular 应用程序转换为 PWA。 Angular service worker 完成它的工作并缓存静态资源，以便应用 shell 在离线时加载。

现在，我还想缓存 POST 设备重新联机后应立即发送的请求。不幸的是，Angular service worker 不支持除 GET 和 HEAD 之外的 HTTP 方法。因此，我正在使用 Google 的工作箱库。

按照官方 'Basic Usage' 片段 [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'
);

track.service.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

Answer 1

registerRoute 的第一个参数是 /\*/，它是一个匹配文字“*”的正则表达式。所以它不匹配其他任何东西。

将其更改为 /.*/

Answer 2

说不清是什么原因导致的，但是注释掉第一行的Angular service worker就解决了。显然，混合使用 Angular service worker 和 workbox 不是一个好主意。也许是我使用了后台同步插件。现在，我将为我的 service worker 使用 workbox - 至少在 Angular service worker 允许后台同步之前。

workbox.backgroundSync.Plugin 不创建 IndexedDB

workbox.backgroundSync.Plugin doesn't create IndexedDB

progressive-web-apps

background-sync

angular

workbox