Question

我使用@angular/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 因此，我需要添加一个自定义的SW与Angular生成的SW共存。问题是我的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

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

服务人员：获取事件监听器永远不会通过对Angular 7上的API的HTTP GET请求触发

1 个答案: