元素
元素
工具
博客
问答

PWA中Cache API缓存的资源怎么更新不生效？

W″奥杰 阅读 30
移动

我用Cache API在service worker里缓存了静态资源，但改了JS文件后，刷新页面还是加载旧版本。我已经在install事件里用了新的cache名称，也调用了skipWaiting()和clientsClaim()，但手机上还是没更新。

这是我的缓存策略代码：

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('my-cache-v2').then((cache) => {
      return cache.addAll([
        '/index.html',
        '/app.js',
        '/styles.css'
      ]);
    }).then(() => self.skipWaiting())
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

是不是还要手动清理旧缓存？或者我哪里漏了？真机测试特别麻烦，求指点！

我来解答 赞 4 收藏
二维码
手机扫码查看
反馈
2 条解答
开发者嘉赫
开发者嘉赫 Lv1
你在install事件里虽然用了新的cache名称，但是旧的缓存没有被清理掉。你需要在activate事件里手动删除旧的缓存。以下是修改后的代码示例：

const CACHE_NAME = 'my-cache-v2';



self.addEventListener('install', (event) => {

  event.waitUntil(

    caches.open(CACHE_NAME).then((cache) => {

      return cache.addAll([

        '/index.html',

        '/app.js',

        '/styles.css'

      ]);

    }).then(() => self.skipWaiting())

  );

});



self.addEventListener('activate', (event) => {

  event.waitUntil(

    caches.keys().then((cacheNames) => {

      return Promise.all(

        cacheNames.map((cacheName) => {

          if (cacheName !== CACHE_NAME) {

            return caches.delete(cacheName);

          }

        })

      );

    }).then(() => self.clients.claim())

  );

});



self.addEventListener('fetch', (event) => {

  event.respondWith(

    caches.match(event.request).then((response) => {

      return response || fetch(event.request);

    })

  );

});


这样，每次有新的service worker激活时，旧的缓存就会被清理，确保加载的是最新的资源。别忘了，有时候浏览器兼容性也会搞事，最好清除一下浏览器缓存再测试。
点赞
2026-03-23 19:11
天瑞🍀
天瑞🍀 Lv1
这个问题啊，我之前也遇到过，挺头疼的。你已经做了不少正确的步骤，但确实还差最后一步，就是要手动清理旧缓存。你可以在activate事件里加上这段代码，删掉旧的缓存版本：

const cacheWhitelist = ['my-cache-v2'];



self.addEventListener('activate', (event) => {

  event.waitUntil(

    caches.keys().then((cacheNames) => {

      return Promise.all(

        cacheNames.map((cacheName) => {

          if (cacheWhitelist.indexOf(cacheName) === -1) {

            return caches.delete(cacheName);

          }

        })

      );

    }).then(() => self.clients.claim())

  );

});


这段代码会检查所有缓存，然后删掉不在白名单里的旧版本缓存。别走弯路，这一步很重要，否则浏览器还是会从旧缓存里加载资源。记得在真机上测试的时候，有时候得强制刷新一下（比如在安卓上可以长按刷新按钮），有时候浏览器会很执拗地用旧缓存。
点赞
2026-03-20 22:12
相关推荐
元素
元素
工具
博客
问答
登录/注册