javascript - 覆盖 Angular 的 Service Worker 来处理 POST 请求

Question

我有一个 angular/nodejs 应用程序，用户可以在其中查看资源列表、更新它们、创建它们和删除它们(一个基本的 CRUD 应用程序)。我想把它变成 PWA，这样用户就可以离线工作。
它必须 :

缓存 Assets (html、css ...)

缓存 GET 请求的结果

存储 POST/PUT/DELETE 请求，以便稍后在连接可用时分派(dispatch)它们。

因此，首先，我尝试按照此处的文档将 Angular 的 Service Worker 添加到我的应用程序中: https://angular.io/guide/service-worker-getting-started ng add @angular/pwa
前两点效果很好:离线时我仍然可以查阅资源列表。但是 POST/PUT/DELETE 请求都失败了， as it only caches non-mutating requests

然后我偶然发现了 this tutorial它描述了如何扩展 Angular Service Worker。

使用此代码:

importScripts('./ngsw-worker.js');
self.addEventListener('fetch', (event) => {
  console.log('fetch event !')
  // Here do something to store request if method is POST/PUT/DELETE
});

我的自定义 fetch 事件从未触发，因为在 ngsw-worker.js 内部已经定义了一个捕获事件的“获取”事件处理程序。
如果我在 Angular 之前声明我的听众:

self.addEventListener('fetch', (event) => {
  console.log('fetch event !')
  // Here do something to store request if method is POST/PUT/DELETE
});
importScripts('./ngsw-worker.js');

然后我可以看到日志，但是离线模式不再起作用，我相信这是因为没有触发 Angular 的“获取”监听器。

总之，对于我的用例来说，Angular 的 Service Worker 似乎不是最好的解决方案。
我遇到了 this resource这解释了如何存储 POST/PUT 请求，但没有提到 Angular。

有没有其他方法可以覆盖 Angular 的服务人员来存储请求？
或者我应该使用其他可以满足我需求的技术(如果有的话)？
谢谢，

Answer 1

这里的问题不是关于 Angular 的服务人员，而是服务人员实际上无法解决的常见问题。
PWA 结构允许浏览器缓存应用程序本身(.css .html .js 文件、图像等)。所有这些都是使用 GET 检索的静态数据。 HTTP 请求。
现在，当我们使用 PWA 结构缓存一些数据时，我们 GET从一个休息API，我们正在做一些有点棘手的事情......它可以工作，好的。
在离线模式下修改数据的调用的问题更多......考虑到不同用户执行的更改之间的并发性。更简单地说，考虑以下调用序列

GET /data/42     // to retrieve an object
POST /data/42    // to update the object
GET /data/42     // to retrieve the same object

当在线时，我们期望第一个和第三个调用(实际上是同一个调用)有两个不同的响应。在离线模式下，服务人员如何复制这种情况？它至少应该知道被调用 API 的逻辑，但是即使我们将逻辑教给我们的 service worker，它又如何预测在第二次和第三次调用期间可能引发的错误呢？
在计划在离线模式下处理数据的 PWA 中处理数据的正确方法是实现客户端数据层(使用 localStorage 或 IndexedDB )，当离线时，它会记住更改尝试和回到在线模式时尝试同步它们。