HTML5离线存储与HTML4对比解析

HTML5离线存储的唯一现代标准方案是Service Worker配合Cache API，它能精准控制资源缓存、拦截网络请求、实现优雅降级与后台同步，而早已被全平台弃用的appcache存在不可控更新、静默失败等致命缺陷，HTML4则完全缺乏原生离线能力，仅依赖不可靠的浏览器被动缓存；掌握SW注册时机、缓存策略设计、版本热更新及调试技巧，远比写几行代码更重要——真正决定离线体验成败的，是你对业务场景中“哪些必须离线可用、何时该强制联网、缓存如何智能过期”的深度思考与定制化设计。

HTML5 的离线存储靠 Service Worker + Cache API 实现，appcache 已被废弃；HTML4 完全没有原生离线存储能力。

Service Worker 是当前唯一标准方案

它本质是一个可拦截网络请求的脚本，在页面加载前注册，能缓存资源、控制加载逻辑、支持后台同步。关键点：

• navigator.serviceWorker.register() 必须在 HTTPS（或 localhost）下运行，HTTP 站点会静默失败
• 注册后首次访问不会触发缓存，需刷新一次才生效（因为 SW 在当前页面生命周期外启动）
• 缓存策略需显式编写：比如对 /static/ 下的 JS/CSS 用 cache.addAll() 预加载，对 API 请求用 cache.match() + fetch() 落后更新
• 版本更新靠 self.skipWaiting() + clients.claim() 主动激活新 SW，否则旧缓存长期不更新

/* sw.js */
const CACHE_NAME = 'v1';
self.addEventListener('install', e => {
  e.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll([
        '/',
        '/index.html',
        '/static/app.js',
        '/static/style.css'
      ]))
  );
});
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request)
.then(resp => resp || fetch(e.request))
);
});

appcache 已被所有现代浏览器弃用

HTML5 早期曾用 manifest 文件（.appcache），但存在严重缺陷：

• 整个站点必须全部缓存或全部不缓存，无法按需更新单个资源
• 离线时即使只改一行 CSS，也必须修改 manifest 文件末尾注释才能触发更新
• 缓存失败时静默回退到网络，且无错误回调机制
• Chrome 94+、Firefox 84+、Safari 16.4+ 已完全移除支持，调用 window.applicationCache 会返回 undefined

HTML4 根本没有离线存储机制

HTML4 时代只能依赖浏览器默认缓存（Expires、Cache-Control HTTP 头），但这不是“可控离线”，而是被动缓存，用户关网后刷新页面大概率显示“无法连接”。

• 没有 JS API 可读写本地资源列表
• 无法拦截网络请求做 fallback
• 不能监听网络状态变化并切换策略
• 若强行用 localStorage 存 HTML 字符串再 document.write() 渲染，会丢失样式、脚本执行环境、CSP 限制，且不支持二进制资源（图片、字体）

兼容老项目？别修 appcache，直接升级 SW

如果现有项目还在用 manifest，不要尝试打补丁修复，因为：

• 新浏览器已不解析 manifest 属性，加了也无效
• SW 可渐进增强：先让首页走 SW 缓存，再逐步覆盖其他路由和 API
• 调试时用 Chrome DevTools → Application → Service Workers 面板，勾选 “Update on reload” 和 “Offline” 模拟真实离线场景
• 注意 fetch() 默认不带 cookie，API 请求需加 { credentials: 'include' }，否则登录态丢失

真正麻烦的不是写几行 SW 代码，而是理清哪些资源必须离线可用、哪些该始终联网、缓存过期怎么处理——这些得结合业务路径来设计，不是套个模板就能跑通的。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~