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

Question

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

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

导致第二个工作流程的主要想法是：

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

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

• 如果我在第二种情况下处于正确的轨道上，以便变得更好，或者它只是开销，
• 如何/是否可以实现一个便宜的加载屏幕，例如意味着下载 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.
  });
}