Progressive Web Apps 2026：新标准与新能力

# Progressive Web Apps 2026：新标准与新能力 ## PWA 核心更新 2026 年的 PWA 已经不再是"能离线访问的网页"那么简单，新的 Web API 让 PWA 具备了接近原生应用的能力。 ## Service Worker 进阶 ```javascript // sw.js - 缓存策略 const CACHE_VERSION = 'v3' const STATIC_ASSETS = ['/index.html', '/app.js', '/style.css', '/icons/icon-192.png'] self.addEventListener('install', (event) => { event.waitUntil( caches.open(CACHE_VERSION).then((cache) => cache.addAll(STATIC_ASSETS)) ) self.skipWaiting() }) // Network-first with cache fallback self.addEventListener('fetch', (event) => { if (event.request.url.includes('/api/')) { event.respondWith( fetch(event.request) .then((response) => { const cloned = response.clone() caches.open(CACHE_VERSION).then((cache) => cache.put(event.request, cloned)) return response }) .catch(() => caches.match(event.request)) ) } }) ``` ## Web Push 通知 ```javascript // 注册推送 async function subscribePush() { const registration = await navigator.serviceWorker.ready const subscription = await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY) }) await fetch('/api/push/subscribe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(subscription) }) } // Service Worker 处理推送 self.addEventListener('push', (event) => { const data = event.data.json() event.waitUntil( self.registration.showNotification(data.title, { body: data.body, icon: '/icons/icon-192.png', badge: '/icons/badge-72.png', actions: [ { action: 'open', title: 'View' }, { action: 'dismiss', title: 'Dismiss' } ] }) ) }) ``` ## 文件系统访问 ```javascript // 打开文件 async function openFile() { const [handle] = await window.showOpenFilePicker({ types: [{ description: 'Images', accept: { 'image/*': ['.png', '.jpg', '.webp'] } }] }) const file = await handle.getFile() return file } // 保存文件 async function saveFile(content) { const handle = await window.showSaveFilePicker({ suggestedName: 'document.txt', types: [{ description: 'Text', accept: { 'text/plain': ['.txt'] } }] }) const writable = await handle.createWritable() await writable.write(content) await writable.close() } ``` ## Manifest 增强 ```json { "name": "My PWA App", "short_name": "MyPWA", "display": "standalone", "display_override": ["window-controls-overlay"], "handle_links": "preferred", "launch_handler": { "client_mode": "navigate-existing" }, "file_handlers": [ { "action": "/open", "accept": { "text/plain": [".txt"] } } ], "share_target": { "action": "/share", "method": "POST", "enctype": "multipart/form-data", "params": { "title": "name", "text": "description", "files": [{ "name": "media", "accept": ["image/*"] }] } } } ``` PWA 在 2026 年已经是移动端和桌面端的可靠选择，特别是对于不需要应用商店分发的内部工具和 B2B 产品。