1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

[ 页面发起资源请求 ]
          │
          ▼
1.【Service Worker 层】（最顶层网络代理拦截）
          │
          ├───► [命中 Cache Storage] ──► 返回 200 (from ServiceWorker)
          │
          └───► [未命中 / 未注册 / SW 内显式执行 fetch()]
                                │
                                ▼
2.【HTTP 强缓存检查】（Cache-Control 优先级高于 Expires）
          │
          ├───► 检查 Cache-Control: no-store ─► [是] ─► 跳过强缓存，直接去发网络
          ├───► 检查 Cache-Control: no-cache ─► [是] ─► 跳过强缓存，强制协商缓存
          │
          ├───► [未过期] ──► 命中强缓存（依据内存/生命周期状态读取）:
          │        │
          │        ├──► Memory 有缓存 (当前 Tab 运行中 / 频繁引用 / 预加载)
          │        │       └──► 返回 200 (from memory cache)
          │        │
          │        └──► Memory 已清空 (Tab关过 / 浏览器重启 / 大文件未进内存)
          │                └──► 从 Disk Cache 读取，并重新加载进 Memory
          │                        └──► 返回 200 (from disk cache)
          │
          └───► [已过期 或 显式要求协商缓存]
                                │
                                ▼
3.【构建协商缓存请求头】（装配条件 Headers）
          │
          ├───► 若存在 ETag          ──► 请求头带上 If-None-Match
          └───► 若存在 Last-Modified ──► 请求头带上 If-Modified-Since
                                │
                                ▼
4.【网络层：CDN 边缘节点校验】（Smart DNS 定位至最近 CDN 节点）
          │
          ├───► CDN 未命中 / 已过期 ──► 向源站（Origin）拉取新资源
          │
          └───► CDN 节点对比条件头:
                   ├─ 资源未改变 ──► 返回 304 Not Modified（不带 Body）
                   └─ 资源已改变 ──► 返回 200 OK（带全新资源与 Header）
                                │
                                ▼
5.【客户端接收与存储更新】
          │
          ├───► 收到 304 ──► 复用 Disk Cache，更新 HTTP Header 缓存标记
          └───► 收到 200 ──► 渲染页面，【双写/落盘】:
                   ├──► 写入 Disk Cache（持久化保存）
                   ├──► 同步载入 Memory Cache（供当前页/近期极速读取）
                   └──► 同步写入 Service Worker Cache Storage（若已启用）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// 1. 检查浏览器是否支持 Service Worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    // 2. 注册根目录下的 sw.js，作用域默认为 '/'
    navigator.serviceWorker.register('/sw.js', { scope: '/' })
      .then((registration) => {
        console.log('Service Worker 注册成功，Scope 为:', registration.scope);
      })
      .catch((error) => {
        console.error('Service Worker 注册失败:', error);
      });
  });
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

// 定义缓存版本和缓存库名称
const CACHE_NAME = 'my-app-v1';

// 预缓存的静态资源列表（App Shell）
const PRE_CACHE_RESOURCES = [
  '/',
  '/index.html',
  '/css/style.css',
  '/js/main.js',
  '/images/logo.png'
];

// ==========================================
// 1. Install 事件：预缓存核心资源
// ==========================================
self.addEventListener('install', (event) => {
  console.log('[SW] 正在安装...');
  
  // event.waitUntil 确保 SW 在缓存完成前不会变为 active 状态
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      console.log('[SW] 正在预缓存静态资源');
      return cache.addAll(PRE_CACHE_RESOURCES);
    }).then(() => {
      // 强制跳过等待期（skipWaiting），让新 SW 安装后立即激活，不用等旧页面关闭
      return self.skipWaiting();
    })
  );
});

// ==========================================
// 2. Activate 事件：清理旧缓存与接管页面
// ==========================================
self.addEventListener('activate', (event) => {
  console.log('[SW] 正在激活...');

  event.waitUntil(
    // 获取所有的缓存 key
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cache) => {
          // 如果不是当前版本的缓存，全部删掉
          if (cache !== CACHE_NAME) {
            console.log('[SW] 删除旧版本缓存:', cache);
            return caches.delete(cache);
          }
        })
      );
    }).then(() => {
      // 强制让 SW 立即接管当前所有打开的页面（Clients）
      return self.clients.claim();
    })
  );
});

// ==========================================
// 3. Fetch 事件：拦截请求（策略：Network First / 优先网络）
// ==========================================
self.addEventListener('fetch', (event) => {
  // 只拦截 GET 请求，Post/Put 等请求不缓存
  if (event.request.method !== 'GET') return;

  event.respondWith(
    // 先尝试发网络请求
    fetch(event.request)
      .then((networkResponse) => {
        // 如果网络正常，且响应有效，克隆一份响应存进 Cache Storage
        if (networkResponse && networkResponse.status === 200) {
          const responseToCache = networkResponse.clone();
          caches.open(CACHE_NAME).then((cache) => {
            cache.put(event.request, responseToCache);
          });
        }
        return networkResponse;
      })
      .catch(() => {
        // 网络失败（断网/服务器挂了），降级从 Cache Storage 里找缓存
        console.log('[SW] 网络离线，尝试从 Cache 读取:', event.request.url);
        return caches.match(event.request);
      })
  );
});

1
2
3

caches.match(event.request).then((cachedResponse) => {
  return cachedResponse || fetch(event.request);
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

caches.open(CACHE_NAME).then((cache) => {
  return cache.match(event.request).then((cachedResponse) => {
    // 后台异步去发网络请求更新缓存
    const fetchPromise = fetch(event.request).then((networkResponse) => {
      cache.put(event.request, networkResponse.clone());
      return networkResponse;
    });
    // 如果有本地缓存优先用本地，没有就等网络请求
    return cachedResponse || fetchPromise;
  });
});