Есть ли способ кэширования нескольких файлов в PWA?

Question

Есть ли способ загрузить папку ресурсов, когда пользователь «устанавливает» PWA на свое устройство? У меня есть около 300 МБ изображений (фрагментов карты), которые мне нужно предварительно кэшировать для пользователя, мой пользователь будет в области без подключения. И я хотел бы знать, создает ли эта «установка» какую-то локальную папку, в которую я могу загрузить свои изображения, или, к сожалению, мне нужно перейти на родную систему ...

Я уже пробовал некоторые библиотеки, которые работают с моей картойрешение (leaflet), но эти библиотеки только кэшируют PNG в формате IndexedDB в формате BLOB-объектов, я не думаю, что это будет хорошим решением для этих массивных данных.

Answer 1

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

const mapTilesToCache = [
  '/mapFolder/',
];

const staticCacheName = 'tiles-cache';

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(staticCacheName)
    .then(cache => {
      return cache.addAll(mapTilesToCache);
    })
  );
});

Однако имейте в виду, что этот видСтратегия обычно используется для файлов оболочки приложения (гораздо меньше, чем 300 МБ). Если работнику службы поддержки не удается загрузить ресурсы, которые вы определили для фазы «установки», он прервет свою установку.

Как только ваши файлы будут в кеше, вы можете предоставить их пользователю:

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
    .then(response => {
      if (response) {
        // return the file from the cache
        return response;
      }

    }).catch(error => {
      // Respond with custom offline page
    })
  );
});