Question

我已将Angular应用程序转换为PWA。 Angular服务工作者完成其工作并缓存静态资源，以便在脱机时加载应用程序外壳。

现在，我还想缓存将在设备重新联机后立即发送的POST请求。不幸的是，Angular服务工作者不支持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'
);

track.service.ts：

addTrack(track: Track): Observable<Track> {
  return this.http.post<Track>(`https://backend/track`, track);
}

工作箱已加载，但是在脱机时执行POST请求时，不会创建IndexedDB。使用Fetch API代替Angular HTTP客户端都行不通。

[1] https://developers.google.com/web/tools/workbox/modules/workbox-background-sync

Answer 1

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

将其更改为/.*/

Answer 2

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

workbox.backgroundSync.Plugin无法创建IndexedDB

2 个答案: