离线和后台操作

2024-06-01 23:44| 来源: 网络整理| 查看: 265

当获取成功或失败，或者用户点击了进度 UI 元素时，浏览器将启动应用程序的 service worker（如果需要），并在 service worker 的范围内触发事件。可以触发以下事件：

backgroundfetchsuccess：所有请求都成功 backgroundfetchfail：至少有一个请求失败 backgroundfetchabort：获取被用户或主应用程序取消 backgroundfetchclick：用户点击了浏览器显示的进度 UI 元素获取响应数据

在 backgroundfetchsuccess、backgroundfetchfail 和 backgroundfetchabort 事件的处理器中，service worker 可以获取请求和响应的数据。

可以在事件处理器中访问事件的 registration 属性以获取响应。这是一个 BackgroundFetchRegistration 对象，它有 matchAll() 和 match() 方法，它们返回与给定 URL 匹配的 BackgroundFetchRecord 对象（或者，在 matchAll() 的情况下，如果没有给定 URL，则返回所有记录）。

每个 BackgroundFetchRecord 都有一个 responseReady 属性，它是一个 Promise，一旦响应可用，就会兑现 Response。

所以要访问响应数据，处理器可以做类似这样的事情：

js// service-worker.js self.addEventListener("backgroundfetchsuccess", (event) => { const registration = event.registration; event.waitUntil(async () => { const registration = event.registration; const records = await registration.matchAll(); const responsePromises = records.map( async (record) => await record.responseReady, ); const responses = Promise.all(responsePromises); // 使用响应数据做一些事情 }); });

由于响应数据在处理器退出后不会可用，所以如果应用程序仍然需要它，处理程序应该存储数据（例如，在 Cache 中）。

更新浏览器的 UI

传递给 backgroundfetchsuccess 和 backgroundfetchfail 的事件对象也有一个 updateUI() 方法，它可以用来更新浏览器显示的 UI，以便让用户了解获取操作的情况。使用 updateUI()，处理器可以更新 UI 元素的标题和图标：

js// service-worker.js self.addEventListener("backgroundfetchsuccess", (event) => { // 获取并存储响应数据 // ... event.updateUI({ title: "完成了你的下载！" }); }); self.addEventListener("backgroundfetchfail", (event) => { event.updateUI({ title: "无法完成下载" }); }); 响应用户交互

当用户点击浏览器在获取期间显示的 UI 元素时，会触发 backgroundfetchclick 事件。

这里的预期响应是打开一个窗口，向用户提供有关获取操作的更多信息，这可以通过在 service worker 中使用 clients.openWindow() 来完成。例如：

js// service-worker.js self.addEventListener("backgroundfetchclick", (event) => { const registration = event.registration; if (registration.result === "success") { clients.openWindow("/play-movie"); } else { clients.openWindow("/movie-download-progress"); } });

【本文地址】

离线和后台操作

离线和后台操作

今日新闻

推荐新闻