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

Question

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

• 缓存资产（html、css ...）
• 缓存 GET 请求的结果
• 存储 POST/PUT/DELETE 请求，以便稍后在连接可用时分派它们。

因此，首先，我尝试按照此处的文档将 Angular 的 Service Worker 添加到我的应用程序中：https : //angular.io/guide/service-worker-getting-started ng add @angular/pwa

前两点效果很好：离线时我仍然可以查阅资源列表。但是 POST/PUT/DELETE 请求都失败了，因为它只缓存非变异请求

然后我偶然发现了这个教程，它描述了如何扩展 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已经定义了一个捕获事件的“fetch”事件处理程序。如果我在 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 的 'fetch' 侦听器。

总之，似乎 Angular 的 Service Workers 可能不是我的用例的最佳解决方案。我遇到过这个资源，它解释了如何存储 POST/PUT 请求，但它没有提到 Angular。

有没有其他方法可以覆盖 angular 的 service worker 来存储请求？或者我应该使用另一种满足我需求的技术（如果有的话）？谢谢，

Answer 1

这里的问题与 Angular 的 Service Worker 无关，这是 Service Worker 实际上无法解决的常见问题。

PWA 结构允许浏览器缓存应用程序本身（.css .html .js 文件、图像等）。所有这些都是通过 HTTP 请求检索的静态数据GET。

现在，当我们使用 PWA 结构来缓存来自 REST API的一些数据GET时，我们正在做一些有点棘手的事情......它有效，好吧。

在离线模式下修改数据的调用的问题更多的是......考虑不同用户执行的更改之间的并发性。更简单地说，考虑以下调用顺序

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

当在线时，我们期望第一个和第三个调用（实际上是同一个调用）有两个不同的响应。在离线模式下，Service Worker 如何复制这种场景？它至少应该知道被调用 API 的逻辑，但即使我们向 Service Worker 教授这些逻辑，它如何预测在第二次和第三次调用期间可能引发的错误？

在计划在离线模式下处理数据的 PWA 中处理数据的正确方法是实现客户端数据层（使用localStorage或IndexedDB），该数据层在离线时会记住更改尝试，并在返回时尝试同步它们至在线模式。