部署到服务器后Service Worker无法自动更新，本地调试正常

我来帮你捋捋这个问题——本地localhost调试刷新一次就能更新，但部署到线上后修改service-worker.js却没反应，这其实是生产环境里很常见的缓存坑。

问题根源 #

本地调试时，浏览器默认不会强缓存service-worker.js，但线上环境中，服务器往往会给静态文件设置缓存策略，导致浏览器一直拿着旧的service-worker.js缓存副本，根本没去请求新的文件。另外你贴的代码里还有个小疏漏：CACHE_STATIC_NAME变量未定义，而且install事件里的缓存操作也没实际添加资源，不过这不是更新不生效的直接原因。

具体解决方案 #

1. 强制浏览器不缓存service-worker.js

让服务器给service-worker.js返回以下响应头，确保浏览器每次都拉取最新版本：

Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

这样不管用户刷新多少次，浏览器都会主动请求最新的service-worker.js文件。

2. 给缓存名称加版本号

每次修改Service Worker逻辑时，更新缓存名称的版本号，浏览器会识别为新缓存并触发install事件：

// 给缓存名称加版本号，修改代码时更新这个版本号即可
const CACHE_STATIC_NAME = 'static-v2';

self.addEventListener('install', function(event) {
    console.log('[Service Worker] Menginstall Service Worker ...', event);
    event.waitUntil(
        caches.open(CACHE_STATIC_NAME)
        .then(function (cache) {
            console.log('[Service Worker] Precachi...');
            // 这里可以添加你需要预缓存的资源，比如：
            // cache.addAll(['/', '/index.html', '/styles.css']);
        })
    );
});

// 添加activate事件，自动清理旧缓存
self.addEventListener('activate', function(event) {
    console.log('[Service Worker] Mengaktifkan Service Worker ...', event);
    event.waitUntil(
        caches.keys()
        .then(function(cacheNames) {
            return Promise.all(
                cacheNames.filter(function(cacheName) {
                    // 过滤掉旧版本的缓存
                    return cacheName !== CACHE_STATIC_NAME;
                }).map(function(cacheName) {
                    // 删除旧缓存
                    return caches.delete(cacheName);
                })
            );
        })
    );
});

3. 在主页面主动触发更新检查

在你的主页面JS里添加代码，主动检查Service Worker更新，还能给用户提示：

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
        console.log('Service Worker terdaftar dengan sukses:', registration);
        
        // 定期检查更新，比如每小时一次
        setInterval(function() {
            registration.update();
        }, 3600000);
        
        // 监听更新可用事件，提示用户刷新
        registration.addEventListener('updatefound', function() {
            const newWorker = registration.installing;
            newWorker.addEventListener('statechange', function() {
                if (newWorker.state === 'installed') {
                    if (navigator.serviceWorker.controller) {
                        console.log('Service Worker baru tersedia, silakan refresh halaman.');
                        // 这里可以改成弹窗提示用户点击刷新
                    }
                }
            });
        });
    })
    .catch(function(err) {
        console.log('Pendaftaran Service Worker gagal:', err);
    });
}

额外提醒 #

• 刷新页面后，旧的Service Worker会继续控制页面，直到所有打开的页面都关闭重开；如果想让新Worker立即生效，可以在activate事件里调用self.skipWaiting()。
• 要是用了CDN，记得单独给service-worker.js配置不缓存，避免CDN把旧文件缓存起来。

内容的提问来源于stack exchange，提问作者Andi Ahmad Fauzy