Push API 数据到达与本地持久化协作实践

概述Push API 可在页面非活动时推送数据。本文展示订阅与 SW 端数据持久化示例。订阅与处理async function subscribePush() { const reg = await navigator.serviceWorker.ready; const sub = await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: '<BASE64-URL-KEY>' }); return sub.toJSON(); } self.addEventListener('push', event => { event.waitUntil((async () => { const data = event.data ? event.data.json() : {}; const db = await new Promise((resolve, reject) => { const r = indexedDB.open('push', 1); r.onupgradeneeded = () => { const db = r.result; if (!db.objectStoreNames.contains('msgs')) db.createObjectStore('msgs', { autoIncrement: true }); }; r.onsuccess = () => resolve(r.result); r.onerror = () => reject(r.error); }); const tx = db.transaction('msgs', 'readwrite'); tx.objectStore('msgs').add(data); await new Promise((res, rej) => { tx.oncomplete = res; tx.onerror = () => rej(tx.error); }); db.close(); self.registration.showNotification('新消息', { body: data.title || '数据已到达' }); })()); });