ServiceWorker离线应用实现指南

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《Service Worker实现离线Web应用全攻略》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

Service Worker是实现Web应用离线可用的核心，通过注册、安装、缓存资源、拦截请求及更新版本完成离线支持。首先在页面中注册sw.js，检查浏览器支持并注册Service Worker；接着在sw.js的install事件中预缓存关键资源如HTML、CSS、JS和图片；然后通过fetch事件拦截网络请求，优先从缓存返回内容，采用“缓存优先”策略；当应用更新时，更改CACHE_NAME版本号，并在activate事件中删除旧缓存，确保用户获取最新资源。合理处理这些步骤可构建稳定离线的PWA应用。

要让Web应用在离线状态下依然可用，Service Worker 是核心技术。它是一个运行在浏览器后台的脚本，能拦截网络请求、缓存资源，并在无网络时提供缓存内容。实现的关键在于注册 Service Worker、配置缓存策略，并妥善处理请求。

注册并安装 Service Worker

在页面加载时注册 Service Worker，浏览器会自动下载并安装它。

在主页面（如 index.html）中添加：
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('SW registered:', reg))
    .catch(err => console.log('SW registration failed:', err));
}

这段代码检查浏览器是否支持 Service Worker，然后注册一个名为 sw.js 的文件。

缓存关键资源

Service Worker 安装阶段可以预缓存静态资源，比如 HTML、CSS、JS 和图片，确保离线时也能访问。

const CACHE_NAME = 'v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/scripts/app.js',
  '/images/logo.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

这样，在安装过程中，指定资源会被存入浏览器缓存。

拦截请求并返回缓存内容

当用户请求资源时，Service Worker 可以拦截这些请求，优先从缓存中返回内容。

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        return response || fetch(event.request);
      })
  );
});

这个策略称为“缓存优先”，适用于静态资源。对于动态数据，可结合网络优先或 stale-while-revalidate 策略。

更新缓存版本

当应用更新时，需升级缓存版本，避免用户使用旧内容。

修改 CACHE_NAME 为 'v2'，并在 activate 事件中清理旧缓存：

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(
        keys.filter(key => key !== CACHE_NAME)
          .map(key => caches.delete(key))
      )
    )
  );
});

这确保只有新版本的资源被保留，旧缓存被清除。

基本上就这些。通过合理使用 Service Worker 的 install、fetch 和 activate 事件，配合缓存管理，就能构建真正离线可用的 Web 应用。不复杂但容易忽略的是版本控制和缓存清理逻辑。

今天关于《ServiceWorker离线应用实现指南》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！