SW映射文件制作指南

什么是 SW 映射文件？

SW（Service Worker）映射文件通常指用于定义缓存策略的 JavaScript 文件，它通过拦截网络请求并返回缓存资源，实现网页的离线访问、资源预加载和性能优化。

基本结构示例

以下是一个简单的 sw.js 文件内容：

// sw.js
const CACHE_NAME = 'my-site-cache-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))
  );
});

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

使用步骤

1. 创建 sw.js 文件并部署到网站根目录。
2. 在主页面（如 index.html）中注册 Service Worker：

// 在 HTML 的 <script> 标签中
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('SW 注册成功:', reg))
      .catch(err => console.log('SW 注册失败:', err));
  });
}

注意事项

• SW 文件必须通过 HTTPS 提供（本地 localhost 除外）。
• 缓存策略应根据业务需求定制，避免缓存过期内容。
• 更新 SW 文件后需触发更新机制（如版本号变更）。