Progressive web-apps: что это такое? Новый формат мобильных сайтов

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

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

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

 

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

PWA-приложения пришли к нам в 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-приложение.

 

Особенности PWA-приложения

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

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

 

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

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

 

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

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

 

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

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 раза, от этого увеличились объемы продаж.

 

Заключение

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

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