Работник службы: получение прослушивателя событий никогда не инициируется HTTP-запросами GET к API на Angular 7 - PullRequest
Новая
       24

Работник службы: получение прослушивателя событий никогда не инициируется HTTP-запросами GET к API на Angular 7

0 голосов
/ 11 февраля 2019

Я использовал модуль @angular/service-worker, чтобы сгенерировать сервис-работника для кэширования всех статических ресурсов для моего приложения Angular 7, и он работает хорошо (на вкладке «Сеть» в инструментах Chrome dev эти файлы помечены как 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, и я не могу понять, почему.

1 Ответ

0 голосов
/ 20 июня 2019

На вкладке проверки перейдите в Приложение> Сервисные работники, нажмите отменить регистрацию , затем дважды нажмите Ctrl-F5, первое обновление предназначено для сервисных работников, чтобы зарегистрироваться, второе обновление предназначено для сервисных работниковслушатель вашего события извлечения.Ваш код проверен на работе над моим проектом Angular 6.

...