Работник службы с CacheAPI или IndexedDB пригоден для загрузки больших наборов данных

Question

У меня следующая ситуация: я разрабатываю небольшое веб-приложение со следующими свойствами:

• должно быть доступно в автономном режиме (оно предназначено для наружного использования в областях с плохим приемом сотовых ячеек)
• при подключении к сети каждый пользователь «создает» свой собственный автономный контент, который помещается в общедоступную папку для каждого пользователя на сервере.Этот контент (наборы изображений, до 40 МБ на пользователя, если быть точным) необходим для того, чтобы приложение имело какую-либо полезность

Первое замечание, сервисные работники - это то, что мне нужно, поскольку онибудет загружать и кэшировать логику моего приложения, но я изо всех сил пытаюсь выяснить, могу ли я или даже могу использовать работников сервиса для последнего требования.Как я понимаю, сервисные работники имеют следующее свойство: структура сервисного работника (что входит в комплект) определяется на этапе сборки приложения и не может быть изменена или изменена во время выполнения, и даже если бы это было так, я не смог бы сгенерировать другой сервис-рабочие для разных пользователей, верно?

Есть ли другой подход к этому?

Answer 1

Вы можете использовать Cache Storage API для кэширования дополнительного контента для пользователей, помимо HTML / JS / CSS вашего веб-приложения.API Cache Storage предоставляется как веб-страницам клиента, так и сотрудникам службы в виде caches для глобального объекта.

Например, вы можете сделать следующий вызов в коде вашего веб-приложения:

async function cacheAdditionalUrls(urls) {
  const cache = await caches.open('my-custom-cache');
  await cache.addAll(url);
  // At this point, 'my-custom-cache' will contain all of the urls.
  // You can read from this cache from the service worker.
}

А в вашем сервисном работнике вы можете прочитать из 'my-custom-cache', чтобы выполнить соответствующие запросы.Вы упоминаете, что используете vue-cli плагин PWA, который построен поверх Workbox .Чтобы использовать эти кэшированные данные в Workbox, вы можете реализовать правило runtimeCaching в конфигурации Workbox , например:

pwa: {
  workboxOptions: {
    // Add in other options as needed.
    runtimeCaching: [{
      urlPattern: new RegExp('path/prefix/for/images'),
      handler: 'cacheFirst',
      options: {
        cacheName: 'my-custom-cache'
      }
    }]
  }
}