如何用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 可以拦截这些请求，优先从缓存中返回内容。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

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 应用。不复杂但容易忽略的是版本控制和缓存清理逻辑。

以上就是如何用Service Worker实现离线可用的Web应用？的详细内容，更多请关注php中文网其它相关文章！