workbox.backgroundSync.Plugin 不創建 IndexedDB

Question

我已將我的 Angular 應用程序轉換為 PWA。 Angular 服務工作者完成其工作並緩存 static 資源，以便在離線時加載應用程序 shell。

現在，我還想緩存 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

Answer 1

registerRoute 的第一個參數是/\*/ ，它是一個匹配文字“*”的正則表達式。 所以它不匹配其他任何東西。

將其更改為/.*/

Answer 2

不知道是什么導致了問題，但是在第一行注釋掉 Angular service worker 解決了問題。 顯然，將 Angular service worker 和 workbox 混用並不是一個好主意。 也許是我使用了后台同步插件。 現在，我將為我的 service worker 使用 workbox - 至少在 Angular service worker 允許后台同步之前。