Javascript 服务工作者没有缓存

当我测试以下代码并转到ChromeDevTools的缓存时，它是空的。它在某个时刻工作，在更改

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

---

因此，问题在于这一部分：

//调用安装事件
self.addEventListener（'install'，e=>{
console.log（'Service Worker:Installed'）；
e、 等到(
贮藏
.open（缓存名称）
。然后（缓存=>{
console.log（缓存）
log（'Service Worker:Caching Files'，cache）；
cache.addAll（cacheAssets）；//self.skipWaiting（）
);
});

它非常简单：

cache.addAll

返回一个承诺，您不必等待它。您只需在

cache.addAll

语句之前添加一个

return

，它将把承诺传递给下一个

。然后（）

（

。然后（（）=>self.skipWaiting（））

）

顺便说一句：一个更好的解决方案是使用wait，因为它会让事情变得更清楚。它看起来像这样：

e.waitill(
异步（）=>{
cache=等待缓存。打开（cacheName）；
log（'Service Worker:Caching Files'，cache）；
wait cache.addAll（cacheAssets）；
自我skipWaiting（）；
}
);

---

学习async/await非常有帮助，并且会使调试变得更容易。

看起来您仍然让旧的服务人员运行。您更新了服务人员吗？@lxhom我正在本地主机上测试它，只在本地更新了文件。当我更改

cacheName但是当我点击缓存存储
00001
时，什么也没有出现。是否有一个名为
00001
的缓存包含0个缓存项，或者根本没有缓存项？@lxhom有一个名为那样的缓存，在itI中没有缓存项。我尝试应用它，但仍然有相同的结果：（然后在您页面的JS控制台中尝试以下代码：
cache=await caches.open（“00001”）；await cache.addAll（“/”）
，然后查看devtools中的缓存部分。如果这样做有效，那么这可能是一个链接错误的承诺。我强烈建议使用async/await重写它，您可能会发现问题。