Прогрессивные web-приложения (PWAs)

Прогрессивные web-приложения - это обычные веб-приложения, которые при помощи WEB API могут предложить функционал, традиционно доступный только нативным приложениям - работа в автономном режиме, push-уведомления и доступ к оборудованию. В настоящий момент поддержка PWA обеспечена в той или иной мере во всех основных настольных и мобильных операционных системах, включая iOS (с версии 11.3), что заставляет поверить в её перспективы и затратить некоторое время на её рассмотрение.

Для лучшего понимания того, что представляют собой прогрессивные web-приложения, а также их преимущества и недостатки, рассмотрим простой пример.Откройте браузер и перейдите по ссылке https://pwa1-8a506.firebaseapp.com. В случае успеха откроется страница с текстом "Привет PWA".

Что мы видим? Мы видим обычную web-страницу с синтаксической ошибкой в тексте. Хорошо, но на самом деле это страница с дополнительной функциональностью PWA. Как об этом может узнать посетитель? Никак! Если в браузере Google на Android и всплывёт уведомление, в котором будет предложено добавить страницу на главный экран, то пользователь решит, что это очередной навязчивый сервис для добавления ссылки на web-страницу. PWA существуют, но нужно каким-то образом показать это пользователям. Выходом может стать создание каталогов PWA, но когда это произойдёт? Google Play и App Store уже принимают для публикации прогрессивные web-приложения. Но это сразу убивает несколько ощутимых преимуществ PWA - возможность распространять приложения просто, бесплатно и без установки. Другие преимущества PWA:

Создайте ярлык для нашей страницы и ещё один ярлык для любого сайта. Отключите Интернет и откройте эти страницы по ярлыкам. Наша страница отображается в автономном режиме, загрузившись из кэша, тогда как обычная web-страница отобразит ошибку подключения к серверу. Однако, если PWA на сервере обновилось, а пользователь открыл приложение в момент отсутствия сети, то он, естественно увидит не обновлённую версию, а старую из кэша. Это может быть критичной ситуацией в каких-то случаях. Ещё один нюанс связан с тем, что работа браузера с кэшем не всегда очевидна и прозрачна, что может привести к получению странных результатов.

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

Для установки PWA на ПК нам потребуется браузер Chrome версии не ниже 70, а лучше обновиться до последней версии (я использовал 73). Откройте браузер Chrome и в адресной строке введите ссылку https://pwa1-8a506.firebaseapp.com. После загрузки страницы в меню браузера появится новая опция ("Открыть в приложении" или что-то похожее).

Появление данной опции как раз и говорит о том, что в браузере открыто корректное (с точки зрения Chrome) PWA-приложение. Может ли оно быть некорректным? Да! Самое смешное то, что пример Weather от Google не только не работает так, как задумывалось, но и после его открытия в браузере данная опция в меню не добавляется.

Если опция установки в меню так и не появилась, то в адресной строке браузера введите chrome://flags/pwa и на появившейся странице настроек включите опцию Desktop PWAs (возможно, потребуется включить и ещё что-то, так как технология до сих пор находится в статусе экспериментальной).

После выполнения команды приложение откроется в отдельном окне, а ярлык для него будет добавлен в хранилище приложений chrome://apps и на панель запуска.

Для установки приложения на iOS откройте ссылку в браузере Safari и нажмите кнопку Поделиться (Отправить), а затем в списке опций выберите "Добавить на главный экран".

Для установки приложения на Android всё происходит ещё проще. После открытия ссылки на PWA в браузере Chrome, автоматически появится уведомление, нажатие на которое приведёт к добавлению ярлыка на главный экран. Либо это можно выполнить через опцию меню, как было показано ранее.

Создание ярлыка на обычную web-страницу и PWA происходи идентично, но браузер Chrome позволяет произвести "установку", которая в случае ПК происходит с автоматичеким добавлением ярлыка приложения в Пуск и панель приложений Chrome. Это можно сделать и вручную, но автоматическая установка проще, хотя и требует для этого определённый браузер, что также неудобно.

Получается так, что в самом простом случае PWA - это обычная web-страница с некоторым дополнительным кодом для подключения манифеста и регистрации serviceworker? Именно! Если изначально web-страница выглядит и работает неудовлетворительно, то и сгенерированное из неё приложение PWA будет работать аналогично. Когда говорят о преимуществах PWA, то следует учитывать, что часть из них имеет субъективный характер и вполне возможны ситуации, когда PWA не будет обладать свойствами, которые ему щедро приписывают - высокая скорость работы, отзывчивый нативный интерфейс и др.

Файл манифеста содержит настройки проекта - его название, режим отображения на экране и др.). Наличие этого файла как раз и даёт указание браузеру (Chrome) считать открытый в браузере ресурс приложением PWA, а не web-страницей.

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

sw.js

Проект можно скачать здесь. Из-за частичной поддержки манифеста, для iOS в файл index.html потребуется добавить заплатку (смотрите официальный пример). Иначе вместо пиктограммы приложения в качестве ярлыка будет предложен уменьшенный скриншот страницы.

Для загрузки PWA требуется HTTPS-протокол. Если у вас нет хостинга с https, то можно использовать что-то бесплатное, например, хостинг FireBase, как в моём случае, GitHub Pages.и др.

Если требуется нативный интерфейс, работа с базой данными, файлами, сенсорами устройства, обновление в фоновом режиме и др., то всё это нужно добавить в свой проект при помощи соответствующих web-технологий, фреймворков и Web API. А как происходит работа с оборудованием устройства - доступ к камере, локатору, датчику положения? Тоже посредством Web APIs.

Есть мнение, что PWA создаётся столь же просто, как и обычные web-страницы, но доступная по этому поводу информация говорит об обратном - нужно использовать какие-то фреймворки, что-то предварительно устанавливать, настраивать и вводить в командную строку, выполнять десяток шагов и т.п. Нужно ли это пользователям? Нет. Пользователям нужны адекватные генераторы кода, готовые шаблоны и элементарные примеры, при помощи которых за 5-10 минут можно создать и установить PWA на своём устройстве.

Это всё прекрасно, но так ли необходимы прогрессивные web-приложения? К преимуществам PWA относят скорость работы, но при этом забывается о том, что во многих случаях медленная работа происходит не из-за недостаточной скорости соединения, а из кучи тяжеловесных фреймворков, CMS и всего прочего, что разработчики вываливают на страницы своих сайтов, раздувая их до нескольких мегабайт, ставя дизайн и маркетинг выше удобства работы пользователей с информацией.