workbox.backgroundSync.Plugin 不创建 IndexedDB答案

【问题标题】：workbox.backgroundSync.Plugin doesn't create IndexedDBworkbox.backgroundSync.Plugin 不创建 IndexedDB
【发布时间】：2020-02-13 08:18:27
【问题描述】：

我已将我的 Angular 应用程序转换为 PWA。 Angular Service Worker 完成其工作并缓存静态资源，以便在离线时加载应用外壳。

现在，我还想缓存 POST 请求，这些请求将在设备重新联机后立即发送。不幸的是，Angular Service Worker 不支持 GET 和 HEAD 以外的 HTTP 方法。因此，我使用的是 Google 的工作箱库。

按照官方的“基本用法”sn-p [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

【问题讨论】：

标签： angular progressive-web-apps workbox background-sync

【解决方案1】：

不知道是什么导致了问题，但是在第一行注释掉 Angular 服务工作者可以解决问题。显然，混合使用 Angular 服务工作者和工作箱并不是一个好主意。也许是我使用了后台同步插件。现在，我将为我的服务工作人员使用工作箱 - 至少在 Angular 服务工作人员允许后台同步之前。

【讨论】：

【解决方案2】：

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

将其更改为/.*/

【讨论】：

谢谢。解决了这个问题。不幸的是，事实并非如此。还尝试将确切的 URL 作为字符串传递。仍然收到 504（网关超时）并且没有 IndexedDB