progressive-web-apps - self.addEventListener ('fetch'，函数(e){})不工作

Question

我对 PWA 有疑问，如果有人帮助我，我会很高兴。在我的 PWA 中，存储 HTML、JS 和 CSS 等静态文件没有任何问题。但是我面临着动态数据的问题。即:我的 self.addEventListener('fetch', function(e) { }) 没有被调用，但其他功能工作正常，即:'install' 和 'active' 事件。

更具体地说，我使用的是 @angular/service-worker，它运行良好，但我创建了另一个名为 sw.js 的 sw 文件。在我的 sw-js 中，我正在收听“安装”、“事件”和“获取”等事件。我的 sw.js fetch 没有被调用，而其他两种方法运行良好。但是在提取 ngsw-worker.js 时，单独调用 fetch 方法。

我需要的是在 PWA 中使用 angular 进行 CRUD 操作。

提前致谢!

Answer 1

您可以像下面这样进行动态缓存，service worker 将拦截每个请求并添加到缓存中。

self.addEventListener("fetch", function (event) {


    event.respondWith(
      caches.open("dynamiccache").then(function (cache) {
        return fetch(event.request).then(function (res) {
          cache.put(event.request, res.clone());
          return res;
        })
      })
    )
  }

Note : You can't cache POST Requests Can service workers cache POST requests?