- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

H5 离线页面（Offline Fallback）实现

William 发表于 2025/09/02 09:37:23 2025/09/02

【摘要】 1. 引言在移动互联网时代，用户对Web应用的“随时可用”需求愈发强烈——无论是在地铁隧道、地下停车场，还是偏远山区，用户都期望Web应用能像原生APP一样，在无网络环境下依然提供基础功能（如查看已加载的内容、显示友好提示）。然而，传统H5页面完全依赖实时网络请求，一旦断网便会陷入“白屏”或“加载失败”的尴尬境地，严重影响用户体验。离线页面（Offline Fallback）...

1. 引言

在移动互联网时代，用户对Web应用的“随时可用”需求愈发强烈——无论是在地铁隧道、地下停车场，还是偏远山区，用户都期望Web应用能像原生APP一样，在无网络环境下依然提供基础功能（如查看已加载的内容、显示友好提示）。然而，传统H5页面完全依赖实时网络请求，一旦断网便会陷入“白屏”或“加载失败”的尴尬境地，严重影响用户体验。

离线页面（Offline Fallback） 是解决这一问题的关键技术：当用户处于离线状态时，Web应用通过预定义的机制（如Service Worker拦截请求、返回本地缓存的备用页面），向用户展示一个设计友好的离线提示页（如“当前网络不可用，请检查连接后重试”），而非冰冷的错误信息。这不仅提升了用户体验的连续性，更在关键时刻（如表单填写、内容浏览）避免了用户流失。

本文将深入探讨H5离线页面的核心实现方案（基于Service Worker与Cache API），解析其技术原理、应用场景及实践细节，并通过具体代码示例展示如何为不同类型的Web应用（如新闻站、电商页、企业后台）构建可靠的离线体验。

2. 技术背景

2.1 为什么需要离线页面？

网络环境的不确定性：移动网络覆盖不全（如电梯、地下室）、Wi-Fi临时断开、用户主动关闭网络等情况频繁发生，导致Web请求失败。
用户体验的连续性需求：用户不希望因短暂断网而被迫中断操作（如填写一半的表单丢失），或看到生硬的错误提示（如“404 Not Found”）。
内容价值的延续性：对于已加载的内容（如新闻列表、商品详情），用户期望在断网时仍能浏览，而非重新联网后才能查看。
商业目标的保障：电商类应用需避免因离线导致购物车数据丢失或订单提交失败；内容类应用需维持用户活跃度（如离线时仍可阅读已缓存的文章）。

2.2 核心概念

概念	说明	类比
离线页面（Offline Fallback）	当网络请求失败（如断网、服务器宕机）时，通过Service Worker拦截请求并返回一个预先设计的备用页面（如提示用户检查网络），而非显示浏览器默认错误页。	类似“应急方案”——网络不通时，展示一个友好的“备用通道”。
Service Worker	运行在浏览器后台的脚本，作为网络请求的“代理”，可拦截所有HTTP/HTTPS请求，根据策略（如缓存优先、网络优先）决定返回缓存内容或网络响应。	类似“网络交通警察”——指挥请求走缓存还是网络。
Cache API	浏览器提供的本地存储接口，用于存储HTTP响应（如HTML页面、JSON数据），Service Worker可通过它缓存备用页面，在离线时快速返回。	类似“本地仓库”——提前存放备用资源，紧急时直接取用。
Fallback规则	在Service Worker的 `fetch` 事件中，当网络请求失败时，通过 `caches.match()` 查询预定义的备用页面（如 `/offline.html`），并将其返回给用户。	类似“备用菜单”——主菜（网络资源）没了，就上备选菜（离线页面）。
网络状态检测	通过 `navigator.onLine` API 检测用户当前是否在线（但该API并非100%可靠，需结合Service Worker的请求拦截机制）。	类似“网络信号灯”——实时提示网络连接状态。

2.3 应用使用场景

场景类型	离线页面应用示例	技术价值
内容类网站	新闻网站、博客等H5页面，用户在断网时仍能看到“当前网络不可用，请稍后重试”的提示页，而非空白页；已缓存的新闻列表仍可浏览。	保持用户访问连续性，避免因断网流失。
电商类应用	商品详情页、购物车页面，在断网时显示“网络异常，您的购物车数据已暂存，联网后自动同步”的提示，避免用户误操作（如重复提交订单）。	保障交易数据的完整性，提升用户信任感。
企业后台系统	员工使用的H5管理工具（如OA系统、数据看板），断网时展示“系统暂时离线，请检查网络连接”的提示，关键功能（如已加载的报表）仍可查看。	维持工作效率，减少因网络问题导致的操作中断。
表单提交类页面	用户反馈表单、注册页面，在断网时提示“提交失败，请检查网络后重试”，并通过LocalStorage暂存表单数据，联网后自动同步。	避免用户重复填写，提升表单提交成功率。
跨终端Web应用	智慧屏、车载H5应用等大屏设备，断网时显示适配大屏的离线提示页（如“当前无网络连接，请连接Wi-Fi”），保证交互友好性。	适配多终端场景，提供一致的用户体验。

3. 应用使用场景

3.1 场景1：新闻网站离线提示（静态备用页面）

需求：新闻网站的H5移动端页面，当用户断网时，Service Worker拦截所有请求，返回一个设计精美的离线页面（ /offline.html），提示用户“当前网络不可用，您已缓存的内容仍可浏览”。

3.2 场景2：电商商品页离线容错（动态请求回退）

需求：电商平台的商品详情页，当用户点击“加入购物车”按钮时，若网络失败，Service Worker拦截该请求并返回缓存的“操作失败”提示页，同时通过JS将购物车数据暂存到LocalStorage，联网后自动同步。

3.3 场景3：企业数据看板离线展示（已加载内容延续）

需求：企业内部的H5数据看板（如销售报表），用户在联网时加载了图表数据，断网后仍能查看已渲染的图表（通过Cache API缓存HTML结构），同时底部显示“当前为离线模式，数据可能不是最新”的提示。

4. 不同场景下的详细代码实现

4.1 环境准备

开发工具：华为DevEco Studio（鸿蒙）、Chrome浏览器（标准Web）、Node.js（本地服务器）。
核心API：
- Service Worker：拦截 fetch 事件，实现离线逻辑。
- Cache API：缓存备用页面（如 /offline.html）和静态资源。
- 网络状态检测：通过 navigator.onLine 辅助判断（但主要依赖Service Worker的请求拦截）。
注意事项：
- 离线页面（如 /offline.html）需提前通过Service Worker缓存（通常在 install 阶段完成）。
- 动态请求（如API调用）的离线回退需结合JS逻辑（如LocalStorage暂存数据）。

4.2 场景1：新闻网站离线提示（静态备用页面）

4.2.1 文件结构

/news-site
  ├── index.html          # 主页面（注册Service Worker）
  ├── sw.js               # Service Worker脚本
  ├── offline.html        # 离线备用页面（设计友好的提示）
  ├── css/
  │   └── news.css        # 新闻页面样式
  ├── js/
  │   └── news.js         # 新闻页面逻辑
  └── img/
      └── logo.png        # 网站Logo

4.2.2 离线页面（offline.html）设计

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网络连接失败</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 50px;
      background-color: #f5f5f5;
    }
    .offline-container {
      background: white;
      border-radius: 10px;
      padding: 30px;
      max-width: 400px;
      margin: 0 auto;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    h1 { color: #666; margin-bottom: 20px; }
    p { color: #999; margin-bottom: 30px; }
    button {
      background: #007bff;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
    }
    button:hover { background: #0056b3; }
  </style>
</head>
<body>
  <div class="offline-container">
    <h1>📡 网络连接失败</h1>
    <p>您当前处于离线状态，已缓存的内容仍可浏览。<br>请检查网络连接后刷新页面。</p>
    <button onclick="location.reload()">重试连接</button>
  </div>
</body>
</html>

4.2.3 主页面（index.html）注册Service Worker

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>新闻网站（离线支持）</title>
  <link rel="stylesheet" href="css/news.css">
</head>
<body>
  <header>
    <img src="img/logo.png" alt="新闻网站Logo">
    <h1>今日新闻</h1>
  </header>
  <main id="newsList">
    <!-- 新闻列表通过JS动态加载 -->
  </main>

  <script src="js/news.js"></script>
  <script>
    // 注册Service Worker（仅当浏览器支持且非本地文件时）
    if ('serviceWorker' in navigator && location.protocol !== 'file:') {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js')
          .then(registration => {
            console.log('Service Worker注册成功，作用域:', registration.scope);
          })
          .catch(error => {
            console.error('Service Worker注册失败:', error);
          });
      });
    }
  </script>
</body>
</html>

4.2.4 Service Worker脚本（sw.js）实现离线回退

const CACHE_NAME = 'news-cache-v1';
const STATIC_ASSETS = [
  '/', // 主页
  '/index.html',
  '/css/news.css',
  '/js/news.js',
  '/img/logo.png',
  '/offline.html' // 离线备用页面
];

// 安装阶段：预缓存静态资源和离线页面
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(STATIC_ASSETS))
      .then(() => self.skipWaiting()) // 强制新SW立即激活
  );
});

// 激活阶段：清理旧缓存
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => 
      Promise.all(
        cacheNames.map(name => 
          name !== CACHE_NAME && caches.delete(name) // 删除非当前版本的缓存
        )
      )
    ).then(() => self.clients.claim()) // 控制所有客户端
  );
});

// 拦截请求：优先网络，失败时回退到离线页面
self.addEventListener('fetch', event => {
  // 仅对非静态资源的请求应用离线回退（如API请求可单独处理）
  if (event.request.mode === 'navigate' || event.request.destination === 'document') {
    event.respondWith(
      fetch(event.request) // 优先尝试网络请求
        .catch(() => {
          // 网络失败，返回缓存的离线页面
          return caches.match('/offline.html')
            .then(response => {
              if (response) {
                console.log('返回离线页面');
                return response;
              }
              return new Response('<h1>离线模式</h1><p>无法加载页面</p>', { 
                headers: { 'Content-Type': 'text/html' } 
              });
            });
        })
    );
  } else {
    // 静态资源（如CSS/JS/图片）优先使用缓存
    event.respondWith(
      caches.match(event.request)
        .then(response => response || fetch(event.request))
    );
  }
});

4.2.5 原理解释

安装阶段：Service Worker安装时，通过 cache.addAll() 预缓存主页（ /index.html）、样式（ /css/news.css）、脚本（ /js/news.js）、Logo图片（ /img/logo.png）以及离线备用页面（ /offline.html），确保这些资源在首次访问时即可离线使用。
拦截请求：当用户访问新闻页面（导航请求， event.request.mode === 'navigate'）时，Service Worker优先发起网络请求；若网络失败（如断网），则通过 caches.match('/offline.html') 返回预缓存的离线提示页，而非浏览器的默认错误页。
静态资源优化：对于非导航请求（如CSS/JS/图片），直接优先使用缓存（ caches.match），加速页面加载。

4.3 场景2：电商商品页离线容错（动态请求回退）

4.3.1 核心逻辑

用户点击“加入购物车”按钮时，若网络失败，Service Worker拦截该API请求（如 /api/cart/add），返回缓存的“操作失败”提示页（ /cart-error.html），同时通过JS将购物车数据暂存到LocalStorage，联网后自动同步。

4.3.2 代码实现（补充）

离线提示页（cart-error.html）：

<!-- 简化的购物车错误提示页 -->
<div>
  <h2>❌ 操作失败</h2>
  <p>网络异常，您的购物车数据已暂存本地，联网后自动同步。</p>
  <button onclick="location.reload()">重试</button>
</div>

Service Worker扩展（sw.js）：

// 在fetch事件中增加对购物车API的拦截
const CART_API = '/api/cart/add';

self.addEventListener('fetch', event => {
  const requestUrl = new URL(event.request.url);
  if (requestUrl.pathname === CART_API) {
    event.respondWith(
      fetch(event.request)
        .then(response => {
          if (!response.ok) throw new Error('API请求失败');
          return response;
        })
        .catch(() => {
          // 网络失败，返回缓存的购物车错误页
          return caches.match('/cart-error.html')
            .then(response => response || new Response('<h2>购物车操作失败</h2><p>请检查网络</p>', { 
              headers: { 'Content-Type': 'text/html' } 
            }));
        })
    );
  }
  // 其他请求逻辑（同场景1）
});

JS逻辑（暂存数据到LocalStorage）：

// 电商页面中的购物车提交逻辑
document.getElementById('addToCart').addEventListener('click', () => {
  const cartData = { productId: '123', quantity: 1 };
  fetch('/api/cart/add', {
    method: 'POST',
    body: JSON.stringify(cartData),
    headers: { 'Content-Type': 'application/json' }
  })
  .catch(() => {
    // 网络失败时，暂存数据到LocalStorage
    const pendingCart = JSON.parse(localStorage.getItem('pendingCart') || '[]');
    pendingCart.push(cartData);
    localStorage.setItem('pendingCart', JSON.stringify(pendingCart));
    alert('网络异常，购物车数据已暂存，联网后自动同步！');
  });
});

4.3.3 原理解释

动态请求拦截：Service Worker专门拦截购物车API请求（ /api/cart/add），网络失败时返回缓存的错误提示页，避免用户看到浏览器默认的“500错误”。
数据持久化：通过LocalStorage暂存未提交的购物车数据，确保用户操作不丢失，联网后通过JS脚本自动同步到服务器。

5. 原理解释

5.1 离线页面的核心流程

预缓存阶段：Service Worker在 install 事件中，通过 caches.open() 和 cache.addAll() 将离线页面（如 /offline.html）和核心静态资源（如HTML/CSS/JS）存储到本地缓存中。
请求拦截阶段：当用户发起任何请求（如导航到新页面、点击链接），Service Worker通过 fetch 事件拦截该请求。
网络优先尝试：优先发起网络请求（ fetch(event.request)），若成功则直接返回响应。
离线回退：若网络请求失败（如断网、服务器宕机），通过 caches.match('/offline.html') 查询本地缓存的备用页面，并将其返回给用户。
静态资源优化：非导航请求（如CSS/JS/图片）直接优先使用缓存，加速页面加载（即使在线）。

5.2 核心特性

特性	说明	优势
友好用户体验	断网时展示设计友好的离线提示页（而非浏览器默认错误），避免用户恐慌。	提升用户对Web应用的信任感。
内容延续性	已缓存的内容（如新闻列表、商品详情）在断网时仍可浏览，保障信息可用性。	减少用户因断网导致的数据丢失焦虑。
动态请求容错	针对API等动态请求，返回特定的离线提示页，并通过JS暂存数据，联网后同步。	保证用户操作的连续性（如购物车数据不丢失）。
灵活配置	可针对不同类型的请求（导航、API、静态资源）定制不同的离线策略。	适应复杂业务场景的需求。
自动更新	通过修改Service Worker的版本号（如 `CACHE_NAME`），可清理旧缓存并更新离线页面内容。	确保用户看到的离线提示是最新的。

6. 原理流程图及解释

6.1 离线页面工作流程图

graph TD
    A[用户发起请求（导航/API/静态资源）] --> B{Service Worker是否注册?}
    B -->|否| C[浏览器正常处理请求（可能失败）]
    B -->|是| D[Service Worker拦截fetch事件]
    D --> E{请求类型}
    E -->|导航请求（主页/文章页）| F[优先网络请求]
    E -->|静态资源（CSS/JS/图片）| G[优先缓存请求]
    E -->|API请求（动态数据）| H[优先网络请求]
    F --> I{网络成功?}
    I -->|是| J[返回网络响应]
    I -->|否| K[返回缓存的离线页面（/offline.html）]
    G --> L{缓存命中?}
    L -->|是| M[返回缓存资源]
    L -->|否| N[发起网络请求（若失败则返回错误）]
    H --> O{网络成功?}
    O -->|是| P[返回网络响应]
    O -->|否| Q[返回缓存的API错误页（如/cart-error.html）]
    K/Q --> R[用户看到友好离线提示]

