Кеширование и офлайн
Кеш — это память браузера покупателя, в которой хранятся уже загруженные страницы, картинки, стили и шрифты. Когда браузер может взять файл из кеша, он не качает его заново. Кеш хранится у покупателя, а не на вашем сервере.
Работу с кешем выполняет Service Worker — служебный файл, который PWA создаёт для каждой витрины. Вам нужно лишь выбрать стратегию для каждого типа файлов.
Что PWA не обещает. Ускорение в процентах, полную работу корзины и оформления заказа без сети, мгновенное обновление картинки, заменённой под тем же адресом. Страницы аккаунта, корзины и оформления заказа PWA не кеширует намеренно, чтобы личные данные не попали в кеш.
Стратегии кеширования простыми словами
Где открыть. Меню → Кеширование → Кеширование.
| Стратегия | Как работает | Когда выбирать |
|---|---|---|
| Сначала сеть (Network first) | Сначала запрос к серверу; если сети нет — берётся кеш | Страницы магазина: покупатель видит свежие цены и остатки |
| Сначала кеш (Cache first) | Если файл в кеше — берётся он; нет — запрос по сети | Файлы, которые не меняются или меняют адрес вместе с изменением (шрифты) |
| Stale-while-revalidate | Сразу показывается файл из кеша, а в фоне загружается новая версия для следующего раза | Изображения и статические файлы (стили, скрипты) |
| Только сеть (Network only) | Всегда сеть, без офлайн-копии | Когда офлайн-копия не нужна |
| Только кеш (Cache only) | Только кеш | Для изображений не используйте: кеш не заполняется, и картинки не загружаются совсем |
| «—» | Не вмешиваться: решает обычный кеш браузера | Когда кеш PWA для этого типа не нужен |
Рис. 5.1. Страница «Кеширование» на тестовом стенде: рядом с каждым полем показана рекомендуемая стратегия.
Настройка кеширования
Когда это нужно. Установить разумные правила или поправить их после мастера.
Где открыть. Меню → Кеширование → Кеширование.
Что выбрать.
| Поле | Рекомендация | Почему |
|---|---|---|
| Страницы | Сначала сеть | Свежие цены и остатки; кеш выручает только без сети |
| Изображения | Stale-while-revalidate | Картинки появляются быстро и обновляются в фоне |
| Статические ресурсы (css, js, worker) | Stale-while-revalidate | Стили и скрипты быстро, и обновляются |
| Google шрифты | Сначала кеш | Шрифты почти не меняются |
| Медиа (видео, аудио) | Оставьте пустым, если не уверены (рядом с полем в интерфейсе написана рекомендация «Сначала кеш», но для новых установок поле пустое) | Большие файлы лучше не кешировать без необходимости |
Затем нажмите «Сохранить». Рядом с полем может появиться подсказка «Рекомендуемая стратегия: …». Если у изображений выбрано «Только кеш», появится кнопка «Переключить на Stale-while-revalidate» — нажмите её и сохраните.
Что должно получиться. Настройки сохранены. На странице «Диагностика» проверка «Кеширование» — «Пройдено» или «Предупреждение» с понятной причиной (глава 7).
Если не получилось или картинки «залипли».
- Сначала кеш для изображений: картинка, заменённая под тем же адресом, может оставаться старой у покупателей до 30 дней. Выбирайте «Сначала кеш» для изображений, только если новое изображение получает новый адрес (версия или хеш в адресе). Иначе — Stale-while-revalidate.
- Даже при Stale-while-revalidate покупатель может один раз увидеть старую версию, потом получит новую.
- Картинки на внешних сервисах (CDN, S3) без специальных заголовков PWA не кеширует: свежесть определяет сам сервис; офлайн их не будет.
- Картинки WebP/AVIF кешируются для офлайна, только если сервер отдаёт для них заголовок
Cache-Control: public— это настройка веб-сервера, о которой лучше спросить хостинг или разработчика. - Собственный Service Worker модуля SuperCache (опция «Enable caching Server worker») конфликтует с PWA за одну область: отключите эту опцию там, где работает PWA.
Предварительное кеширование
Что это. Часть сайта (например, шапка, меню) загружается в кеш при установке Service Worker и показывается сразу, а динамическое содержимое подгружается с сервера. Это продвинутый режим («островная архитектура»): он требует подготовки сайта и при неверной настройке может нарушить вёрстку. Если вы не разработчик, оставьте его выключенным.
Где открыть. Меню → Кеширование → Предварительное кеширование.
Как включить осознанно.
- Нажмите «Добавить компонент». Новый компонент отключён.
- Заполните: тип «Файл» (ссылка на файл) или «Блок» (ID блока из Сайт → Блоки), название, версия.
- Нажмите «Активировать компонент».
- Нажмите «Сохранить». Предкеш включён, пока активен хотя бы один компонент «Файл» или «Блок».
Компонент «Динамический контент (загрузка с сервера)» не кешируется: он нужен для островного режима. Если вы изменили компонент, поменяйте его версию, чтобы покупатели получили новое.
Что должно получиться. В плашке вверху страницы настроек: Предварительное кеширование: Включено.
Если не получилось.
- Подсказки в карточке компонента: «Отключён: компонент не активирован», «Не работает: укажите ID блока / ссылку на файл», «Активен: попадёт в precache после сохранения».
- Блок кешируется, только если сервер отдаёт для него
Cache-Control: public— это настройка сервера, не приложения. - Если вёрстка «поехала» после включения — отключите компонент и сохраните.
Обновление кеша у покупателей
Когда это нужно. Вы изменили сайт или PWA, и нужно, чтобы покупатели получили новую версию.
Где открыть. Меню → Кеширование → Обновления кеша.
Как это работает. Когда Service Worker изменяется, в браузере покупателя появляется небольшое уведомление (тост) с предложением обновить приложение. Приложение само отслеживает изменения файла Service Worker. Если по какой-то причине этого не произошло, укажите новое значение в поле «Версия» (номер версии файла Service Worker) и сохраните: у покупателей появится предложение обновить.
На странице можно также настроить вид тоста: цвета, размер шрифта, положение (углы, центр) и отступ от края, а также свой CSS.
Обновление Service Worker не очищает кеш изображений у покупателей. Кеш хранит до 50 картинок не дольше 30 дней. PWA не очищает память браузера покупателей принудительно.
Офлайн-страница («Резервный ответ»)
Когда это нужно. Показать покупателю понятный текст и бренд, когда нет сети и нужной страницы нет в кеше.
Где открыть. Меню → Разное → Резервный ответ.
Что заполнить.
- Изображение — необязательно.
- Текст — что видит покупатель; можно HTML. Например: «Нет подключения к интернету. Страница станет доступна, когда сеть вернётся.»
- Необязательно: Ссылка на шрифт, Пользовательский CSS.
- Нажмите «Сохранить».
Рис. 5.2. Результат на тестовом стенде при отсутствии сети: настроенный текст вместо ошибки браузера.
Что должно получиться. Сначала один раз откройте витрину в браузере, чтобы установился Service Worker. Затем в инструментах разработчика браузера (вкладка Network) включите режим «Offline» и откройте страницу витрины, которую вы раньше не открывали: покажется ваша офлайн-страница.
Если не получилось.
- Размер. Страница встраивается в Service Worker, если она не больше 64 КиБ. Держите её компактной; картинки и шрифты подключайте отдельными файлами.
- Если страница слишком большая или не настроена, покупатель увидит стандартную заглушку «Offline».
- Корзина, оформление заказа и личный кабинет без сети офлайн-страницу показывают, но их содержимого офлайн нет — так и задумано.
- При режиме «островной архитектуры» (предварительное кеширование с компонентами «Блок» или «Динамический контент») на страницах корзины и оформления заказа без сети вместо вашей страницы показывается обычная ошибка браузера.
- Проверка «Offline-страница» на странице «Диагностика» (глава 7) подскажет, что не так.
Что проверено. Показ офлайн-страницы с настроенным текстом проверялся на тестовом стенде в Chrome на компьютере; на настоящих телефонах и в Safari не проверялось.