Могу ли я предварительно загружать определенные активы с помощью работников службы?

Question

Я новичок в обслуживании работников и до сих пор не знаю, как они работают.

Я создаю образовательную игру, используя реагировать, ES6, Typescript.Эта игра в конечном итоге будет иметь множество ресурсов, таких как анимации, экспортируемые Adobe Animate, аудиофайлы и т. Д.

Я хочу предварительно загрузить все ресурсы для отдельного уровня перед началом игры.Я возился с Workbox , но я не уверен, позволяет ли он предварительно загружать определенные ресурсы в соответствии с тем уровнем игры, на котором находится пользователь.Другими словами, если пользователь находится на уровне 1, я хочу предварительно загрузить все ресурсы для уровня 1 и, в конце концов, после запуска игры предварительно загрузить все ресурсы для уровня 2, чтобы пользователю не приходилось ждать после завершения уровня 1.

Возможно ли это с работниками сферы обслуживания и / или Workbox?

Answer 1

Workbox имеет поддержку предварительного кэширования набор URL-адресов, полученных во время сборки.Для приложений, которые могут иметь объем содержимого в несколько мегабайт, лучше всего использовать только для кэширования ресурсов , которые, как вы думаете, большинство пользователей в конечном итоге будут использовать.

Похоже,в вашем сценарии имеет смысл предварительно кэшировать общий HTML, JavaScript и CSS, которые распространены в вашем веб-приложении, а затем использовать другую стратегию для ресурсов определенного уровня.

Вы можете использовать Cache Storage API напрямую (либо из контекста window вашего веб-приложения, либо из вашего сервисного работника) для добавления URL-адресов в кеш вне шага предварительного кэширования.

Я бы порекомендовал сделать это:использование API Cache Storage для упреждающего добавления элементов в кэш при выполнении определенных условий в вашем веб-приложении (например, когда пользователь собирается завершить уровень 1), а затем использование первого кеша (или stale-while-revalidate), если вы хотите включить проверку на наличие обновлений кэшированных ресурсов) в Workbox вместе с маршрутом, соответствующимЭлектронные URL.Если данный ресурс уже был добавлен в кеш, он будет использован сразу же, и если актив не был добавлен в кеш (поскольку пользователь перешел с уровня 1 на уровень 2 до завершения вызова cache.addAll()), все еще будет работать, но они будут заблокированы в сети.

Это может выглядеть следующим образом в контексте 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'
  })
);