6.2 原理解释

导航请求（如用户点击链接跳转到新闻详情页）：Service Worker优先尝试从网络获取页面内容，若失败则返回预缓存的 /offline.html，确保用户始终有内容可看。
静态资源请求（如加载CSS样式或图片）：优先从缓存中读取，加速页面渲染（即使在线），减少网络延迟。
API请求（如提交购物车数据）：优先请求网络，失败时返回特定的错误提示页，并通过JS将数据暂存到本地存储，联网后自动同步。

7. 环境准备

开发环境：Chrome浏览器（支持Service Worker）、Node.js（本地服务器，如 http-server）、华为DevEco Studio（鸿蒙Web能力开发）。
服务器配置：需通过HTTP协议访问页面（ file:// 协议不支持Service Worker），确保离线页面（如 /offline.html）可被正确缓存。
关键工具：
- Chrome DevTools：通过“Application > Service Workers”面板查看Service Worker状态，通过“Network”面板模拟离线状态（勾选“Offline”）。
- Workbox（可选）：若使用Google的Workbox库，可简化缓存策略配置（如 workbox.precaching.precacheAndRoute()）。
注意事项：
- 离线页面（如 /offline.html）必须通过Service Worker显式缓存（通常在 install 阶段），否则无法在离线时返回。
- 动态请求（如API）的离线回退需结合前端JS逻辑（如LocalStorage暂存），Service Worker仅负责返回提示页。

8. 实际详细应用代码示例实现（综合案例：新闻网站）

8.1 需求描述

开发一个新闻网站的H5移动端页面，要求：

用户断网时，访问任何页面均显示友好的离线提示页（ /offline.html），而非浏览器默认错误。
已缓存的新闻列表（主页）在断网时仍可浏览。
静态资源（如CSS/JS/Logo）优先使用缓存，加速加载。

8.2 代码实现

（结合上述场景1的完整代码，包含Service Worker注册、离线页面缓存、请求拦截逻辑）

9. 运行结果

正常网络：用户访问新闻网站，所有资源（主页、CSS/JS、图片）正常加载，离线页面（ /offline.html）被预缓存但未显示。
断网状态：关闭网络后，用户点击任意链接或刷新页面，Service Worker拦截请求并返回缓存的 /offline.html，显示“当前网络不可用”的友好提示。
静态资源加载：断网时，已缓存的CSS/JS/Logo仍可快速加载，保证页面基础样式和品牌元素正常显示。

10. 测试步骤及详细代码

基础功能测试：
- 在线注册：通过Chrome DevTools的“Application > Service Workers”面板确认Service Worker注册成功（状态为“activated”）。
- 缓存验证：在“Cache Storage”面板中查看是否缓存了 /offline.html 及核心静态资源。
- 离线模拟：勾选DevTools的“Network”面板中的“Offline”选项，刷新页面，确认显示离线提示页而非错误页。
动态请求测试：
- 模拟API请求失败（如关闭后端服务），验证是否返回缓存的API错误页（如 /cart-error.html）。
静态资源测试：
- 断网时访问已缓存的图片（如Logo），确认能正常显示（通过“Network”面板查看来源为“disk cache”）。

11. 部署场景

新闻/博客类H5网站：确保用户在断网时仍能查看已缓存的内容，提升用户留存率。
电商类应用：通过离线提示页和数据暂存机制，保障购物车等关键操作的连续性。
企业后台系统：员工在无网络时仍能查看已加载的报表或文档，避免操作中断。
跨终端Web应用：智慧屏、车载H5等设备在弱网环境下提供友好的离线交互体验。

12. 疑难解答

Q1：离线页面不显示？
A1：检查Service Worker是否注册成功（Console输出“activated”），确认 /offline.html 已被正确缓存（通过“Cache Storage”面板查看），并确保拦截逻辑（ fetch 事件）针对导航请求返回了离线页面。
Q2：静态资源仍请求网络？
A2：检查 fetch 事件中对静态资源（如CSS/JS）的处理逻辑，确保优先使用缓存（ caches.match(event.request)）。
Q3：动态请求无离线提示？
A3：确认Service Worker是否拦截了特定的API请求（如 /api/cart/add），并在网络失败时返回了缓存的错误页（或通过JS提示用户）。

13. 未来展望

智能离线策略：结合用户网络状态（如通过 navigator.connection.effectiveType 检测4G/WiFi），动态调整离线页面的展示内容（如WiFi下提示“网络不稳定”，4G下提示“请检查信号”）。
离线功能扩展：不仅提示用户，还可提供部分离线功能（如阅读已缓存的新闻、编辑草稿），通过Service Worker和IndexedDB实现更丰富的离线交互。
多终端协同：鸿蒙等操作系统通过分布式能力，将Web离线页面与原生APP的离线功能联动（如智慧屏显示离线视频，手机同步进度）。
PWA深度集成：离线页面与PWA的安装提示（如“离线时仍可使用，点击安装到桌面”）结合，提升用户对Web应用的依赖度。

14. 技术趋势与挑战

趋势：
- 离线优先设计：越来越多的Web应用（如新闻、工具类）将离线页面作为核心功能，而非附加特性。
- 边缘缓存协同：CDN边缘节点缓存离线页面，进一步降低延迟（如用户访问最近的边缘服务器获取备用内容）。
挑战：
- 动态内容时效性：离线页面可能显示过期的数据（如新闻标题），需设计合理的更新机制（如定期同步摘要）。
- 跨浏览器兼容性：部分旧版浏览器（如IE）不支持Service Worker，需提供降级方案（如提示用户升级浏览器）。
- 安全与隐私：离线页面可能包含敏感信息（如用户草稿），需确保缓存内容的加密与访问控制。

15. 总结

H5离线页面（Offline Fallback）是提升Web应用鲁棒性与用户体验的关键技术，通过Service Worker和Cache API的协同，开发者可以在网络不可用时为用户提供友好的备用内容（如提示页、已缓存资源）。无论是新闻网站的静态内容延续，还是电商应用的动态请求容错，合理的离线策略都能有效减少用户流失，保障业务的连续性。未来，随着PWA和边缘计算的普及，离线页面将进一步与智能功能（如自动同步、离线编辑）融合，成为Web应用“全场景可用”的重要基石。开发者应深入理解其原理与实践细节，结合业务需求灵活设计，打造更具竞争力的用户体验。

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

H5 离线页面（Offline Fallback）实现

​​1. 引言​​

​​2. 技术背景​​

​​2.1 为什么需要离线页面？​​

​​2.2 核心概念​​

​​2.3 应用使用场景​​

​​3. 应用使用场景​​

​​3.1 场景1：新闻网站离线提示（静态备用页面）​​

​​3.2 场景2：电商商品页离线容错（动态请求回退）​​

​​3.3 场景3：企业数据看板离线展示（已加载内容延续）​​

​​4. 不同场景下的详细代码实现​​

​​4.1 环境准备​​

​​4.2 场景1：新闻网站离线提示（静态备用页面）​​

​​4.2.1 文件结构​​

​​4.2.2 离线页面（offline.html）设计​​

​​4.2.3 主页面（index.html）注册Service Worker​​

​​4.2.4 Service Worker脚本（sw.js）实现离线回退​​

​​4.2.5 原理解释​​

​​4.3 场景2：电商商品页离线容错（动态请求回退）​​

​​4.3.1 核心逻辑​​

​​4.3.2 代码实现（补充）​​

​​4.3.3 原理解释​​

​​5. 原理解释​​

​​5.1 离线页面的核心流程​​

​​5.2 核心特性​​

​​6. 原理流程图及解释​​

​​6.1 离线页面工作流程图​​

​​6.2 原理解释​​

​​7. 环境准备​​

​​8. 实际详细应用代码示例实现（综合案例：新闻网站）​​

​​8.1 需求描述​​

​​8.2 代码实现​​

​​9. 运行结果​​

​​10. 测试步骤及详细代码​​

​​11. 部署场景​​

​​12. 疑难解答​​

​​13. 未来展望​​

​​14. 技术趋势与挑战​​

​​15. 总结​​