核心价值使用 `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 的组合可提供安装与离线能力。合理的缓存与更新治理确保体验稳定且可控。
发表评论 取消回复