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

小书妍提问于 2026-03-13 04:38:22 阅读 9

移动

我在做PWA离线功能，用Cache API缓存了静态资源，但更新文件后刷新页面还是加载旧缓存，试过改cacheName也不行。

service worker里是这样写的：

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

是不是哪里漏了？为什么新版本的文件刷不出来？

我来解答赞 8 收藏

反馈

1 条解答

Top丶玉鑫 Lv1

问题是你的service worker只写了install缓存资源，但没写fetch事件去拦截请求返回缓存。浏览器请求时没走你的缓存，直接走了默认的网络。

加上fetch事件：

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

  event.respondWith(

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

      return response || fetch(event.request).then(fetchResponse => {

        return caches.open('v2').then(cache => {

          cache.put(event.request, fetchResponse.clone());

          return fetchResponse;

        });

      });

    })

  );

});



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

  event.waitUntil(

    caches.keys().then(keys => 

      Promise.all(keys.filter(key => key !== 'v2').map(key => caches.delete(key)))

    )

  );

});

改完记得在浏览器里手动更新service worker，或者在代码里加skipWaiting强制更新。

2026-03-13 05:00