如何构建一个支持离线路由的单页应用(SPA)？

构建支持离线路由的单页应用（SPA）需结合前端路由与Service Worker技术，通过缓存核心资源、拦截请求并处理离线状态，确保断网时核心功能可用。 以下是具体实现步骤：

• React项目：使用React Router，推荐HashRouter（如<HashRouter>），因其通过URL的#部分处理路由，不会向服务器发起请求，适合静态托管环境。若需SEO或更简洁的URL，可使用BrowserRouter，但需确保服务器配置支持。
• Vue项目：使用Vue Router，同样推荐hash模式（如mode: 'hash'），避免离线时服务器请求。原生JS项目可通过监听hashchange事件或使用History API实现自定义路由。
• 关键点：

  Hash模式（如#/about）无需服务器配置，直接由前端处理路由。

  Browser模式需服务器将所有路由指向index.html，否则离线时可能返回404。

Service Worker是离线功能的核心，负责缓存资源、拦截请求并提供fallback页面。

• 注册Service Worker：在应用入口文件（如index.js）中注册sw.js，确保仅在支持Service Worker的浏览器中启用：if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js').then(registration => { console.log('ServiceWorker注册成功'); });}
• 缓存核心资源：在sw.js中定义缓存策略：

  安装阶段（install）：预缓存HTML、JS、CSS等静态资源。const CACHE_NAME = 'my-app-v1';const urlsToCache = ['/', '/index.html', '/main.js', '/styles.css'];self.addEventListener('install', event => {

  event.waitUntil(caches.open(CACHE_NAME).then(cache => {return cache.addAll(urlsToCache);}));});- 激活阶段（activate）：清理旧缓存，避免版本冲突。```javascriptself.addEventListener('activate', event => {event.waitUntil(caches.keys().then(cacheNames => { return Promise.all( cacheNames.map(cacheName => { if (cacheName !== CACHE_NAME) { return caches.delete(cacheName); } }) );}));

});```

• 拦截请求（fetch）：优先返回缓存内容，若缓存未命中则尝试网络请求。self.addEventListener('fetch', event => {

event.respondWith(caches.match(event.request).then(response => {return response || fetch(event.request);}));});```

• 静态页面：如帮助页、设置页等，可在构建时将其HTML模板或数据打包进缓存。使用工具如Workbox简化配置：import { precacheAndRoute } from 'workbox-precaching';precacheAndRoute(self.__WB_MANIFEST || []);构建工具（如Webpack）会生成precache-manifest.js，包含所有需缓存的文件列表。
• 动态路由：对参数化路由（如/user/:id）做通配处理，确保/user/123和/user/456均命中主应用入口，由前端路由渲染对应组件。

• 在线时：服务器需将所有路由指向index.html，确保前端路由接管渲染。例如：

  Nginx配置：location / { try_files $uri $uri/ /index.html;}

  Apache配置：FallbackResource /index.html

• 离线时：Service Worker拦截请求并返回缓存的index.html，前端路由根据URL渲染视图。

• 检测网络状态：应用启动时检查navigator.onLine，并监听online/offline事件动态更新UI。document.addEventListener('online', () => { updateUI('网络已恢复');});document.addEventListener('offline', () => { updateUI('当前离线，部分功能受限');});
• 友好提示：在离线时显示提示条，或为无法获取的数据展示本地缓存版本。例如：function fetchData() { if (!navigator.onLine) { return showCachedData(); // 返回本地缓存 } return fetchFromNetwork().catch(() => showCachedData()); // 网络失败时回退}

• 缓存入口文件：确保所有路由最终命中缓存的index.html，由前端路由（如React Router/Vue Router）接管渲染。
• 缓存更新策略：采用“缓存优先，网络回退”模式，避免缓存过期导致功能异常。可通过版本号或时间戳更新缓存。
• 测试离线功能：使用Chrome开发者工具的Application面板，勾选Offline模拟断网环境，验证路由与缓存行为。

通过结合前端路由（如React Router/Vue Router的Hash模式）与Service Worker缓存策略，并配置服务器路由回退，可实现SPA的离线支持。核心在于确保资源被正确缓存、请求被Service Worker拦截，并由前端路由处理视图渲染。同时，提供离线状态提示能显著提升用户体验。