javascript - 缓存第一个场景的 Service Worker 策略 - 预加载屏幕

Question

我目前正在开发一个小型网络应用程序，它应该实现缓存的第一个场景(用户在提供wifi的基础上下载wep应用程序，然后应该能够在室外离线使用) 我没有使用任何框架，因此自己实现缓存(SW)。 由于我还在 iframe 上集成了一些 playcanvas 内容(有自己的加载屏幕)，我想知道什么加载方面的总体策略才有意义。

在一个类似的项目中，我只是让服务工作人员与应用程序的(初始)加载并行下载 Assets 。 但我想到，最好实现一个更接近 native 应用程序行为的工作流程 - 意味着在服务工作人员下载过程中显示整体加载屏幕，并在此过程完成后构建/显示我的主应用程序(或确实失败 -> 强制网络场景或之前发生过 -> 离线场景)。另一种解决方案是显示非阻塞的“ Assets 仍在下载”横幅。

导致 mit 进入第二个工作流程的主要想法是:

• SW-Loading 屏幕/横幅可以为用户提供更好的反馈:“所有资源已下载 - 我可以安全地离线”，而旧方案可能会导致问题 - 成功向用户显示第一个状态 -而一些关键文件仍然在后面下载。
• 使用软件加载屏幕，下载过程对我来说更容易控制/理解 - 例如，软件下载和 Playcanvas 加载的并行过程变得顺序。

如果有人可以向我提供反馈/信息，那就太好了:

• 如果我在第二种情况下走在正确的轨道上，会变得更好，或者只是开销
• 如何/是否可以实现一个廉价的加载屏幕，例如下载 230 个文件中的 100 个或其他。
• 针对这种情况的一般更好策略

一如既往，感谢您的提前提醒。

Answer 1

这很大程度上取决于您希望用户体验什么。底层技术可以完成您概述的任何场景。

例如，如果您想在初始 Service Worker 安装期间显示有关预缓存进度的信息，您可以通过添加以下代码来实现。

在您的 Service Worker 中:

const PRECACHE_NAME = "...";
const URLS_TO_PRECACHE = [
  // ...
];

async function notifyClients(urlsCached, totalURLs) {
  const clients = await self.clients.matchAll({ includeUncontrolled: true });
  for (const client of clients) {
    client.postMessage({ urlsCached, totalURLs });
  }
}

self.addEventListener("install", (event) => {
  event.waitUntil(
    (async () => {
      const cache = await caches.open(PRECACHE_NAME);
      const totalURLs = URLS_TO_PRECACHE.length;
      let urlsCached = 0;

      for (const urlToPrecache of URLS_TO_PRECACHE) {
        await cache.add(urlToPrecache);
        urlsCached++;
        await notifyClients(urlsCached, totalURLs);
      }
    })()
  );
});

在您的客户端页面中:

// Optional: if controller is not set, then there isn't already a
// previous service worker, so this is a "first-time" install.
// If you would prefer, you could add this event listener
// unconditionally, and you'll get update messages even when there's an
// updated service worker.
if (!navigator.serviceWorker.controller) {
  navigator.serviceWorker.addEventListener("message", (event) => {
    const { urlsCached, totalURLs } = event.data;
    // Display a message about how many URLs have been cached.
  });
}