离线备用页面
用户离线时提供缓存的备用页面
离线备用页面 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
为什么需要离线页面
网络不可用时，服务工作线程可以提供自定义离线回退页面，而不是显示浏览器通用的“无互联网”错误。用户可以看到品牌信息、有用的内容以及任何已缓存的内容——这比 Chromium 的恐龙图标或 Firefox 的悲伤标签页好得多。
缓存回退页面
在服务工作线程的安装事件中，预缓存 offline.html 页面，使其始终可用，即使用户之前从未在离线状态下访问过任何页面。浏览器会确保缓存一直保留到下一次 sw.js 发生变化。
const CACHE = "v1";
self.addEventListener("install", (e) => {
e.waitUntil(
caches.open(CACHE).then((c) => c.addAll(["/offline.html", "/offline.css", "/logo.svg"]))
);
});失败时提供页面
在获取事件中，先尝试网络；失败时返回缓存的 offline.html。这种模式（网络优先并使用离线回退）是最简单的 PWA 方案，适用于大多数内容网站。
self.addEventListener("fetch", (e) => {
if (e.request.mode !== "navigate") return;
e.respondWith(
fetch(e.request).catch(() => caches.match("/offline.html"))
);
});导航模式检查
仅在导航请求（顶层页面加载）时回退到 offline.html。对于图像、脚本和其他子资源获取，让它们失败，或回退到按资源缓存的副本——用 HTML 页面替代缺失的图像会让页面显示得更糟。
设计离线页面
请保持离线页面轻量：使用最少的 CSS，除非外部资源也已缓存，否则不要使用它们。显示品牌徽标、友好的消息（“您已离线——重新连接后内容将会加载”），以及一个调用 location.reload() 的“重试”按钮。
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Offline</title>
<style>body{font-family:sans-serif;text-align:center;padding:2rem}</style>
</head>
<body>
<h1>You're offline</h1>
<p>This page is unavailable without an internet connection.</p>
<button onclick="location.reload()">Try again</button>
</body>
</html>缓存访问过的页面
除了单个离线页面外，还可以使用陈旧时重新验证或运行时缓存策略，缓存成功加载的页面。即使没有网络，用户返回最近查看过的文章时仍能看到内容；只有未访问过的页面会加载失败。
更新缓存版本
更新 offline.html 时，请更改 sw.js 中的 CACHE 常量（CACHE = "v2"）。在激活事件中，删除旧缓存：caches.keys().then(keys => keys.filter(k => k !== CACHE).forEach(k => caches.delete(k)))。过时的离线页面会造成混淆。
测试离线功能
Chrome DevTools 的网络面板 → “离线”节流模式可以模拟没有网络的情况。在应用中四处导航；验证未访问过的路由会显示离线页面，并确认之前访问过的页面仍能从缓存加载。
子资源加载失败
如果离线页面引用了未缓存的 CSS 文件，该文件会在离线时加载失败，页面也会以无样式的状态呈现。请在安装处理程序中预缓存离线页面所需的每个资源（CSS、徽标、字体）。
超越静态离线功能
高级 PWA 会在离线时使用后台同步将用户操作加入队列，在连接恢复后重试这些操作，并在此期间显示乐观界面。Workbox 库为这些模式提供了现成方案；自行实现也可行，但需要付出更多工作量。
恢复连接
在离线页面上监听在线事件，以检测连接恢复：window.addEventListener("online", () => location.reload())。连接恢复的瞬间，页面会自动重新加载，无需用户点击“重试”。
谨慎保持诚实
“重试”按钮应真正执行重试——调用 location.reload()，而不是显示一个什么也不做的虚假加载指示器。诚实的界面能够维护用户信任；当用户发现离线页面具有欺骗性时，可信度会迅速受损。
知识检查
为什么 offline.html 回退页面只能针对导航请求（e.request.mode === "navigate"）返回，而不能针对所有失败的请求返回？
总结
服务工作线程可以提供自定义离线回退页面，而不是浏览器通用的错误页面。在安装阶段预缓存 offline.html；当网络失败且请求是导航请求时，在获取阶段提供它。保持页面自包含，为更新缓存设置版本，并监听在线事件以自动重新加载。使用 DevTools 的离线节流模式进行测试。
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 40
- 课程
- 159
常见问题解答
「离线备用页面」课时是免费的吗？
是的 — 「离线备用页面」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「离线备用页面」这节课中我会学到什么？
用户离线时提供缓存的备用页面 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「离线备用页面」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。