参考资料

1. Nginx基本介绍
2. nginx是否需要开启HTTP/2支持以提高安全性？
3. 如何设置Nginx的Gzip压缩？
4. Nginx代理缓存配置详细说明以及案例
5. Nginx进程配置指令详解
6. Nginx集群配置管理详细说明以及案例
7. Nginx在负载均衡中的角色
8. Nginxsendfile 零复制指令详细说明以及案例

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

实现完整离线浏览需配合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提示

• 定期缓存更新机制