SW映射文件怎么设置

Service Worker（简称 SW）是现代 Web 应用实现离线功能、推送通知和后台同步的核心技术之一。正确设置 SW 映射文件（即注册并配置 Service Worker）对构建 PWA（渐进式 Web 应用）至关重要。

1. 注册 Service Worker

首先，在主页面（如 index.html）中注册 Service Worker：

// 检查浏览器是否支持 Service Worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('SW 注册成功:', registration);
      })
      .catch(error => {
        console.log('SW 注册失败:', error);
      });
  });
}

2. 创建 sw.js 文件

在网站根目录下创建 sw.js 文件，这是 SW 的核心逻辑文件。一个最简单的示例：

// sw.js
const CACHE_NAME = 'v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/scripts/app.js',
  '/index.html'
];

// 安装阶段：缓存资源
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))
  );
});

3. 注意事项

• SW 文件必须通过 HTTPS 提供（本地 localhost 除外）。
• SW 的作用域默认为其所在目录，可通过 { scope: './' } 在注册时指定。
• 更新 SW 后需刷新页面或手动触发更新逻辑。

4. 常见问题

Q：SW 映射不生效？
A：检查控制台是否有错误；确保路径正确且服务器返回正确的 MIME 类型（应为 application/javascript）。

Q：如何调试 SW？
A：使用 Chrome DevTools 的 Application → Service Workers 面板进行调试和强制刷新。