前端每日一学：Service Worker —— 打造离线可用的 PWA 应用

场景

你需要实现 离线访问、资源缓存 或 后台同步 功能，提升 Web 应用的可靠性和用户体验。

---

一、核心概念

1. 什么是 Service Worker？

• 浏览器在后台运行的 独立线程，可拦截网络请求
• 生命周期：独立于页面，可控制多个页面
• 要求 HTTPS：生产环境需 HTTPS，本地开发支持 localhost

2. 核心能力

• 缓存管理：预缓存关键资源
• 离线支持：无网络时返回缓存内容
• 推送通知：后台消息推送
• 后台同步：网络恢复后提交数据

---

二、实战代码示例

步骤 1：注册 Service Worker

// 主线程代码（如 main.js）
if ('serviceWorker' in navigator) {
   
  window.addEventListener('load', () => {
   
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
   
        console.log('SW 注册成功:', registration.scope);
      })
      .catch(err => {
   
        console.log('SW 注册失败:', err);
      });
  });
}

步骤 2：编写 Service Worker 文件（sw.js）

const CACHE_NAME = 'v1';
const PRECACHE_URLS = [
  '/',
  '/index.html',
  '/styles.css',
  '/app.js'
];

// 安装阶段：预缓存关键资源
self.addEventListener</