实现完整离线浏览，需配合Service Worker

参考资料

1. Nginx负载均衡策略详解
2. Nginx的负载均衡能力
3. Nginx核心配置指令详细说明以及案例
4. PHP-FPM绑定本机所有IP详细说明以及案例
5. nginx 配置静态文件路径
6. Nginx TCP/UDP代理详细说明以及案例
7. Nginx的功能特点说细说明
8. SCGI（Simple Common Gateway Interface，简单通用网关接口）详细说明以及案例

实现完整离线浏览需配合Service Worker的步骤如下：

1. 注册Service Worker

• 在主线程JavaScript中检测浏览器支持

• 调用navigator.serviceWorker.register()注册

• 指定Service Worker脚本路径（通常为/sw.js）

2. 安装阶段

• 监听install事件

• 使用caches.open()创建/打开缓存

• 调用cache.addAll()预缓存关键资源

• 跳过等待阶段使用self.skipWaiting()

3. 激活阶段

• 监听activate事件

• 清理旧缓存版本

• 调用clients.claim()立即控制页面

4. 拦截请求

• 监听fetch事件

• 实现缓存优先策略：

  event.respondWith(
    caches.match(request)
      .then(response => response || fetch(request))
  )

• 或网络优先策略

5. 缓存动态更新

• 获取新响应后调用cache.put()更新缓存

• 使用Cache API管理缓存版本

6. 必要配置

• 确保HTTPS（localhost开发环境除外）

• 正确设置HTTP缓存头

• 在Web App Manifest中配置start_url

7. 调试工具

• Chrome DevTools的Application面板

• console.log调试生命周期

• 使用caches.keys()检查缓存版本

完整实现需考虑：

• 缓存策略选择

• 存储配额管理

• 离线状态UI提示

• 定期缓存更新机制