Service Worker 没有缓存

问题描述

当我测试以下代码并转到 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)));
});

解决方法

所以问题出在这部分：

// 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())
  );
});

非常简单：cache.addAll 返回一个 promise，您无需等待。您只需要在 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 非常有帮助，而且会让调试变得更容易。