Что такое PWA
PWA — сайт, который можно установить на главный экран телефона и который частично работает без сети. Технически это обычные страницы плюс два дополнения: файл манифеста с описанием приложения и service worker — скрипт, который перехватывает запросы и решает, что взять из кеша, а что запросить у сервера.
Из чего состоит PWA
Нижний слой — самый важный. Если страницы не отдаются сервером как обычный HTML с уникальными адресами, никакое приложение сверху не сделает их доступными для поиска.
Правила для адресов
- У каждого экрана свой адрес, который открывается напрямую. Не используйте адреса с решёткой для смены экранов.
- Содержимое страницы видно в ответе сервера, а не только после работы скриптов: о рисках — в статье про одностраничные приложения.
- Стартовый адрес в манифесте — обычная главная страница без служебных параметров.
- Робот не запускает установленное приложение и не использует ваш service worker, поэтому доступность страниц проверяют без него.
Пример манифеста
{
"name": "Интернет-магазин",
"short_name": "Магазин",
"start_url": "/",
"display": "standalone",
"icons": [
{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" }
]
}Риски service worker
| Риск | Как проявляется | Как избежать |
|---|---|---|
| Устаревшая копия страницы | Посетитель видит старую цену или наличие | Для HTML брать свежую версию из сети, кеш — как запасной вариант |
| Кеширование ошибок | В кеше остаётся страница 404 или 500 | Не сохранять ответы с кодами ошибок |
| Сломанный скрипт | Сайт не открывается у тех, у кого он установлен | Продумать способ обновления и отключения |
| Смешение адресов | В кеше лежат страницы с разными параметрами | Кешировать по нормализованным адресам |
Связанные материалы. Про адрес и кеширование файла манифеста — в статье про favicon и манифест. Про общие правила кеширования — в статье про кеширование статики.
Когда PWA действительно нужно
Для большинства информационных сайтов и небольших магазинов PWA не обязательно: достаточно быстрого обычного сайта. Оно оправдано, когда посетители возвращаются часто и им важны установка на экран, уведомления или работа при плохой сети — например, для сервисов, справочников и личных кабинетов.
- Сначала убедитесь, что обычные страницы быстрые и доступны роботу.
- Добавьте манифест и проверьте, что установка работает.
- Подключайте service worker поэтапно, начиная с кеширования статических файлов.
- Проверьте, что страницы по прямым адресам открываются и без service worker.
Частые вопросы
Влияет ли PWA на индексацию?
Само по себе нет: индексируются обычные страницы с собственными адресами; проблемы возникают, когда содержимое доступно только после работы скриптов.
Что указывать в start_url?
Основной адрес главной страницы без служебных параметров, чтобы не порождать лишние адреса.
Видит ли робот service worker?
Нет: он запрашивает страницы напрямую с сервера, поэтому доступность страниц нужно проверять в том числе без service worker.
Готовый адрес можно собрать прямо сейчас: откройте генератор ЧПУ — он транслитерирует фразу по таблице Яндекса, уберёт служебные слова и покажет длину адреса.