大白话讲透 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 就像给你的网页请了个万能管家:

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

记住:好管家需要精心培训(代码设计),定期考核(监控调试),才能让你的网页体验丝般顺滑!

相关推荐
刘一说15 小时前
深入理解 Spring Boot 嵌入式 Web 容器:从原理到性能调优
前端·spring boot·firefox
你的人类朋友15 小时前
设计模式的原则有哪些?
前端·后端·设计模式
!执行15 小时前
Web3 前端与合约交互
前端·web3·1024程序员节
潘小安15 小时前
跟着 AI 学(二)- Quill 接入速通
前端
十里-16 小时前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
shada16 小时前
从Google Chrome商店下载CRX文件
前端·chrome
左耳咚16 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
黑云压城After16 小时前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript
芙蓉王真的好116 小时前
NestJS API 提示信息规范:让日志与前端提示保持一致的方法
前端·状态模式
dwedwswd16 小时前
技术速递|从 0 到 1:用 Playwright MCP 搭配 GitHub Copilot 搭建 Web 应用调试环境
前端·github·copilot