无需登录 数据私有 本地保存

自定义离线页面 - 网络断开时展示友好提示

12
0
0
0
✅ 已复制到剪贴板
自定义离线页面

调整参数，实时预览效果

实时预览
your-website.com/offline
使用指南 & 常见问题
🚀 如何使用生成的离线页面？
1

自定义外观

调整颜色和文字

2

下载文件

保存为offline.html

3

部署到网站

放入网站根目录

4

配置SW

Service Worker缓存

❓ 常见问题 (FAQ)

离线页面（Offline Fallback Page）是当用户访问网站但网络连接断开时显示的友好提示页面。它替代了浏览器默认的"无法连接"错误页面，提供更友好的用户体验。离线页面是PWA（渐进式Web应用）的核心功能之一，通过Service Worker技术实现。它让用户在断网时仍能看到品牌化的内容，而不是冷冰冰的系统错误提示。

离线页面依赖Service Worker和Cache API工作：

  1. 注册阶段：网站注册一个Service Worker脚本
  2. 安装阶段：Service Worker在安装时预缓存离线页面文件
  3. 拦截请求：当浏览器发起网络请求时，Service Worker的fetch事件拦截该请求
  4. 回退机制：如果网络请求失败（离线），Service Worker从缓存中返回离线页面

这样用户即使在断网情况下也能看到友好的提示页面，而不是浏览器的默认错误页。

步骤：

  1. 使用本工具生成离线页面并下载HTML文件
  2. 将文件重命名为offline.html并放入网站根目录
  3. 在Service Worker的install事件中预缓存该文件
  4. 在fetch事件的catch分支中返回该缓存文件

示例代码：

const OFFLINE_URL = '/offline.html'; self.addEventListener('install', (event) => { event.waitUntil( caches.open('offline-v1').then(cache => cache.add(OFFLINE_URL)) ); }); self.addEventListener('fetch', (event) => { event.respondWith( fetch(event.request).catch(() => caches.match(OFFLINE_URL)) ); });

404页面是服务器返回的HTTP 404状态码页面，表示请求的资源不存在（页面被删除、URL错误等），此时网络是正常的。
离线页面是网络断开时展示的页面，资源本身可能存在，但由于没有网络连接而无法访问。离线页面通常由Service Worker在客户端本地缓存中提供，不经过服务器。两者触发条件完全不同。

  • 品牌一致性：自定义页面保持品牌视觉风格，增强用户信任感
  • 更好的用户体验：提供友好的提示和操作引导，减少用户焦虑
  • 降低跳出率：告诉用户这是暂时性问题，鼓励他们稍后重试
  • 提供解决方案：可以包含重试按钮、返回首页链接等实用功能
  • 差异化竞争：精心设计的离线页面体现产品对细节的关注

生成的离线页面使用Navigator.onLine API和online/offline事件来检测网络状态。当设备重新连接到网络时，window.addEventListener('online', ...)事件被触发，页面可以自动刷新或提示用户刷新。需要注意的是，navigator.onLine表示设备是否连接到网络（有IP地址），但不一定100%保证互联网可达性。对于绝大多数场景，这个检测机制足够可靠。

一个优秀的离线页面应包含：
  • 🎯 清晰的图标/插图——直观传达"离线"状态
  • 📝 友好的标题——告知用户当前状况
  • 💬 简短描述——解释原因并提供建议
  • 🔘 重试按钮——让用户手动刷新尝试重连
  • 🏠 返回首页链接——提供备选导航
  • ⚡ 自动检测脚本——网络恢复时自动刷新

生成的离线页面采用响应式设计，使用flexbox居中布局和相对单位，确保在手机、平板和桌面设备上都能完美显示。包含viewport meta标签，图标和文字大小会根据屏幕宽度自动适配。在移动端，页面元素会适当缩小并保持良好的触摸交互区域。

离线页面本身不会直接影响SEO，因为它仅在网络断开时由Service Worker提供，搜索引擎爬虫通常不会看到它。但良好的离线体验可以间接提升SEO：降低跳出率、提升用户停留时间、增强用户回访意愿——这些都是搜索引擎评估网站质量的重要信号。此外，PWA功能（包括离线支持）是Google推荐的最佳实践。

  • ✅ 离线页面文件尽量轻量（建议小于50KB），减少缓存占用
  • ✅ 在Service Worker install阶段预缓存，确保首次离线即可用
  • ✅ 使用Cache-first策略预缓存关键资源，Network-first策略配合离线回退
  • ✅ 提供自动重连机制，网络恢复时无缝切换
  • ✅ 保持离线页面与品牌视觉一致
  • ✅ 定期更新Service Worker版本，确保离线页面内容保持最新
  • ✅ 测试各种离线场景：飞行模式、弱网、服务器宕机等

测试方法：

  1. 打开Chrome DevTools → Application → Service Workers，勾选Offline复选框模拟离线
  2. 在浏览器中启用飞行模式后访问网站
  3. 使用Chrome DevTools的Network面板，选择Offline throttling
  4. 在Service Worker的fetch事件中添加日志，确认离线页面被正确返回
  5. 使用Lighthouse审计工具检查PWA离线功能评分
🔧 相关工具