编辑“︁HTML离线应用”︁（章节）

== 技术实现 ==

=== 1. 应用程序缓存（AppCache） ===
虽然逐渐被Service Worker取代，但了解AppCache仍有其历史意义。它通过一个清单文件（manifest）定义需要缓存的资源。

==== 示例：AppCache清单文件 ====
创建一个名为`manifest.appcache`的文件：
<syntaxhighlight lang="text">
CACHE MANIFEST
# 版本 1.0

CACHE:
index.html
styles/main.css
scripts/app.js
images/logo.png

NETWORK:
api/

FALLBACK:
/offline.html
</syntaxhighlight>

然后在HTML文件中引用：
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
    <title>离线应用示例</title>
</head>
<body>
    <h1>欢迎使用离线应用</h1>
</body>
</html>
</syntaxhighlight>

==== 工作原理 ====
* **CACHE**：列出需要缓存的资源。
* **NETWORK**：指定必须在线访问的资源（如API端点）。
* **FALLBACK**：定义当资源不可用时显示的备用页面。

=== 2. Service Worker ===
Service Worker是一种运行在浏览器后台的脚本，独立于网页，可以拦截网络请求、缓存资源并管理离线体验。

==== 注册Service Worker ====
<syntaxhighlight lang="javascript">
// 主线程（如index.html）
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
        .then(registration => {
            console.log('ServiceWorker 注册成功:', registration.scope);
        })
        .catch(error => {
            console.log('ServiceWorker 注册失败:', error);
        });
}
</syntaxhighlight>

==== Service Worker脚本示例（sw.js） ====
<syntaxhighlight lang="javascript">
const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
    '/',
    '/styles/main.css',
    '/scripts/app.js',
    '/images/logo.png'
];

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => {
                return cache.addAll(urlsToCache);
            })
    );
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                if (response) {
                    return response; // 返回缓存内容
                }
                return fetch(event.request); // 否则发起网络请求
            })
    );
});
</syntaxhighlight>

==== 缓存策略对比 ===
<mermaid>
flowchart TD
    A[用户请求资源] --> B{资源是否在缓存中?}
    B -->|是| C[返回缓存内容]
    B -->|否| D[发起网络请求]
    D --> E{请求成功?}
    E -->|是| F[缓存并返回内容]
    E -->|否| G[返回备用内容或错误]
</mermaid>