Progressive Web Application (PWA)

Материал из Minter Wiki


MPWA-2.png

Progressive Web Application (PWA) - прогрессивная веб-технология, которая функционально и визуально трансформирует практически любой сайт в мобильное приложение. Прямо из браузера его можно разместить на главном экране смартфона - приложение будет самостоятельно отправлять push-уведомления и получит полный доступ к аппаратным средствам гаджета, которые для этого необходимы.

История

Технологию PWA разработала корпорация Apple в 2007 году. Все приложения для iPhone изначально создавали только на web-платформе, они были доступны в Safari (браузер для iOS и macOS). Но компания не получила той прибыли, на которую рассчитывала, и уже через год во второй версии появился магазин приложений App Store. Именно после этого началось развитие технологии PWA.

В течении нескольких лет другие компании копировали и модифицировали технологию (например, браузер MeeGo на Nokia N9).

Настоящим прорывом для технологии стал 2015 год, когда благодаря браузеру Google Chrome, в котором появилась масса расширенных возможностей, а также продвижению Service Worker и Web App Manifest, о PWA узнал практически весь мир. Именно тогда дизайнер Фрэнсис Берримэн и инженер Алекс Рассел придумали термин "PWA".

После этого технологию начали использовать многие IT-стартапы. Сейчас оффлайн-работу с PWA могут обеспечить Windows, Linux, iOS, Android, Safari, Firefox, macOS, Chrome OS, Edge и Samsung Internet.

Основы и технология

Нельзя сказать точно, что такое "PWA приложения". Никто не сможет с одного взгляда определить, что сайт PWA или нет. Простыми словами, PWA — это веб приложение, которое создали с использованием некоторых технологий для достижения определенных целевых показателей.

Эти показатели можно расшифровать следующим образом:

  • Надежность (Reliable) — приложение загружается моментально, это не зависит от качества сетевого соединения;
  • Быстрота (Fast) — взаимный обмен данными в сети происходит очень быстро;
  • Привлекательность (Engaging) — работать с приложением очень комфортно и приятно.

По словам представителей корпорации Google, эти показатели можно определить только по ощущениям и внешнему виду и никак иначе. Если говорить простыми словами, то каждый разработчик на старте имеет одинаковые возможности. Стандартные инструменты одинаковы для всех (Push Notifications, Service Worker и другие). Как именно каждый человек сможет собрать свой сайт, зависит только от него.

Объем приложения — очень важный фактор. В среднем, вес нативного (стандартного) приложения составляет примерно 25 Мегабайт. Чем больше пользователь скачивает, тем больше приложения захламляют наши смартфоны. Средний объем PWA — всего 2 Мегабайта. Разница огромная.

Как самостоятельно создать PWA

Перед тем, как сделать собственное PWA-приложение, нужно убедиться, что сайт соответствует требованиям технологии:

  • Наличие SSL-сертификата;
  • Мобильная пригодность (есть мобильная версия или внедрен адаптивный дизайн);
  • Скрипт Service Worker, который подгружает файлы и данные, а также сохраняет их;
  • Отдельный URL для каждой страницы;
  • Если чего-то не хватает, сначала придется над этим поработать. Еще перед началом работ рекомендуется установить GIT для контроля версий.

Если все есть, выбираем нужный плагин:

Или каркас для разработки прогрессивных веб-приложений:

  • PWA-Starter-Kit – самый простой каркас от Polymer;
  • Vue Storefront – бесплатный каркас с открытым исходным кодом, подходящий ко многим CMS;
  • Ionic – фреймворк с платным расширением возможностей;
  • Quasar – также поможет сгенерировать Progressive Web Apps.

Пример полной установки и настройки Progressive Web App.

Примеры использования PWA

  • Технология успешно реализовали на примере Google Maps:
PWA maps.png
  • Сервис визуальных закладок и поиска картинок Pinterest тоже реализовал эту технологию:
PWA pinterest.png

Преимущества PWA

  • Страницы сайта PWA выглядят одинаково красиво на экранах всех устройств и не зависят от браузера, который установлен на смартфоне;
  • PWA сайт загружается мгновенно. Большинство пользователей просто закрывают вкладку если страница загружается больше 3 секунд. С PWA такое невозможно;
  • Быстрая установка на смартфон;
  • Работа в оффлайн-режиме. Находясь в онлайн-режиме, PWA синхронизирует данные и обновляет их в кэше;
  • Уведомления на Android-устройствах. Информация об актуальных событиях, акциях и обновлениях сразу появляется на экране пользователя в виде push-уведомлений;
  • PWA самостоятельно индексируются и улучшают SEO-показатели. Неимоверно важная деталь для разработчиков;
  • Кроссплатформенность. С помощью данной технологии можно разрабатывать приложения, которые будут работать на любых устройствах, любых ОС и любых браузерах.

Выводы

С дальнейшим развитием технологии PWA, разработчики смогут быстро и без особых проблем создавать приложения, которые в разы технологичнее, чем стандартные. Да, технология еще очень молода, не все браузеры ее поддерживают (особенно более старые). Но в итоге все разработчики будут использовать и развивать именно эту технологию, ведь PWA - это прогрессивное будущее, которое гармонично сольется воедино с другими IT-сферами, которые тоже шагают семимильными шагами.

Читайте также