PWA (Progressive web application) — сайт-приложение

Введение Progressive Web App (PWA) — это тип приложений, которые сочетают в себе web и mobile технологий. PWA выглядят и взаимодействуют с пользователем, как нативные приложения (native app). Основные достоинства PWA-приложений:

Увеличение трафика и, как следствие, конверсий
Относительная простота создания
Кроссплатформенность
Устанавливается как полноценное приложение
Более быстрая работа
Есть возможность работы в offline без Интернет-соединения
Есть возможность отображения push-уведомлений на мобильных устройствах и определять местоположение пользователя

Установить такое приложение можно путем добавления ярлыка на рабочий стол в Android, через меню поделиться в iOS. Также, можно добавить его прямо в браузер Google Chrome через основное меню. Требования к сайту:

Сайт обязательно должен работать по протоколу HTTPS и не содержать ошибок типа Mixed Content
Для быстрого создания сайт уже должен иметь мобильный или адаптивный шаблон
Необходим логотип сайта в хорошем разрешении для создания набора изображений-ярлыков

Руководство по созданию

Для проверки PWA на корректность используется инструмент Lighthouse, который доступен в панели веб-разработчика Google Chrome.

Ресурсы

Воспользуйтесь одним из генератором ярлыков-иконок для создания набора изображений для разных разрешений, например:

Обязательно наличие хотя бы одного изображения размером 192х192. Google также рекомендует включить изображение размеров 512х512 для устройств с большим разрешением. Желательно чтобы были изображения следующих разрешений:

72x72
96x96
128x128
144x144

152x152

192x192

384x384

512x512

Добавьте их в массив icons манифеста приложения и в блок <head> HTML файла. Наверное вы заметили, что генераторы упомянутые выше могут создавать не только изображения, но и манифест полностью. Вот еще несколько специальных генераторов манифестов:

Манифест подключается в HTML-коде:

<link rel="manifest" href="/templates/new/manifest.json">

Offline режим

Для управлением кешем и потенциальными действиями в PWA используется технология Service Worker. JS файл подключается следующим образом:

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js') }

JS код не обязательно писать вручную, в сети есть ряд готовых решений:

Также есть множество генераторов на базе NodeJS, например — sw-precache Примеры SW файлов для PWA можно посмотреть тут:

Если создать пустой SW файл, то PWA будет работать только в онлайн режиме. Для проверки корректности работы SW в offline режиме можно воспользоваться соответствующим инструментом в панели разработчиков браузера: F12 -> Application -> Service Workers (боковая панель). Не забудьте включить offline.