Service Worker 演示

使用Service Worker实现离线访问和资源缓存

网络状态

在线

Service Worker

检查中...

缓存状态

未激活

离线功能演示

此页面使用Service Worker缓存了所有必要资源。您可以尝试以下操作：

测试步骤：

  1. 点击"缓存当前页面"按钮缓存资源
  2. 断开网络连接（关闭Wi-Fi或使用离线模式）
  3. 刷新页面 - 内容仍然可用
  4. 重新连接网络

离线访问

即使没有网络连接，用户仍然可以访问您网站的核心内容

快速加载

缓存的资源直接从本地加载，大幅提升页面加载速度

后台同步

在网络恢复时自动同步数据，提供无缝体验

实现代码示例

注册Service Worker：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('SW 已注册'))
    .catch(err => console.log('SW 注册失败:', err));
}

Service Worker 文件 (sw.js):

const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  'index.html',
  'styles.css',
  'app.js'
];

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

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