HTML 离线应用：让网页在无网络时也能使用

2025-12-23 8538阅读

在当今数字化时代，网络连接无处不在，但偶尔也会遇到网络不佳或无网络的情况。这时，HTML 离线应用就派上了用场，它能让网页在离线状态下继续提供服务。

什么是 HTML 离线应用

HTML 离线应用是指通过特定技术，使网页在用户设备上缓存必要的资源（如 HTML、CSS、JavaScript 文件、图片等），从而在没有网络连接时也能正常访问和使用。

实现 HTML 离线应用的关键技术

应用缓存（AppCache）

曾经常用的一种方式是应用缓存。通过在 HTML 文件中添加 manifest 属性来指定缓存清单文件。

<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
    <title>离线应用示例</title>
</head>
<body>
    <h1>欢迎来到离线应用</h1>
</body>
</html>

然后创建 cache.manifest 文件：

CACHE MANIFEST
# 版本号（用于更新缓存）
#v1.0

# 缓存的文件
CACHE:
index.html
styles.css
script.js
image.jpg

# 网络白名单（需要网络才能访问的资源）
NETWORK:
/api/*

# 离线时的回退页面
FALLBACK:
/ /offline.html

但应用缓存已逐渐被弃用，因为它存在一些局限性，如更新机制不够灵活等。

Service Workers

Service Workers 是一种更现代、强大的技术。它是运行在浏览器后台的脚本，可拦截网络请求、缓存资源等。首先，注册 Service Worker：

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('sw.js')
        .then(function(registration) {
            console.log('ServiceWorker 注册成功:', registration);
        })
       .catch(function(err) {
            console.log('ServiceWorker 注册失败:', err);
        });
    });
}

然后在 sw.js 中编写缓存逻辑：

// 安装事件，缓存资源
self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('my-cache')
       .then(function(cache) {
            return cache.addAll([
                '/',
                '/index.html',
                '/styles.css',
                '/script.js',
                '/image.jpg'
            ]);
        })
    );
});

// 拦截 fetch 请求
self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request)
       .then(function(response) {
            if (response) {
                return response;
            }
            return fetch(event.request);
        })
    );
});

Service Workers 还支持推送通知、后台同步等功能，进一步提升了离线应用的体验。