self.addEventListener('fetch', function(e) { }) 不工作答案

【问题标题】：self.addEventListener('fetch', function(e) { }) is not workingself.addEventListener('fetch', function(e) { }) 不工作
【发布时间】：2019-02-05 07:49:58
【问题描述】：

我对 PWA 有疑问，如果有人帮助我，我会很高兴。在我的 PWA 中，存储 HTML、JS 和 CSS 等静态文件没有任何问题。但我面临动态数据的问题。即：我的self.addEventListener('fetch', function(e) { }) 没有被调用，但其他功能运行良好，即：“安装”和“活动”事件。

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

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

提前致谢！

【问题讨论】：

标签： progressive-web-apps angular-service-worker service-worker-events

【解决方案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;
        })
      })
    )
  }

注意：您不能缓存 POST 请求 Can service workers cache POST requests?

【讨论】：