如何利用 Service Worker 实现可靠的离线应用和资源缓存？

Service Worker 是实现 Web 应用离线可用的核心，通过注册并激活代理、缓存关键资源、拦截请求返回缓存内容，并在更新时清理旧缓存，确保离线体验稳定可靠。

要让 Web 应用在离线状态下依然可用，Service Worker 是核心工具。它充当浏览器与网络之间的代理，能拦截请求并返回缓存资源，从而实现可靠的离线体验。关键在于合理设计缓存策略、正确注册 Service Worker，并处理好更新机制。

注册并激活 Service Worker

在页面加载时注册 Service Worker，确保它尽早接管网络请求。

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 文件必须可通过 HTTPS 访问（开发环境 localhost 除外），且路径正确，否则无法正常作用于页面。

缓存静态资源：使用 Cache API

在 Service Worker 安装阶段预缓存关键资源，如 HTML、CSS、JS 和离线页面。

监听 install 事件，打开缓存并添加文件：

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache =>
      cache.addAll([
        '/',
        '/styles/main.css',
        '/scripts/app.js',
        '/offline.html'
      ])
    )
  );
});

这样即使用户首次访问后断网，也能从缓存中加载基本界面。

AppMall应用商店

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

56

查看详情

拦截请求并返回缓存内容

通过 fetch 事件监听所有网络请求，优先返回缓存资源，实现离线可用。

常用策略：Cache First，网络回退

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cached =>
      cached || fetch(event.request).catch(() =>
        caches.match('/offline.html')
      )
    )
  );
});

这个逻辑保证了资源优先从缓存读取，若未命中则发起网络请求，失败时展示离线页。

管理缓存更新与版本控制

每次修改缓存内容时，应升级缓存名称（如 'v2'），并在 activate 阶段清理旧缓存。

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

这能避免旧资源残留，确保用户获取最新版本。

基本上就这些。只要注册正确、缓存关键资源、合理响应请求，并定期清理旧缓存，就能构建出稳定可靠的离线应用。不复杂但容易忽略细节，比如路径错误或缓存命名混乱会导致失败。

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