Service Worker 注册后为什么刷新页面还是没生效？

码农松浩提问于 2026-03-26 08:16:21 阅读 17

前端

我按照教程注册了 Service Worker，控制台也没报错，但刷新页面后离线功能完全没起作用，缓存也没打上。是不是注册时机有问题？

我的注册代码是这样写的：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('SW registered:', reg))
      .catch(err => console.log('SW failed:', err));
  });
}

而且 sw.js 文件确实能通过浏览器直接访问到，路径应该没错。到底哪里漏了？

我来解答赞 1 收藏

反馈

1 条解答

诸葛小敏 Lv1

看起来你已经完成了基本的注册流程，但有几个常见问题可能导致 Service Worker 没有按预期工作。首先得确认你的 sw.js 文件里确实定义了缓存策略。

推荐的做法是确保在 sw.js 里有以下基础结构：

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

  event.waitUntil(

    caches.open('my-cache').then(cache => {

      return cache.addAll([

        '/',

        '/index.html',

        '/styles/main.css'

      ]);

    })

  );

});



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

  event.respondWith(

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

      return response || fetch(event.request);

    })

  );

});

另外一个小细节是，有时候浏览器可能保留了旧的服务工作者版本。记得在开发者工具的应用面板里检查是否有旧的 SW 在运行，必要时可以点“更新”按钮强制更新。

最后提醒下，Service Worker 的作用范围和路径相关。如果你的应用在深层路径加载，而 sw.js 注册在根目录，可能会导致缓存策略没生效。尝试把注册代码移到更早执行的地方，比如直接放在 <head> 里的同步脚本中。

开发过程中这些小坑挺常见的，慢慢来就好。

2026-03-26 08:27