Service Worker：对 Angular 7 上的 API 的 HTTP GET 请求永远不会触发获取事件侦听器

Question

我使用@angular/service-worker模块生成了一个 service-worker 来缓存我的 Angular 7 应用程序的所有静态资产，它运行良好（在 chrome 开发工具的网络选项卡中，这些文件被标记为from ServiceWorker）。

我想要做的是向从外部 API 获取的数据添加缓存支持（和后台同步）。我知道该@angular/service-worker模块支持dataGroups资产类型，但我想做一些更复杂的事情：首先提供缓存数据，然后通过网络获取数据，更新缓存，最后返回第二个更新鲜的响应。这个想法在离线食谱中有所描述：https : //developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-then-network 所以我需要添加一个与一个由 Angular 生成。问题是我的fetch事件侦听器从未被触发。

我注册了我的服务工作者： ServiceWorkerModule.register('../sw.js', { enabled: environment.production }),在 app.module.ts 中。

sw.js 文件导入 ngsw-worker.js（由 Angular 生成）：

importScripts('./ngsw-worker.js');
importScripts('./sw-custom.js');

然后，sw-custom.js在install和上添加两个事件侦听器fetch：

self.addEventListener('install', function(event) {
    try {
        console.log('typeof System in install', typeof System);
    } catch(e){}

    console.log('caching');
    event.waitUntil(
        caches.open(CACHE_VERSION).then(function(cache) {
            console.log('caching - getting');
            return;
        }).catch(function(error){ console.log('error', error) })
    );
  });

  self.addEventListener('fetch', event => {
    console.log('Hello service worker');
    if (event.request.method !== 'GET') return;
    const request = event.request.clone();
    // Do stuff
    event.respondWith(fetch(request));
  });

install事件监听器被执行，但不是那个fetch，我不明白为什么。

Answer 1

在检查选项卡上，转到“应用程序”>“服务工作人员”，单击 取消注册，然后按 ctrl-F5 两次，第一次刷新是服务工作人员注册自身，第二次刷新是服务工作人员侦听您的获取事件。您的代码已经在我的 Angular 6 项目上进行了测试。