SW映射文件怎么设置

Service Worker（简称 SW）是现代 Web 应用实现离线功能、资源缓存和网络请求拦截的核心技术。正确设置 SW 的映射规则，是构建高性能 PWA（渐进式 Web 应用）的关键一步。

什么是 SW 映射文件？

SW 本身并不直接使用“映射文件”这一概念，但开发者通常通过在 Service Worker 脚本中定义缓存策略和路由规则，来实现类似“映射”的效果。例如：将特定 URL 请求映射到缓存中的资源，或重定向到备用页面。

基本设置步骤

1. 注册 Service Worker：在主页面中注册 SW 脚本。
2. 监听 fetch 事件：在 SW 中拦截网络请求。
3. 定义缓存策略：根据 URL 路径决定使用缓存还是网络。
4. 预缓存关键资源：在 install 阶段缓存 HTML、CSS、JS 等静态文件。

示例代码

// sw.js
const CACHE_NAME = 'v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles/main.css',
  '/scripts/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) => {
        return response || fetch(event.request);
      })
  );
});

通过上述代码，你可以将指定路径“映射”到缓存资源。如需更复杂的映射逻辑（如正则匹配、动态路由），可结合 URL 对象或第三方库（如 Workbox）实现。

注意事项

• SW 只能在 HTTPS 或 localhost 环境下运行。
• 缓存策略应考虑版本更新，避免用户长期使用旧资源。
• 建议使用 Workbox 简化复杂映射逻辑。