Сервисный работник не кэширует

Question

Когда я тестирую следующий код и перехожу в кеш-хранилище chrome devtools, оно пусто. Это сработало в момент и после изменения cacheName в какой-то момент он остановился, не уверен, связано ли это.

      if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker
        .register('sw_cached_pages.js')
        .then(reg => console.log('Service Worker: Registered (Pages)'))
        .catch(err => console.log(`Service Worker: Error: ${err}`));
    });
  }

А вот и сам ПО:

      const cacheName = '00001';

const cacheAssets = [
  'accueil.php',
  'js/accueil.js',
  'inc/Headers.php',
  'inc/footer.php'
];

// Call Install Event
self.addEventListener('install', e => {
  console.log('Service Worker: Installed');

  e.waitUntil(
    caches
      .open(cacheName)
      .then(cache => {
        console.log(cache)
        console.log('Service Worker: Caching Files', cache);
        cache.addAll(cacheAssets);
      })
      .then(() => self.skipWaiting())
  );
});

// Call Activate Event
self.addEventListener('activate', e => {
  console.log('Service Worker: Activated');
  // Remove unwanted caches
  e.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cache => {
          if (cache !== cacheName) {
            console.log('Service Worker: Clearing Old Cache');
            return caches.delete(cache);
          }
        })
      );
    })
  );
});

// Call Fetch Event
self.addEventListener('fetch', e => {
  console.log('Service Worker: Fetching');
  e.respondWith(fetch(e.request).catch(() => caches.match(e.request)));
});

Answer 1

Может быть, причина в том, что в DevTools вашего браузера установлен флажок «Отключить кеш»? Это было причиной аналогичной проблемы, которая была у меня.

Answer 2

Итак, проблема заключается в этом разделе:

      // Call Install Event
self.addEventListener('install', e => {
  console.log('Service Worker: Installed');

  e.waitUntil(
    caches
      .open(cacheName)
      .then(cache => {
        console.log(cache)
        console.log('Service Worker: Caching Files', cache);
        cache.addAll(cacheAssets); // <- here
      })
      .then(() => self.skipWaiting())
  );
});

Это супер просто: возвращает обещание, и вы не ждете его. Вам просто нужно добавить return перед cache.addAll заявление, которое передаст обещание следующему .then() ( .then(() => self.skipWaiting())).

Кстати: лучшим решением было бы использовать ожидание, потому что это сделало бы его более понятным. Это выглядело бы так:

      e.waitUntil(
  async () => {
    cache = await caches.open(cacheName);
    console.log('Service Worker: Caching Files', cache);
    await cache.addAll(cacheAssets);
    self.skipWaiting();
  }
);

Изучение async / await очень полезно и значительно упростило бы отладку.