乐闻世界logo
搜索文章和话题

如何在Service Worker中持久化数据

2 个月前提问
21 天前修改
浏览次数18

1个答案

1

Service Worker本身并不能直接持久化数据,但是它可以通过使用浏览器提供的存储API来实现数据持久化。以下是在Service Worker中持久化数据的几种方法:

1. 使用 IndexedDB

IndexedDB 是一个运行在浏览器中的非关系型数据库,它允许你存储大量结构化数据。Service Worker 可以通过 IndexedDB来持久化数据。这个API设计用来存储大量数据,并且支持事务。

例子:

假设我们想要在Service Worker中缓存并持久化一些用户数据:

javascript
self.addEventListener('install', (event) => { event.waitUntil( (async () => { const dbOpenRequest = indexedDB.open('myDatabase', 1); dbOpenRequest.onupgradeneeded = function(event) { let db = event.target.result; db.createObjectStore('userData', { keyPath: 'id' }); }; const db = await dbOpenRequest; const tx = db.transaction('userData', 'readwrite'); const store = tx.objectStore('userData'); store.put({ id: 1, name: 'John Doe', email: 'john@example.com' }); await tx.complete; })() ); });

2. 使用 Cache API

Cache API 提供了一个持久化缓存请求和它们相应返回的能力,非常适合用于存储应用外壳(即应用的静态部分,比如HTML, CSS, JavaScript文件等)。

例子:

以下代码片段展示了如何使用Cache API 缓存和获取资源:

javascript
self.addEventListener('install', (event) => { event.waitUntil( caches.open('my-cache').then((cache) => { return cache.addAll([ '/index.html', '/styles.css', '/script.js', // 其他资源... ]); }) ); }); self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request).then((response) => { return response || fetch(event.request); }) ); });

3. 使用 LocalStorage

虽然Service Worker 没有直接访问localStorage的权限,但是你可以通过Client API向页面发送消息,由页面再将数据持久化到localStorage

例子:

这需要Service Worker和页面之间的通信。Service Worker发送消息给页面:

javascript
self.clients.matchAll().then(clients => { clients.forEach(client => { client.postMessage({ command: 'storeData', data: { key: 'value' } }); }); });

然后,在页面中监听Service Worker发来的消息并使用 localStorage:

javascript
navigator.serviceWorker.addEventListener('message', event => { if (event.data.command === 'storeData') { localStorage.setItem('myKey', event.data.data.key); } });

4. 使用 Web SQL (不推荐)

Web SQL是一个已经不被推荐使用的Web API,因为它不是W3C标准,而且已经被大多数现代浏览器废弃。

综上所述,对于在Service Worker中持久化数据,通常建议使用IndexedDB或Cache API,它们都被现代浏览器广泛支持,并且专为工作线程和Service Worker设计,以支持大量数据,且能在没有网络连接的情况下有效工作。

2024年6月29日 12:07 回复

你的答案