feat: offline merchant dashboard — service worker, background sync & PWA install - #662
Open
micmusjnr20 wants to merge 1 commit into
Open
feat: offline merchant dashboard — service worker, background sync & PWA install#662micmusjnr20 wants to merge 1 commit into
micmusjnr20 wants to merge 1 commit into
Conversation
…WA install Adds a Workbox service worker that precaches the app shell and serves GET API list endpoints stale-while-revalidate, an API-reachability-aware offline banner, background sync for payment links and webhook tests created while offline, and a web manifest with icons plus an install prompt for the merchant dashboard. Verified end-to-end with `npm run verify:offline` (13/13 checks: the shell renders offline with cached data and the banner; an offline-created payment link is replayed on reconnect and appears in the list). `npm run build` passes; jest shows only pre-existing failures. Generated with Codebuff 🤖 Co-Authored-By: Codebuff <noreply@codebuff.com>
|
@micmusjnr20 is attempting to deploy a commit to the therealjhay's projects Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
|
kindly resolve conflict |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概述
为商家仪表盘补齐离线能力：Workbox service worker 预缓存应用外壳 + GET API 列表端点 stale-while-revalidate；离线横幅反映 API 可达性（而非仅
navigator.onLine）；支付链接创建与 webhook 测试提交支持 background sync；附带 manifest、图标与安装提示。变更内容
1. Service worker（Workbox）—
scripts/sw-template.js+scripts/build-sw.mjsnext build之后运行build-sw.mjs：bake API origin → rollup 打包 workbox runtime →injectManifest注入预缓存清单，产出public/sw.js（451 个资源，约 15.7 MiB）。.next/static哈希资源 + manifest/icons/logo 等稳定 URL）。healthz永远直连网络，保证横幅反映真实 API 可达性。/api/payment-links走 NetworkOnly + BackgroundSyncPlugin，作为客户端队列之外的网络失败兜底。SYNC_NOW/CLEAR_API_CACHE消息：登出时清空 API 缓存，防止跨账号脏数据；drain 串行化避免重复回放。2. 离线横幅（API 可达性感知）—
components/ui/offline-banner.tsxofflineStore+useOnlineStatus：10s 可见轮询healthz（4s 超时），叠加online/offline/visibilitychange事件。isApiReachable，两种状态不会长期矛盾。3. Background sync 队列 —
lib/offline/syncQueue.tsbettapay-offline/sync-queue）。app/(merchant)/payments/page.tsx）与 webhook 测试提交（components/developers/WebhookTester.tsx）在离线/不可达时入队，返回队列 id 供 UI 关联。sync+SYNC_NOW+ SWonline三路触发；回放成功后清除相关列表的 SWR 缓存让新链接立即可见；SYNC_COMPLETE广播回页面刷新数据。payments页显示"N 条离线链接等待同步"徽标；WebhookTester 将 pending 条目在回放后翻转为成功/失败。4. PWA manifest / 图标 / 安装提示
public/manifest.webmanifest（standalone、maskable 图标、主题色）。scripts/generate-icons.mjs纯 Node 生成 4 个图标（无图像依赖）。components/layout/InstallPrompt.tsx捕获beforeinstallprompt挂载于商家布局；components/ui/service-worker-registration.tsx仅生产环境注册 SW（workbox-window，动态导入）。middleware.ts豁免sw.js/manifest.webmanifest/icons/logo.png，避免鉴权重定向破坏 SW 安装。验收标准达成
npm run verify:offline（Playwright，13 项检查全过）：离线重载后外壳/列表来自 SW 缓存，横幅出现healthz永不缓存 + axios 网络错误翻转isApiReachable+ 10s 轮询收敛npm run build通过next build+build-sw.mjs全过（451 资源预缓存）测试
npm run build✅（next build+build-sw.mjs，451 资源 / 15.68 MiB）npm run verify:offline✅ 13/13（离线渲染、缓存命中、横幅、离线建链、重连回放、徽标清零）npx jest lib/offline✅ 4/4（无 IndexedDB/SW 环境的优雅降级契约）npx tsc --noEmit：offline 相关代码零错误（仓库内lib/docs、lib/i18n、lib/status存在先期无关报错，与本 PR 无关）备注
CLEAR_API_CACHE清空 SW 的 API 缓存，防止下一账号看到上一账号的缓存数据。