1. 离线优先应用架构概览：Service Worker、IndexedDB、Cache API、本地优先同步模式

1.1 本章定位与学习目标

本章是《离线优先应用集成测试方法》课程的起点，旨在建立对离线优先应用四大核心支柱——Service Worker、IndexedDB、Cache API 和本地优先同步模式——的全局认知。学完本章后，你将能够：

• 描述离线优先架构的四种核心组件及其职责边界；
• 绘制四者之间的协作流程图与数据流向；
• 识别集成测试中需要重点覆盖的交互点与风险区域。

1.2 离线优先架构的核心问题

传统 Web 应用依赖持续的网络连接：请求→服务器响应→渲染。离线优先架构将这一顺序反转——本地是主数据源，网络是同步通道。这意味着四个关键技术必须协同工作：

1. Service Worker —— 网络代理与离线资源管控层；
2. Cache API —— 静态资源与响应缓存层；
3. IndexedDB —— 结构化数据持久化层；
4. 本地优先同步模式 —— 数据冲突解决与双向同步策略层。

下表列出各组件在架构中的核心职责与测试关注点：

1.3 架构协作流程：一张图理解四者关系

1.4 各组件实现原理与关键 API

1.4.1 Service Worker 的生命周期与拦截原理

Service Worker 是一个独立于主线程的 JavaScript 运行环境，通过 install → activate → fetch 事件驱动。其核心 API 如下：

// 注册 Service Worker
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
        .then(reg => console.log('SW 注册成功:', reg.scope))
        .catch(err => console.error('SW 注册失败:', err));
}

// sw.js — 安装阶段预缓存
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open('v1').then(cache => {
            return cache.addAll([
                '/',
                '/index.html',
                '/styles.css',
                '/app.js'
            ]);
        })
    );
});

// sw.js — 请求拦截与缓存策略
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(cachedResponse => {
            return cachedResponse || fetch(event.request)
                .then(response => {
                    return caches.open('v1').then(cache => {
                        cache.put(event.request, response.clone());
                        return response;
                    });
                });
        })
    );
});

1.4.2 Cache API 的版本管理与过期策略

Cache API 使用 caches.open(name) 创建或打开命名缓存。旧版本清理是集成测试中容易遗漏的环节：

// sw.js — activate 阶段清理旧缓存
self.addEventListener('activate', event => {
    const expectedCacheNames = ['v1'];
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames
                    .filter(name => !expectedCacheNames.includes(name))
                    .map(name => caches.delete(name))
            );
        })
    );
});

1.4.3 IndexedDB 的事务模型与索引

IndexedDB 使用对象存储（Object Store）和索引（Index）实现高效查询。所有读写操作都必须包裹在事务中：

// 打开/创建数据库
const request = indexedDB.open('OfflineAppDB', 2);

request.onupgradeneeded = event => {
    const db = event.target.result;
    // 创建对象存储
    if (!db.objectStoreNames.contains('tasks')) {
        const store = db.createObjectStore('tasks', {
            keyPath: 'id',
            autoIncrement: true
        });
        // 创建索引
        store.createIndex('status', 'status', { unique: false });
        store.createIndex('createdAt', 'createdAt', { unique: false });
    }
};

// 写入事务
function saveTask(task) {
    return new Promise((resolve, reject) => {
        const db = /* 从全局引用获取 */;
        const tx = db.transaction('tasks', 'readwrite');
        const store = tx.objectStore('tasks');
        const req = store.put(task);
        req.onsuccess = () => resolve(req.result);
        req.onerror = () => reject(req.error);
    });
}

1.4.4 本地优先同步模式的核心接口

同步模式通常封装为 SyncManager 类，它依赖 Service Worker 的 SyncEvent：

// 在主线程注册同步任务
navigator.serviceWorker.ready.then(registration => {
    registration.sync.register('sync-tasks').then(() => {
        console.log('后台同步已注册');
    });
});

// sw.js — 处理同步事件
self.addEventListener('sync', event => {
    if (event.tag === 'sync-tasks') {
        event.waitUntil(syncPendingTasks());
    }
});

async function syncPendingTasks() {
    const db = await openDB();
    const tx = db.transaction('tasks', 'readonly');
    const store = tx.objectStore('tasks');
    const pending = await store.getAll(); // 筛选待同步项
    for (const task of pending) {
        try {
            await fetch('/api/tasks', {
                method: 'POST',
                body: JSON.stringify(task),
                headers: { 'Content-Type': 'application/json' }
            });
            // 同步成功后更新本地状态
            task.synced = true;
            await updateTaskInDB(task);
        } catch (err) {
            console.error('同步失败，保留在队列中:', task.id, err);
        }
    }
}

1.5 集成测试的关键交互点

下图列出了四组件之间必须通过集成测试覆盖的 9 个交互点，按照数据流向分为三个层级：

1.6 常见错误与稳定性优化

1.6.1 高频错误清单

• SW 注册作用域错误： SW 文件路径决定了其作用域，register('/sw.js') 作用域为根目录，register('sw.js') 作用域为当前目录。
• Cache API 的 addAll 原子性失败： 只要有一个资源请求失败，整个 addAll 就会拒绝，导致预缓存全部失效。
• IndexedDB 版本号冲突： 多个选项卡同时打开时，onupgradeneeded 可能被并发触发，导致模式迁移冲突。
• 同步队列幂等性缺失： 重复同步同一变更导致服务端数据重复或状态错乱。

1.6.2 性能与稳定性优化策略

1.7 调试与验证方法

在进入后续章节前，掌握以下调试手段有助于快速定位问题：

1. Chrome DevTools → Application 面板： 查看 SW 状态、Cache Storage 内容、IndexedDB 数据、Storage 配额。
2. Network 面板结合 Offline 模式： 勾选“Offline”，验证离线页面是否正常加载，SW 是否返回缓存内容。
3. navigator.storage.estimate()： 监控存储使用量，避免超出配额导致写入失败。
4. Service Worker 内部日志： 在 SW 代码中使用 console.log，在 DevTools 的 Console 面板勾选“Service Workers”过滤查看。

// 在 sw.js 中添加调试日志
self.addEventListener('fetch', event => {
    console.log('[SW Fetch]', event.request.method, event.request.url);
    event.respondWith(
        caches.match(event.request).then(cached => {
            console.log('[SW Cache] 命中?', !!cached);
            return cached || fetch(event.request);
        })
    );
});

1.8 课后自检清单

在进入第 2 章之前，请确保你已掌握以下知识点：

• ✅ 能口头解释 Service Worker 的 install → activate → fetch 生命周期；
• ✅ 知道 Cache API 与 IndexedDB 的存储目标差异；
• ✅ 理解本地优先同步模式中“本地是主数据源”的含义；
• ✅ 能列举至少 3 个组件交界处可能出现的集成故障；
• ✅ 掌握使用 DevTools Application 面板验证离线缓存的基本操作。