覆盖 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请求全部失败，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
});

我的自定义获取事件从未被触发，因为在 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 Worker 似乎不是我用例的最佳解决方案。我遇到过 this resource 解释了如何存储 POST/PUT 请求但没有提到 Angular.

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

Answer 1

这里的问题不是angular的service worker，而是service worker实际解决不了的普遍问题

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），它，离线时，记住更改尝试并尝试同步他们回到在线模式。

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

Overriding Angular's Service Worker to handle POST requests

javascript

crud

service-worker

progressive-web-apps

angular