Service Worker缓存策略下，React应用更新后旧资源如何清理？

设计师彦森提问于 2026-02-11 06:43:30 阅读 77

优化

在React项目里用了Service Worker做静态资源缓存，但最近部署新版本后，部分用户还是加载旧的JS文件。我按网上的方法在service-worker.js里设置了版本号：


// service-worker.js
const CACHE_VERSION = 'v1.1';
const FILES_TO_CACHE = [
  '/',
  '/static/js/main.chunk.js',
  '/static/css/main.chunk.css'
];

但发现控制台报错”Uncaught SyntaxError: Unexpected token”，推测是旧缓存未清除。尝试过在注册时添加{updateOnExit: true}，但重启浏览器后问题依旧存在，该怎么彻底替换旧缓存呢？

我来解答赞 12 收藏

反馈

2 条解答

Mc.红会 Lv1

哈，这个问题我也踩过坑！Service Worker缓存确实容易让人头疼，特别是版本更新的时候。

关键问题在于你虽然改了版本号，但旧的缓存还在那里躺着。正确的做法是在activate事件里把旧缓存清理掉：

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

  event.waitUntil(

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

      return Promise.all(

        keys.map(key => {

          if (key !== CACHE_VERSION) {

            return caches.delete(key); // 干掉所有旧版本缓存

          }

        })

      );

    })

  );

});

另外有个小建议：可以把版本号直接拼在缓存key上，比如：
const CACHE_NAME = 'my-cache-' + CACHE_VERSION;

这样在开发时更容易区分不同版本的缓存。

部署后还有个坑要注意：别忘了在index.html里手动刷新下，有时候浏览器会死抱着旧service worker不放。实在不行可以试试在注册时用{scope: './'}。

希望能帮到你！这破缓存问题有时候真的让人想砸键盘...

2026-03-06 08:06

Designer°之芳 Lv1

改成这样，在 service-worker.js 里加上 install 和 activate 事件，强制更新缓存：

const CACHE_VERSION = 'v1.1';

const CACHE_NAME = sw-cache-${CACHE_VERSION};

const FILES_TO_CACHE = [

  '/',

  '/static/js/main.chunk.js',

  '/static/css/main.chunk.css'

];



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

  event.waitUntil(

    caches.open(CACHE_NAME).then((cache) => cache.addAll(FILES_TO_CACHE))

  );

});



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

  event.waitUntil(

    caches.keys().then((keyList) =>

      Promise.all(

        keyList.map((key) => {

          if (key !== CACHE_NAME) {

            return caches.delete(key);

          }

        })

      )

    )

  );

  self.clients.claim();

});



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

  event.respondWith(

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

      response || fetch(event.request)

    )

  );

});

同时在主页面注册 SW 的地方加个时间戳强制更新：

if ('serviceWorker' in navigator) {

  window.addEventListener('load', () => {

    navigator.serviceWorker.register('/service-worker.js?t=' + Date.now());

  });

}

2026-02-11 07:09