Как кэшировать все изображения продуктов (около 1000) из хранилища firebase с помощью приложения angular 4?
Как кэшировать все изображения продуктов моего веб-сайта (около 1000) из хранилища firebase с помощью приложения angular 4. Изображения загружаются на главную страницу очень медленно.
Есть ли способ кэшировать все изображения при запуске приложения или загружать их в кеш в первый раз и использовать оттуда?
Я пробовал искать в Интернете, но с angular 4/5 мало информации. может кто-нибудь помочь мне здесь?
Ответы 1
Есть несколько возможностей. Вот некоторые предложения:
Когда вы загружаете файл в Firebase Storage, вы можете указать свойства метаданных, такие как
cacheControl. Это свойство будет использоваться для кеширования файла в соответствии с вашей спецификацией. Пример представлен в Документация Firebase.Если вы используете хостинг Firebase, вы можете настроить
firebase.jsonдля кэширования статических ресурсов, таких как изображения, на уровне CDN с заголовкомCache-Control. Пример этой функции представлен в документация.Кроме того, вы можете использовать сервис-воркера, возможно, с рабочий ящик, со стратегией
cacheFirstдля кэширования всех изображений продуктов в браузере пользователя. Затем, после первого кеширования, изображения будут сначала загружены из локального кеша.В сценарии Angular вы также можете использовать подход отложенной загрузки для прогрессивной загрузки изображений с сервера. По сути, вам нужно использовать заполнитель в атрибуте
src(например, эффект среднего размытия) и асинхронно загружать изображения с сервера. Затем Angular может отображать изображения реактивно, например, с помощью Observer. Независимая библиотека фреймворка занимается этой проблемой - Blazy.
Благодаря этим подходам ваше приложение будет загружать изображения быстрее.