大白话讲透 Service Worker：你的网页私人管家

一、Service Worker 是什么？

想象你的网页是个餐厅，Service Worker 就是餐厅里的一位 24小时待命的私人管家，专门帮你处理各种杂事：

离线也能营业：没网络时，他掏出小本本（缓存）帮你继续服务。
暗中加速：提前把常用菜品（资源）备好，客人点单秒上菜。
智能跑腿：网络恢复时，偷偷把积压的订单（请求）发出去。

关键特性：

独立工作，不堵厨房（不阻塞主线程）
只认安全场所（必须 HTTPS 或 localhost）
管家的地盘他说了算（作用域控制）

二、管家的工作流程（生命周期）

1️⃣ 应聘上岗（注册）

c 复制代码

// 餐厅老板（网页）发招聘
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('注册成功！'));
}

2️⃣ 岗前培训（安装）

管家第一时间记下重要物品：

ini 复制代码

const CACHE_NAME = 'v1'; 
const PRE_CACHE_URLS = ['菜单.css', '招牌菜.js', 'Logo.png'];
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => 
      cache.addAll(PRE_CACHE_URLS)
    ).then(() => self.skipWaiting()) // 立刻上岗(激活)
  );
});

3️⃣ 正式接管（激活）

清理前任留下的垃圾：

less 复制代码

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => 
      Promise.all(cacheNames.map(name => {
        if (name !== 'CACHE_NAME') return caches.delete(name); // 清理旧缓存
      }))
    ).then(() => clients.claim()) // 立刻服务所有客人
  );
});

三、实战场景：管家的高光时刻

场景1：餐厅停电也能点单（离线优先）

策略：优先从冰箱（缓存）拿食材

csharp 复制代码

self.addEventListener('fetch', event => {
  event.respondWith(
    // 找食材
    caches.match(event.request)
       // 从冰箱里取 || 去菜市场买
      .then(cachedResponse => cachedResponse || fetchAndCache(event.request))
  );
});

// 去菜市场买
async function fetchAndCache(request) {
  // 新鲜菜
  const networkResponse = await fetch(request);
  const cache = await caches.open(CACHE_NAME);
  // 冰箱里存一份不耽误上菜
  cache.put(request, networkResponse.clone());
  return networkResponse;
}

场景2：外卖订单智能处理（优先网络请求，请求失败用缓存）

策略：优先送最新订单，失败用备用方案

csharp 复制代码

self.addEventListener('fetch', event => {
  if (event.request.url.includes('/api/orders')) {
    event.respondWith(
      // 策略：优先网络请求，失败时使用缓存
      fetch(event.request)
        .then(response => {
          updateCache(event.request, response.clone()); // 更新缓存
          return response;
        })
        .catch(() => caches.match(event.request)) // 失败用缓存
    );
  }
});

// 更新缓存 
function updateCache(request, response) { 
    caches.open(CACHE_NAME)
        .then(cache => cache.put(request, response)); 
}

场景3：偷偷补货不打扰客人（后台同步）

javascript 复制代码

// 客人下单后断网了
navigator.serviceWorker.ready.then(registration => {
  registration.sync.register('sync-orders'); // 贴个待办标签
});

// 网络恢复时管家自动处理
self.addEventListener('sync', event => {
  if (event.tag === 'sync-orders') {
   // 处理积压订单
   event.waitUntil(submitPendingOrders()
    .then(() => console.log('后台同步完成'))
    .catch(err => console.error('同步失败:', err)) );
  }
});

// 提交待处理订单
async function submitPendingOrders() {
  const pendingOrders = await getPendingOrders(); // 获取本地存储的待处理订单
  return Promise.all(
    pendingOrders.map(order => 
      fetch('/api/orders', {
        method: 'POST',
        body: JSON.stringify(order)
      })
    )
  );
}

总结

Service Worker 就像给你的网页请了个万能管家：

离线不停业：缓存策略保底
访问如闪电：资源预加载加速
后台悄悄干：同步数据不发愁

记住：好管家需要精心培训（代码设计），定期考核（监控调试），才能让你的网页体验丝般顺滑！