SW映射文件怎么制作

SW（Service Worker）映射文件是实现网站离线功能、资源预缓存和网络请求拦截的关键技术之一，广泛应用于 PWA（渐进式 Web 应用）开发中。本文将带你从零开始制作一个 SW 映射文件。

什么是 Service Worker？

Service Worker 是一种运行在浏览器后台的脚本，独立于网页主线程，可用于拦截网络请求、管理缓存、推送通知等。它必须通过 HTTPS（或 localhost）加载。

SW 映射文件的基本结构

通常，SW 映射文件是一个名为 sw.js 的 JavaScript 文件，内容如下：

// 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. 注册 Service Worker：在主页面（如 index.html）中添加注册代码：

// 在 index.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));
  });
}

• 3. 配置要缓存的资源路径：根据实际项目调整 urlsToCache 数组。
• 4. 测试与调试：使用 Chrome DevTools 的 Application → Service Workers 面板进行测试。

注意事项

• Service Worker 只能在 HTTPS 或本地开发环境（localhost）下运行。
• 缓存策略应根据业务需求选择（如 Cache First、Network First 等）。
• 更新 SW 文件后，需触发更新机制（如版本号变更）才能生效。