Progressive Web App: установка, офлайн и требования

Прямой ответ

Устанавливаемое веб-приложение требует манифеста, зарегистрированного service worker и защищённого соединения, поэтому установка становится доступна после выполнения всех условий.

<link rel="manifest" href="/manifest.webmanifest">
<script>navigator.serviceWorker.register("/sw.js");</script>

Манифест и worker регистрируются при загрузке страницы, поэтому браузер получает сведения, необходимые для предложения установки. О манифесте — в статье про web manifest.

Требования к установке и проверка условий

Установка предлагается при выполнении набора условий, поэтому отсутствие одного компонента блокирует предложение установки.

Манифест приложения. Документ с названием, значками и режимом отображения присутствует, поэтому браузер определяет параметры установленного приложения.

Зарегистрированный worker. Обработчик зарегистрирован с областью действия, охватывающей страницу, поэтому работа без соединения обеспечена.

Защищённое соединение. Страница отдаётся по защищённому протоколу, поэтому регистрация worker и установка разрешены.

Практическое следствие: приложение без зарегистрированного worker не получает предложения установки, поскольку условие работы без соединения не выполнено.

Отдельный аспект — отклик на установку. Обработчик запроса установки сохраняет ссылку на запрос, поэтому установка выполняется по действию пользователя, а не автоматически.

Режим отображения и область действия

Режим отображения определяет внешний вид установленного приложения, поэтому параметры манифеста задают поведение интерфейса.

Режим отображения. Параметр манифеста определяет наличие адресной строки и оформление окна, поэтому приложение выглядит как отдельное окно.

Область действия. Путь, в пределах которого приложение работает автономно, поэтому переход за пределы области открывает браузер.

Начальный адрес. Страница, открываемая при запуске приложения, поэтому запуск не требует выбора адреса.

Практическое следствие: область действия, не охватывающая страницы приложения, приводит к открытию браузера при переходе, поэтому автономный режим прерывается.

Обновление worker и контроль версии

Обработчик обновляется при изменении файла, поэтому прежняя версия продолжает обслуживать открытые страницы до закрытия.

Обнаружение изменения. Браузер сравнивает файл обработчика с установленным, поэтому изменённый файл активируется как новая версия.

Ожидание закрытия страниц. Новая версия активируется после закрытия страниц прежней версии, поэтому обновление не прерывает открытые сессии.

Принудительная активация. Новая версия активируется немедленно по команде, поэтому обновление применяется без ожидания закрытия.

Практическое следствие: обновление обработчика без активации новой версии оставляет страницу на прежней версии, поэтому изменение кэша не применяется.

О кэшировании — в статье про service worker; об автономной работе — в статье про офлайн-режим.

Уведомления и фоновая синхронизация

Уведомления и фоновая отправка расширяют автономный режим, поэтому действие выполняется без открытия страницы приложения.

Показ уведомления. Приложение показывает уведомление после получения разрешения, поэтому пользователь узнаёт о событии без открытия страницы.

Фоновая отправка. Изменение, сохранённое без соединения, отправляется при появлении сети без участия пользователя, поэтому очередь применяется автоматически.

Разрешение пользователя. Показ уведомления требует явного разрешения, поэтому запрос выполняется по действию, а не при загрузке страницы.

Практическое следствие: запрос разрешения на уведомления при загрузке страницы приводит к отказу, поскольку пользователь не понимает назначение запроса в этот момент.

Отдельный аспект — обработка закрытия приложения. Фоновая отправка выполняется обработчиком, который работает после закрытия страницы, поэтому очередь применяется даже без открытого окна приложения.

Практика: настройка устанавливаемого приложения

1. Добавьте манифест с названием, значками и режимом отображения. Браузер определяет параметры установленного приложения.

2. Зарегистрируйте service worker с областью действия, охватывающей приложение. Условие работы без соединения выполнено.

3. Отдавайте приложение по защищённому соединению. Регистрация worker и установка разрешены только по защищённому протоколу.

4. Обрабатывайте запрос установки и сохраняйте ссылку на запрос. Установка выполняется по действию пользователя.

5. Задавайте область действия, охватывающую страницы приложения. Переход за пределы области не прерывает автономный режим.

6. Указывайте начальный адрес запуска. Запуск приложения не требует выбора адреса.

7. Проверяйте условия установки в браузере. Предложение установки подтверждается проверкой, а не наличием файлов.

Рекомендации:

1. Не рассчитывайте на автоматическую установку. Установка предлагается браузером при выполнении условий либо выполняется по действию пользователя.
2. Учитывайте ожидание активации новой версии обработчика. Обновление применяется после закрытия страниц прежней версии.
3. Сопоставляйте область действия с набором страниц приложения. Переход за пределы области открывает браузер.
4. Фиксируйте проверку условий установки в процессе разработки. Отсутствие компонента обнаруживается до выпуска.
5. Пересматриваем манифест при изменении структуры приложения. Новая область требует изменения области действия.

Практический сценарий: браузер не предлагал установку приложения

Контекст: манифест и обработчик присутствовали, но предложение установки не появлялось, при этом страница открывалась корректно.

1. Диагностика. Проверка условий установки показала, что обработчик регистрировался по пути, не охватывающему страницу приложения. Манифест загружался, но условие работы без соединения не подтверждалось для области приложения.
2. Причина. Область действия обработчика не соответствовала области действия приложения, поэтому браузер не считал условие автономной работы выполненным.
3. Действия. (а) Изменили путь регистрации обработчика, чтобы область действия охватывала страницы приложения; (б) привели область действия в манифесте в соответствие с областью обработчика; (в) добавили обработку запроса установки с сохранением ссылки, чтобы установка выполнялась по действию пользователя; (г) проверили отдачу страницы по защищённому соединению, поскольку регистрация worker иначе не разрешена; (д) проверили условия установки в браузере и убедились в появлении предложения.
4. Результат. Браузер предлагает установку, поскольку область обработчика и манифеста совпадают и все условия выполнены.

Вывод: область действия обработчика, не охватывающая страницы приложения, блокирует предложение установки, поскольку условие автономной работы не подтверждается. Соответствие области обработчика области манифеста и обработка запроса установки делают установку доступной.

FAQ

Какие компоненты нужны для установки веб-приложения? Манифест с названием, значками и режимом отображения, зарегистрированный service worker и защищённое соединение.

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

Что такое область действия приложения? Путь, в пределах которого приложение работает автономно. Переход за пределы области открывает браузер.

Когда активируется новая версия service worker? После закрытия страниц прежней версии либо немедленно по принудительной команде.

Источники: web.dev PWA Checklist, W3C Web App Manifest, W3C Service Workers — ссылки в шапке.