Question

我是服务人员的新手，仍然不确定他们的工作方式。

我正在使用React，ES6，Typescript构建教育游戏。该游戏最终将拥有大量资产，例如Adobe Animate导出的动画，音频文件等。

我想在游戏开始之前将所有资产预加载为一个单独的关卡。我一直在搞弄Workbox，但不确定是否允许根据用户所处游戏级别来预加载特定资产。换句话说，如果用户处于级别1，则我想预加载级别1的所有资产，并最终在游戏开始后为级别2的所有资产预加载，这样用户就不必在级别1完成后等待

服务工作者和/或Workbox是否可能？

Answer 1

Workbox具有support for precaching一组在构建时派生的URL。对于可能具有许多兆字节内容的应用程序，最佳实践是only cache the assets，您认为大多数用户最终都会使用。

听起来，在您的情况下，预缓存整个Web应用程序中常见的共享HTML，JavaScript和CSS，然后对特定级别的资产使用不同的策略是很有意义的。

您可以直接使用Cache Storage API（在Web应用程序的window上下文中，或者在服务工作者内部）将URL添加到预缓存步骤之外的缓存中。

我建议做的是利用Cache Storage API在Web应用程序中满足某些条件（例如，用户即将完成1级）时主动将项目添加到缓存中，然后再使用缓存-第一个（或重新验证时失效，如果要包括对缓存资源的更新进行检查的话）策略以及与这些URL匹配的路由。如果已将给定资产添加到缓存中，则将立即使用它，并且如果尚未将该资产添加到缓存中（因为在cache.addAll()调用之前，用户已从1级升级到2级）可以完成），但一切仍然可以进行，但是它们会在网络上被阻止。

在您的Web应用程序的window上下文中，该内容可能类似于以下内容：

const level2Urls = [
  '/assets/level2.png',
  // ...
];

const level3Urls = [
  '/assets/level3.png',
  // ...
];

async function cacheAssetUrls(urls) {
  const cache = await caches.open('assets');
  await caches.addAll(urls);
}

然后在您的服务人员中：

workbox.routing.registerRoute(
  new RegExp('/assets/')
  workbox.strategies.cacheFirst({
    cacheName: 'assets'
  })
);

我可以使用服务人员预加载特定资产吗？

1 个答案: