Next.js App Router项目：如何实现离线可用与请求队列及工具推荐

你已经接入了Service Worker，下面是几个能满足你需求的主流工具：

1. Workbox #

Workbox是Chrome官方推出的PWA工具库，和Service Worker深度整合，适配性极强：

• 离线运行：通过Workbox-Precaching可预缓存Next.js的静态资源（页面、JS、CSS等），能自动生成缓存清单，网络断开时直接从缓存读取资源，保障基础功能可用。
• 请求队列：Workbox-Background-Sync专门处理失败的POST请求，会自动将请求存入IndexedDB队列，待网络恢复后批量重发。只需在Service Worker中注册对应路由规则，指定需要拦截的POST接口即可。

2. PWA Studio #

虽最初为电商场景设计，但它的离线模块通用性很强：

• 离线运行：提供完整的缓存策略配置，支持针对Next.js的动态路由和静态资源设置不同缓存规则，确保离线时页面正常渲染。
• 请求队列：内置的offline-request-queue模块会拦截POST请求，离线时存入本地存储，网络恢复后按顺序重发，还支持自定义重试逻辑和失败回调。

3. LocalForage + 自定义队列逻辑 #

若不想引入大型库，可结合轻量的LocalForage（封装IndexedDB的工具）自行实现：

• 离线运行：依托已有的Service Worker缓存静态资源，用LocalForage存储需要离线访问的动态数据（比如用户输入的表单内容）。
• 请求队列：发送POST前先判断网络状态，离线时将请求参数、接口地址等存入LocalForage队列；通过Service Worker监听online事件，触发队列遍历，逐个发送请求，成功后从队列移除。

Next.js App Router额外注意点 #

• 由于App Router采用React Server Components（RSC），预缓存时要注意范围，避免缓存服务器组件的渲染结果，仅缓存客户端组件和静态资源。
• 使用Workbox时，可通过next.config.js配置experimental.appDir相关缓存规则，确保Service Worker能正确拦截和缓存App Router的路由资源。

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