核心价值使用 `app/manifest.ts` 输出站点清单，配合 SW 提供离线与安装体验。对缓存策略进行治理，确保更新与一致性。Manifest// app/manifest.ts export default function manifest() { return { name: 'App', short_name: 'App', start_url: '/', display: 'standalone', background_color: '#ffffff', theme_color: '#0ea5e9', icons: [ { src: '/icons/icon-192.png', sizes: '192x192', type: 'image/png' }, { src: '/icons/icon-512.png', sizes: '512x512', type: 'image/png' }, ], } } SW 注册// app/sw-register.tsx 'use client' import { useEffect } from 'react' export default function SWRegister() { useEffect(() => { if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') } }, []) return null } // app/layout.tsx import SWRegister from './sw-register' export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html> <body> {children} <SWRegister /> </body> </html> ) } 基础 SW// public/sw.js self.addEventListener('install', (event) => { self.skipWaiting() }) self.addEventListener('activate', (event) => { clients.claim() }) self.addEventListener('fetch', (event) => { const req = event.request if (req.method !== 'GET') return event.respondWith(fetch(req).catch(() => caches.match(req))) }) 治理建议对动态 API 使用网络优先或 `no-store`，避免缓存副本导致数据陈旧。对静态资源采用指纹文件并长缓存；更新 SW 时使用版本管理与主动更新提示。结论Manifest 与 SW 的组合可提供安装与离线能力。合理的缓存与更新治理确保体验稳定且可控。
投稿
微信公众账号
微信扫一扫加关注
评论 返回
顶部
发表评论 取消回复