JavaScriptServiceWorker离线缓存教程

想要提升网站用户体验，实现离线访问？本文为你提供一份详尽的JavaScript Service Worker教程，教你轻松实现离线缓存！通过注册Service Worker脚本（sw.js），在`install`事件中预先缓存HTML、CSS、JS、图片等关键静态资源，利用`fetch`事件拦截网络请求，优先返回缓存内容，即使在离线状态下，用户也能流畅浏览已访问过的页面。本文还讲解了如何更新缓存版本，避免用户使用旧资源，确保你的网站始终提供最新内容。掌握Service Worker，让你的网站更具吸引力，提升用户粘性！

注册Service Worker并缓存资源，实现离线访问：在主页面注册sw.js，安装时缓存核心文件，通过fetch事件优先返回缓存内容，更新时清除旧缓存，确保用户可离线浏览已加载的页面。

利用JavaScript的Service Worker实现离线缓存，核心在于注册一个后台运行的脚本，拦截网络请求并返回预先缓存的资源。只要用户首次访问过页面，后续即使断网也能看到内容。

注册并安装Service Worker

在主页面中注册Service Worker脚本，通常是sw.js或service-worker.js：

说明： 浏览器检查该文件是否存在，若存在则安装并在后台运行。

代码示例（main.js 或内联脚本）：
// 确保在 HTTPS 环境下运行，本地开发可使用 localhost
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('SW registered:', reg))
    .catch(err => console.log('SW registration failed:', err));
}

缓存关键资源

在sw.js中监听install事件，将HTML、CSS、JS、图片等静态资源添加到Cache Storage。

建议做法：

• 定义一个缓存名称和需要缓存的资源列表
• 使用caches.open()创建缓存空间
• 用cache.addAll()批量缓存资源

sw.js 示例代码：
const CACHE_NAME = 'offline-v1';
const ASSETS = [
  '/',
  '/index.html',
  '/style.css',
  '/app.js',
  '/logo.png'
];

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

拦截请求并返回缓存

通过监听fetch事件，判断资源是否已缓存，优先返回缓存内容，否则发起网络请求。

常用策略： 先查缓存，无则走网络，网络失败再回退到备用资源或离线页。

self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request)
      .then(cached => cached || fetch(e.request))
  );
});

增强版逻辑： 对动态资源尝试网络优先，静态资源使用缓存优先。

更新缓存版本

当资源更新时，需升级缓存策略，避免用户一直使用旧版本。

处理方式：

• 修改CACHE_NAME（如改为'offline-v2'）
• 在activate事件中清理旧缓存

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

基本上就这些。Service Worker配合Cache API能有效实现离线访问，适合文档类、展示型站点。注意路径正确、作用域合理，并在浏览器开发者工具中查看缓存状态调试问题。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。