Progressive Web Apps — будущее веба

1238
views

PWA (Progressive Web Apps)

Если вы web-разработчик, то наверняка слышали такое понятие как «Progressive Web App».

Данное определение является немного расплывчатым и несколько спорным. Но в целом, идея заключается в том, что веб-страница, которая «приняла нужные витамины», ведет себя как обычное приложение установленное из App Store. Изначально страница открывается, как обычно в окне браузера, но если она обладает правильным функционалом, пользователь сможет позволить браузеру «Добавить на рабочий стол» эту страницу. Ранее данный функционал использовался в качестве закладок.

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

Это грандиозно!

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

  1. Почти невозможно вклиниться в маленькую группу из 5 — 8 приложений, которые пользователь использует регулярно.
  2. По статистике, в США, пользователи почти не устанавливают новых приложений.
  3. Вы не можете следить за процессом подтверждения приложения.
  4. Платные приложения, очевидно, платят комиссию маркету.

PWA являются попыткой создать баланс между вебом и нативной средой. Предоставляющий быстрые приложения, подобно нативным, которые избавлены от вышеупомянутых проблем. Факт того, что приложение было добавлено на рабочий стол — означает, что приложение уже загружено и установлено. И больше нет нужды скачивать 50-ти мегабайтные пакеты из App Store и Play маркета, со слабым соединением, так как зайдя на сайт, все что необходимо для работы страницы браузер уже загрузил. Полученный интерфейс браузер сохраняет на устройстве и его можно продолжать использовать даже находясь offline.

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

PWA load in Safari on iOS
Загрузка страницы washingtonpost.com в Safari

О поддержке PWA различными браузерами я напишу в дальнейшем. Но технология уже работает и активно развивается компанией Google. Лично для меня, как front-end разработчика, создавать web-приложения, которые по производительности и функционалу схожи с нативными как подарок, о котором мечтал многие годы.

История концепции

Конечно, идея делать интерфейсы сайтов подобно нативным приложениям далеко не нова, Стив Джобс в свое время изначально предполагал только такой способ реализации приложений. Но для развития платформы такое решение не имело смысла, но времена меняются…

PWA прошли долгий путь, и в данный уже уверенно имеют статус «лучший предмет инвестирования, чем нативное приложение» для многих крупных компаний. Ведь сам Google продвигает идею таких приложений.

Не без изъянов

Но как бы прекрасной не была реализация PWA в Android, есть и свои недостатки (надеюсь не на долго).

  1. PWA добавленные на рабочий стол отсутствуют в списке «Всех приложений», как все остальные приложения.
  2. Когда приложение было добавлено на рабочий стол, у разработчика пропадает возможность повлиять на иконку или название приложения в дальнейшем.
  3. При миграции с одного android устройства на другое, PWA необходимо переустанавливать.
  4. Фраза «Добавить на рабочий стол» не вызывает ощущения, что была произведена установка офлайн приложения.
  5. В данный момент нет реализации «deep linking». То есть нет возможности создать специальные системные ссылки, которые бы запускали приложение на нужном экране, все ссылки открываются по умолчанию в браузере.
  6. Push-уведомления приходят от браузера Chrome, а не от PWA.
  7. Потребление энергии идет как от открытой вкладки Chrome.

Все эти нюансы в данный момент отличают PWA от нативных приложений.

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

Испытать технологию можно уже сейчас

Для установки Progressive Web App в ваш Android смартфон необходимо установить браузер Chrome Canary.

  1. Переходим по адресу ://flags
  2. Включаем заветную галочку «Improved add to Home screen»
  3. Заходим на страницу, которая является PWA.
  4. Соглашаемся на запрос установки. Больше никаких разрешений приложение спросить не может.
  5. Далее видим сообщение об успешной установке, приложение появится на вашем рабочем столе.
  6. Удалить или остановить PWA можно так же как и обычное приложение.

Подведем итог

Когда мобильная платформа, которая имеет больше 1 млрд. активных устройств в день, работает и внедряет новый подход к разработке и распространению приложений, такое огромнейшее изменение рынка нельзя игнорировать и стоит обратить внимание на данную технологию, оставаясь в тренде.