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

How to update service worker cache in PWA?

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

1个答案

1

当我们在Progressive Web App (PWA)中更新Service Worker的缓存内容时,通常是因为我们有新的文件要缓存,或是我们想要更新已经缓存的文件的版本。以下是更新Service Worker缓存的步骤和一些推荐的做法:

  1. 更新Service Worker文件: 首先,你需要在Service Worker的JavaScript文件中做出一些改动。通常,这可以通过改变缓存的名称或更新文件中的一些内容来实现。这样做会触发浏览器检查Service Worker文件是否有更新。

  2. 安装新的Service Worker: 当浏览器发现Service Worker文件有所更新时,它会尝试安装新的Service Worker。在这个阶段,你应当在install事件中添加代码来处理缓存更新。

    javascript
    const CACHE_NAME = 'cache-v2'; // 更改缓存名来更新缓存 const urlsToCache = ['/', '/styles/main.css', '/script/main.js']; self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => { return cache.addAll(urlsToCache); }) ); });
  3. 激活新的Service Worker: 接下来,新的Service Worker将会进入activate事件。在这个阶段,你通常要处理旧缓存的清理工作,以防止占用过多的存储空间。

    javascript
    self.addEventListener('activate', event => { const cacheWhitelist = [CACHE_NAME]; event.waitUntil( caches.keys().then(cacheNames => { return Promise.all( cacheNames.map(cacheName => { if (cacheWhitelist.indexOf(cacheName) === -1) { return caches.delete(cacheName); // 删除不在白名单的旧缓存 } }) ); }) ); });
  4. 更新客户端上的Service Worker: 新的Service Worker安装和激活后,页面还需要重新加载来使用更新后的Service Worker。你可以通过在你的网页中加入逻辑来提示用户重新加载页面,或者自动刷新页面。

  5. 管理更新: 你可以在Service Worker中利用self.skipWaiting()来强制等待中的Service Worker立即激活,也可以在客户端使用registration.waiting.postMessage('skipWaiting')来通知Service Worker进行更新。

实际例子

假设我们有一个Service Worker,它在先前的版本中缓存了几个应用资源。现在我们有一些资源更新了,我们希望确保用户能够获取到最新版本的资源。我们可以通过以下步骤更新缓存:

  1. 更改Service Worker文件中的CACHE_NAME常量,从而创建一个新的缓存实例。
  2. 在Service Worker的install事件中添加新资源的路径,并确保通过cache.addAll(urlsToCache)方法将其添加到新的缓存中。
  3. 在activate事件中,通过比较cacheWhitelist和现有缓存列表来删除旧版本的缓存。
  4. 确保新的Service Worker激活后,指导用户刷新页面或者自动刷新来使用最新的缓存资源。

这个过程确保了应用能够及时地向用户提供最新的内容,同时还保留了离线使用的能力。

2024年6月29日 12:07 回复

你的答案