Progressive web-apps: что это такое?

PWA-приложения все чаще и чаще можно встретить в смартфонах многих
пользователей. Потому что они вобрали в себя все самое лучшее от стандартного
приложения и мобильного сайта. Можно даже сказать, что такое приложение — это
что-то среднее между нативным приложением и обычным сайтом.
PWA — это Progressive Web Apps. Основная идея такого приложения — это
заставить ваш вебсайт функционировать как полноценное приложение для
гаджетов, но при этом оставаться полноценным сайтом.
Когда на сайте используется технология PWA-приложения, то пользователь может
установить себе иконку этого сайта на экране своего гаджета и взаимодействовать с
ним как со стандартным приложением.

PWA-приложения в быту

Progressive Web Apps -приложения пришли к нам в 2015-м году и медленно, но все равно набирают
популярность. Их создание преследует следующие цели:

1. Надежность. PWA-приложение должно загружаться моментально и это не должно
   зависеть от качества интернета.
2. Скорость. Обмен данными по интернету реализуется быстрее, чем у стандартного
   приложения.
3. Красота. Пользователю должно быть комфортно и приятно пользоваться таким
   приложением.

Все это достигается путем внедрения на любой сайт следующих технологий:

1. Service Worker. Это основа PWA. Именно это инструмент создает «слой» между
   интерфейсной и серверной частями сайта. И все взаимодействия браузера и PWA-
   приложения идет через этот слой. По своей сути — это JavaScript файл, в котором
   можно указать функциональность и логику взаимодействия между сайтом и
   браузером.
2. Web App Manifest. Это инструмент позволяет устанавливать иконку сайта на экран
   гаджета, а также определяет вид этой иконки, название приложения и прочие
   внешние параметры.
3. HTTPS. Это основное требование к PWA-приложениям, чтобы они передавались
   по протоколу https, при этом SSL сертификат может быть любым, даже бесплатным.
   Еще один важный момент, чтобы с PWA-сайта не было “урлов” на незащищенные
   веб ресурсы — это может спровоцировать, что браузеры не захотят отображать ваш
   сайт, как PWA-приложение.
4. App shell. Это «костяк» вашего сайта, то есть это то что остается от вашего сайта,
   если убрать с него весь контент и динамические элементы. Именно App Shell
   сохраняется «на клиенте», а вся остальная информация загружается уже при старте
   PWA-приложения с устройства. Поэтому эта «оболочка» должна оставаться
   визуально красивой, пока вся остальная информация будет загружаться.
5. Push Notifications. С технологией «пуш» знаком каждый пользователь интернета.
   Очень много сайтов используют эту технологию, чтобы предложить подписку на свой ресурс или уведомлять пользователей о самых свежих своих новостях. Эту
   технологию также можно задействовать в своем PWA-приложении.

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

Особенности Progressive Web Apps -приложения

Если взглянуть на PWA-приложения «шире», то можно увидеть, что их применение
— это «тихая» революция в применении браузеров. Ведь получается, что обычный
браузер приобретает функцию «виртуальной машины» для PWA-приложений, это как
Android для Андроид-приложений. Почему так? Потому что браузер сохраняет всю
информацию о PWA-ресурсе внутри себя и запускает это приложение в случае
необходимости. Таким образом получается, что информация сохраняется «на
клиенте», а сеть нужна будет только для обновления этой самой информации, когда
она изменяется на самом ресурсе.
PWA-приложения загружаются в любых известных браузерах, на любых гаджетах с
любым разрешением экрана. Технологии браузера будут предлагать сохранять
иконку PWA-сайта при повторном посещении этого сайта пользователями.

Преимущества PWA приложения перед нативными приложениями:

1. Нет необходимости пользоваться Google Play или AppStore, когда нужно что-то
   загрузить. Всю что нужно — это браузер и наличие интернета.
2. Занимают очень мало места на смартфоне пользователей, а это значит не нужно
   удалять лишние фото или приложения, чтобы установить иконку PWA. Вес такого
   PWA-приложения может быть меньше 1 Мб.
3. PWA-технология работает даже при отсутствии подключения к интернету.
4. При всех описанных выше преимуществах, в PWA-ресурсах доступны все
   свойства нативного приложения, даже отправка пуш-уведомлений на экран гаджета.

Примеры PWA приложения

С 2015 года лишь небольшой процент сайтов перешли на «прогрессивную» технологию PWA-приложения, но все равно примеры есть. И можно посмотреть «в
живую» на их реализацию.

Примеры Progressive Web Apps -приложения:

1. Washington Post. После запуска PWA выросло количество повторных посещений
   на 12% и сократилось время загрузки вебстраниц.
2. Walmart. После внедрения технологии, у этого интернет-магазина увеличилась
   посещаемость почти на 28%.
3. Book My Show. Это ресурс по продаже билетов увеличил конверсию своего
   ресурса на 70% после применения PWA-технологии.
4. AliExpress. Увеличилась конверсия пользователей на 10.2%
5. 5Miles. Также увеличилась конверсия и уменьшился процент отказов.
6. United eXtra Electronic. Увеличил процент возврата посетителей почтив 4 раза, от
   этого увеличились объемы продаж.

Возможно вам будет интересно почитать статью “Рефлексия Java кода с помощью библиотеки Java”

Заключение

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