React应用中Service Worker离线回退页面实现问题求助

别担心，刚接触Service Worker遇到这种问题太正常了！毕竟React是单页应用，和传统静态HTML的离线处理逻辑确实不一样，我来帮你梳理下解决方案~

首先得说清楚你原来代码里的问题：你写的return new Response("/offline.html",...)其实是返回了一个内容为字符串"/offline.html"的响应，而不是实际的HTML文件内容，浏览器自然会把这个字符串当成HTML显示，肯定会报错；而且React的路由和组件都是靠主入口JS驱动的，直接返回单独的HTML文件也和React的渲染逻辑不兼容。

下面给你两种实用的解决方案，你可以根据自己的场景选：

方案一：React内部判断离线状态，渲染离线组件（推荐，更符合React单页应用逻辑） #

这种方式是让Service Worker在离线时返回React的主入口文件（比如index.html），然后由React自己判断离线状态，渲染对应的离线组件。

1. 修改Service Worker的fetch事件代码 #

把网络失败时的回退逻辑改成返回主入口文件（要确保这个文件已经被缓存到STATIC_ASSETS_NAME里了）：

sw.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      // 优先用缓存内容
      if (cachedResponse) {
        return cachedResponse;
      }

      // 尝试网络请求，成功后缓存动态资源
      return fetch(event.request)
       .then((networkResponse) => {
          caches.open('dynamic').then((cache) => {
            cache.put(event.request, networkResponse.clone()).catch(() => {});
          });
          return networkResponse;
        })
       .catch(() => {
          // 网络失败时返回React主入口文件
          return caches.open(STATIC_ASSETS_NAME).then((cache) => {
            return cache.match("/index.html"); // 这里换成你的主入口文件名，比如有的项目是/index
          });
        });
    })
  );
});

2. 在React应用里添加离线判断逻辑 #

在你的根组件（比如App.js）里监听在线/离线状态，一旦离线就渲染离线组件：

import { useState, useEffect } from'react';
import Offline from './components/Offline'; // 你自己写的离线组件
import AppRoutes from './Routes'; // 你的正常路由组件

function App() {
  const [isOffline, setIsOffline] = useState(!navigator.onLine);

  useEffect(() => {
    // 监听浏览器的在线/离线事件
    const handleOnline = () => setIsOffline(false);
    const handleOffline = () => setIsOffline(true);

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    // 组件卸载时移除监听
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  // 离线时渲染离线组件，否则正常渲染路由
  if (isOffline) {
    return <Offline />;
  }

  return <AppRoutes />;
}

export default App;

方案二：预渲染离线静态页面，在Service Worker里直接返回（适合简单场景） #

如果你不想在React里做状态判断，也可以把离线组件预渲染成静态HTML文件，然后让Service Worker在离线时返回这个文件。

1. 准备离线静态页面 #

• 要么手动写一个简单的offline.html放到项目的public目录里，要么用ReactDOMServer.renderToString把你的Offline组件渲染成HTML字符串，生成这个文件。
• 确保在Service Worker安装阶段，把offline.html加入到STATIC_ASSETS_NAME的缓存列表里。

2. 修改Service Worker的回退逻辑 #

把原来错误的Response创建代码改成直接返回缓存的offline.html：

.catch(() => {
  return caches.open(STATIC_ASSETS_NAME).then((cache) => {
    // 直接返回缓存的离线页面响应
    return cache.match("/offline.html");
  });
})

另外提一句，如果你的React项目是用Create React App搭建的，其实可以直接用它自带的PWA支持，比如使用cra-template-pwa模板，或者在自定义的Service Worker里用Workbox的offlineFallback配置，能更省心地实现离线回退功能~

备注：内容来源于stack exchange，提问作者Mister Killuminati