HTML5离线应用的核心组成与目标
离线能力的三大支柱
要实现HTML5离线应用，需要把握三个核心支柱：Manifest文件、Service Worker与Cache API的协同工作。只有三者形成闭环，用户在离线状态下也能访问关键页面与资源。
Manifest文件提供应用的外观信息、启动页和图标等元数据，但它本身不具备离线缓存能力，更多的是让应用具备“可安装、可分离”的特性。真正的离线缓存需要通过 Service Worker 来实现资源的缓存与离线回退。
在设计离线体验时，缓存策略的设计高度影响页面加载速度与网络容错能力。合理的预缓存和动态缓存组合，是提升离线体验的关键要点。
{"name": "离线应用示例","short_name": "离线示例","start_url": "./index.html","display": "standalone","background_color": "#ffffff","theme_color": "#4a90e2","icons": [{"src": "icons/192.png", "sizes": "192x192", "type": "image/png"},{"src": "icons/512.png", "sizes": "512x512", "type": "image/png"}]
}从Manifest文件到离线能力的定位
Web App Manifest的作用与结构
Web App Manifest（manifest.json）是实现渐进式网络应用（PWA）离线能力的前提之一，包含应用名称、起始页、显示模式和图标等信息，帮助浏览器将应用立刻转换成“可安装”的体验。
然而，单独的 manifest.json 并不能缓存应用资源，离线缓存仍需借助Service Worker完成。因此，在离线策略设计中，Manifest更多地负责“安装后首屏的呈现配置”而非缓存实现细节。
要把 manifest.json 应用到网页中，通常在 HTML 的头部加入 <link rel="manifest" href="/manifest.json">，以便浏览器在首次访问时读取元数据并准备离线能力的后续步骤。
{"name": "离线应用示例","short_name": "离线示例","start_url": "/index.html","display": "standalone","icons": [{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }]
}离线缓存的核心机制：Service Worker与Cache API
Service Worker的工作流程
Service Worker是运行在浏览器后台的脚本，与网页生命周期相互独立，能够拦截网络请求并实现自定义缓存策略。通过 install、activate、fetch事件，它在离线场景下提供资源回退与离线页面。
在安装阶段，通常进行预缓存将核心资源保存到缓存中，以确保首次离线时仍可加载关键页面。在线上环境，开发者还会实现动态缓存，以应对新请求的资源。
通过对 Cache API 的使用，Service Worker 可以把不同资源分开缓存、过期清理，并在离线时快速命中缓存，从而提升离线访问速度与可靠性。
// sw.js
const CACHE_NAME = 'offline-v1';
const urlsToCache = ['/','/index.html','/styles.css','/script.js','/offline.html'
];self.addEventListener('install', event => {event.waitUntil(caches.open(CACHE_NAME).then(cache => cache.addAll(urlsToCache)));
});在 fetch 阶段，服务工作者会优先从缓存中读取资源，若缓存未命中再发出网络请求，甚至在网络失败时提供离线兜底页面。
self.addEventListener('fetch', event => {event.respondWith(caches.match(event.request).then(response => {return response || fetch(event.request);}).catch(() => caches.match('/offline.html')));
});离线策略设计：预缓存 vs 运行时缓存
缓存策略的实战选择
在离线应用中，常见的缓存策略包括预缓存（Cache on Install）、运行时缓存（Runtime Cache）以及混合策略。预缓存适合确定的静态资源，运行时缓存则应对动态请求和更新资源。
离线优先策略适用于对可用性要求极高的场景，优先从缓存读取，再备份网络；而网络波动较大时，网络优先策略可确保数据的新鲜度，但在离线时需要回退路径。
一个实际可行的方案是：在 install 事件中对核心页面和静态资源进行充分预缓存，同时在 fetch 事件中使用缓存优先策略，并为动态请求设定合理的缓存失效策略。
// sw.js 中的缓存策略示例
self.addEventListener('fetch', event => {event.respondWith(caches.match(event.request).then(function (response) {// 缓存命中时直接返回if (response) return response;// 缓存未命中，尝试网络请求return fetch(event.request).then(function (networkResponse) {// 将新资源缓存起来return caches.open(CACHE_NAME).then(function (cache) {cache.put(event.request, networkResponse.clone());return networkResponse;});}).catch(function () {// 网络请求失败，返回离线兜底资源（如 offline.html）return caches.match('/offline.html');});}));
});实战落地：从Manifest到离线缓存的实战要点
完整步骤清单
要把<HTML5离线应用落地，需要遵循清晰的实现步骤：创建 manifest.json、在页面中引入 manifest、注册 Service Worker、在 sw.js 实现 install/activate/fetch 事件与缓存策略，并确保核心资源实现预缓存。
在实际项目中，先确定离线场景的边界占用：哪些页面需要离线、哪些静态资源需要强缓存、以及离线时应提供的兜底页面。随后将资源加入预缓存清单，并实现动态缓存以覆盖新请求。
挑战通常来自资源版本更新、缓存清理与离线页面的一致性，因此需要定期更新缓存名称（如 offline-v2），并在 activate 事件中清理旧缓存以释放存储空间。
// main.js：注册 Service Worker
if ('serviceWorker' in navigator) {window.addEventListener('load', function() {navigator.serviceWorker.register('/sw.js').then(function(reg) {console.log('ServiceWorker registered with scope:', reg.scope);}).catch(function(error) {console.log('ServiceWorker registration failed:', error);});});
}// sw.js：安装、激活与缓存清理的完整示例
const CACHE_NAME = 'offline-v2';
const urlsToCache = ['/','/index.html','/styles.css','/script.js','/offline.html'
];self.addEventListener('install', event => {event.waitUntil(caches.open(CACHE_NAME).then(cache => cache.addAll(urlsToCache)));
});self.addEventListener('activate', event => {const validCacheSet = new Set([CACHE_NAME]);event.waitUntil(caches.keys().then(cacheNames => Promise.all(cacheNames.map(cacheName => {if (!validCacheSet.has(cacheName)) {return caches.delete(cacheName);}}))));
});self.addEventListener('fetch', event => {event.respondWith(caches.match(event.request).then(function (response) {return response || fetch(event.request);}).catch(function () {return caches.match('/offline.html');}));
});