无网络时普通HTML页面A重定向至Cache Manifest页面B的方案咨询

你的问题戳中了普通HTTP重定向的痛点——无网时根本发不出请求，自然跳不到缓存好的页面B。不过好在我们可以利用浏览器的离线缓存机制，用两种方式解决这个问题：

方案一：基于网络状态检测的本地跳转 #

既然页面B已经通过Cache Manifest被浏览器缓存了，那我们可以在页面A里先判断当前是否离线，然后直接让浏览器读取本地缓存的B页面，而不是发起新请求。

在页面A的脚本里加入这段代码：

window.addEventListener('load', function() {
  // 检测当前是否处于离线状态
  if (!navigator.onLine) {
    // 直接跳转页面B，浏览器会优先读取本地缓存
    window.location.href = '/pageB.html';
  }
});

⚠️ 注意：这个方案的前提是用户之前已经访问过页面B，浏览器已经把B缓存下来了。如果是用户第一次访问就断网，那还是会失败。

方案二：用Service Worker实现可靠的离线拦截（推荐） #

Service Worker是现在更主流的离线技术（Cache Manifest已经被逐步废弃），它能在请求层面拦截，不管用户有没有访问过B，只要我们提前缓存好B，就能实现无网时自动跳转到B。

步骤1：在页面A注册Service Worker #

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('Service Worker 注册成功', reg))
      .catch(err => console.error('Service Worker 注册失败', err));
  });
}

步骤2：编写Service Worker文件（sw.js） #

const CACHE_NAME = 'offline-cache-v1';
const OFFLINE_TARGET_PAGE = '/pageB.html';

// 安装阶段提前缓存页面B
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.add(OFFLINE_TARGET_PAGE))
  );
});

// 拦截所有请求，处理离线场景
self.addEventListener('fetch', event => {
  // 判断当前请求的是页面A，且处于离线状态
  if (event.request.url.includes('/pageA.html') && !navigator.onLine) {
    event.respondWith(
      // 从缓存中取出页面B返回
      caches.match(OFFLINE_TARGET_PAGE)
        .then(response => response || fetch(event.request))
    );
  } else {
    // 其他请求正常走缓存或网络
    event.respondWith(
      caches.match(event.request)
        .then(response => response || fetch(event.request))
    );
  }
});

这个方案更可靠，因为Service Worker会在后台自动缓存页面B，哪怕用户从没访问过B，只要Service Worker安装成功，无网时访问A就能直接跳到缓存好的B。

额外提示 #

• 测试离线状态时，可以用浏览器开发者工具的「Network」面板勾选「Offline」选项来模拟。
• Cache Manifest已被W3C标记为废弃技术，建议逐步迁移到Service Worker，它的功能更灵活强大。

内容的提问来源于stack exchange，提问作者Observer