Кэширование ресурсов изображений Progressive Web App: предварительное кеширование или кэширование во время выполнения?

Недавно я сделал свое первое прогрессивное веб-приложение (PWA) и изо всех сил пытаюсь придумать стратегию кэширования ресурсов изображений. PWA был специально разработан для мобильных пользователей в сетях со скоростью загрузки ниже среднемировой. Это насыщенный изображениями PWA для цифровой выставки произведений искусства, здесь: https://caravans.library.northwestern.edu/

Это единый проект (без push-уведомлений, без сбора пользовательских данных, минимальные обновления). Мы хотим, чтобы его можно было установить, чтобы упростить использование в сетях с низкой пропускной способностью и для работы в стиле оболочки. Сначала я хотел ограничить количество сетевых запросов, которые пользователи должны были бы сделать, чтобы установить или использовать его в автономном режиме. Это привело меня к проповеди ВСЕ (около 12 МБ). После более тщательных размышлений было сочтено неправильным создавать такую ​​огромную полезную нагрузку для первого посещения.

Теперь я настроил рабочих служб для предварительного кеширования HTML и кэширования изображений во время выполнения. Однако для загрузки изображений потребуется больше сетевых запросов. Я думаю, может быть, было бы неплохо настроить PWA для кеширования изображений по умолчанию во время выполнения и кешировать ВСЕ, если пользователь решит установить (например, «Добавить на главный экран») PWA. Я не уверен, возможно ли это.

Есть ли хорошая идея предварительно кэшировать pwa размером ~ 12 МБ? Какую стратегию вы бы использовали? Любой совет будет принят во внимание.


progressive-web-apps service-worker image-caching
person Chris Diaz    schedule 15.06.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

"Может ли быть хорошей идеей предварительное кэширование pwa размером ~ 12 МБ?" Для некоторых приложений да. В общем случае, вероятно, нет, но это только потому, что предварительное кэширование обычно означает «предварительное кэширование сразу же, когда приложение / веб-страница открывается в первый раз». Как вы заметили, это приводит к ухудшению пользовательского опыта.

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

So:

  1. сгенерировать массив файлов для немедленного предварительного кэширования (без больших изображений)
  2. сгенерировать второй массив файлов для предварительного кэширования при установке пользователем (большие изображения)
  3. прослушивать событие установки в js-коде приложения
  4. при установке срабатывает отправка сообщения Service Worker с помощью postMessage API
  5. SW добавляет массив # 2 в кеш с помощью cache.addAll

Часть 3 также может быть «при открытии с домашнего экрана». Но вы поняли общую идею.

Создание двух массивов файлов зависит от вашей системы сборки. Скорее всего, ничего не делает автоматически. Помните, что вы также можете динамически касаться массива файлов, например. вызовите на нем filter () и так далее внутри ПО.

https://developer.mozilla.org/en-US/docs/Web/API/Cache/addAll, https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

person pate    schedule 16.06.2020