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

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

优化

在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}，但重启浏览器后问题依旧存在，该怎么彻底替换旧缓存呢？

我来解答赞 6 收藏

反馈

1 条解答

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