HTML5离线缓存详解及基本原理

来源：喔唷网编辑：喔唷教程时间：2025-04-02 浏览：

本片文章主要讲解HTML5的离线缓存技术和HTML5离线缓存的基本原理。HTML5 的离线缓存（Application Cache 或 AppCache）允许 web 应用在用户离线时仍可访问，通过缓存必要的资源文件实现离线功

HTML5 离线缓存（Application Cache）详解

HTML5 的离线缓存（Application Cache 或 AppCache）允许 web 应用在用户离线时仍可访问，通过缓存必要的资源文件实现离线功能。虽然现代开发中已逐渐被 Service Worker 取代，但了解其原理仍有价值。

基本原理

缓存清单文件：通过一个清单文件(.appcache)指定需要缓存的资源
浏览器缓存：浏览器会根据清单下载并缓存指定资源
离线访问：当网络不可用时，浏览器会使用缓存资源加载应用

实现步骤

1. 创建缓存清单文件

示例 manifest.appcache 文件内容：

CACHE MANIFEST
# v1.0.0 - 2019-01-01
# 注释以#开头，版本号更新会触发缓存更新

CACHE:
# 需要缓存的资源
/css/style.css
/js/app.js
/images/logo.png
/index.html

NETWORK:
# 需要在线访问的资源（可使用通配符*）
/api/

FALLBACK:
# 离线时的替代资源
/offline.html
/images/ /offline-image.png

2. 在HTML中关联清单文件

<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
    <title>离线应用</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <!-- 页面内容 -->
    <script src="/js/app.js"></script>
</body>
</html>

缓存更新机制

清单文件变化：浏览器只检查清单文件是否变化（即使注释更改也会触发更新）
手动更新：通过 JavaScript 强制更新：

window.applicationCache.update();

更新流程：浏览器下载新清单对比新旧清单，下载新增或有变化的资源新资源下载完成后不会立即使用，直到下次页面加载

JavaScript API

var appCache = window.applicationCache;

appCache.addEventListener('checking', function() {
    console.log('正在检查清单更新');
});

appCache.addEventListener('noupdate', function() {
    console.log('没有发现更新');
});

appCache.addEventListener('downloading', function() {
    console.log('开始下载缓存资源');
});

appCache.addEventListener('progress', function(e) {
    console.log('下载进度: ' + e.loaded + '/' + e.total);
});

appCache.addEventListener('cached', function() {
    console.log('应用已完全缓存');
});

appCache.addEventListener('updateready', function() {
    if (confirm('新版本已下载，是否立即更新？')) {
        appCache.swapCache();  // 交换新旧缓存
        location.reload();     // 重新加载页面
    }
});

appCache.addEventListener('error', function(e) {
    console.error('缓存错误:', e);
});

注意事项

已被废弃：AppCache 已被 W3C 标记为废弃，推荐使用 Service Worker
清单文件MIME类型：服务器必须正确配置 .appcache 文件的 MIME 类型为 text/cache-manifest
缓存限制：不同浏览器有不同的大小限制（通常5MB左右）
更新延迟：更新后的资源需要刷新页面才能生效
白名单问题：NETWORK 节中的资源必须明确列出，否则会被阻止

替代方案：Service Worker

现代Web开发中，更推荐使用Service Worker实现离线功能：

// 注册Service Worker
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
        .then(registration => {
            console.log('ServiceWorker注册成功');
        });
}

// sw.js示例
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open('v1').then(cache => {
            return cache.addAll([
                '/',
                '/index.html',
                '/css/style.css',
                '/js/app.js'
            ]);
        })
    );
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(response => {
            return response || fetch(event.request);
        })
    );
});

虽然APPcache正在被淘汰，但在某些简单场景或需要支持老旧浏览器时，仍可作为一种简单的离线解决方案。