Понятие Progressive Web App lications (PWA) на слуху давно, с весны 2018 года приложения этого класса поддерживаются всеми основными браузерами, однако распространенность технологий PWA несмотря на очевидные их «плюсы» пока очень низка.
Специалисты Google (в том числе и на Хабре) очень информативно и компетентно пишут о PWA, но их рекомендации полезны больше тем, кто уже знаком с предметом. Данная статья призвана показать, что Progressive Web Apps - это не сложно, и использовать эти технологии можно и нужно уже сейчас разработчикам любых сайтов.
Философия PWA
Для начала стоит заметить, что нет точного определения PWA приложения. Нельзя четко сказать, вот этот сайт PWA или нет. Это протяженная шкала, на которой могут располагаться и «хоумпейдж» второкурсника Пети, который добавил web app манифест, создающий иконку сайта на домашнем экране мобильника; и внешне ничем не отличимый от обычного новостной сайт, только пользователи которого могут сказать, что он удивительно быстрый и удобный, а всё потому что где-то внутри него бьется горячее сердце работника сферы услуг (service worker"a).Относительность PWA заложена в самом названии - «прогрессивное». Прогрессивный сравнительно с чем и в какой мере? Но эта относительность, на самом деле, очень хороша, потому что изучать технологии PWA и применять их в своих текущих проектах можно постепенно, без глобального ремоделинга и рефакторинга.
С другой стороны, идея у PWA есть, и идея достаточно четкая и мощная. И то, как неспешно она разворачивается, вполне может свидетельствовать о масштабности последствий.
Архитектура PWA
PWA - это веб приложение, созданное с использованием определенных технологий для достижения заданных целевых показателей.
Целевые показатели расшифровываются следующим образом:
Надежность
(Reliable) - приложение загружается и показывается сразу же, вне зависимости от статуса и качества сетевого соединения.
Быстрота
(Fast) - взаимообмен данными по сети происходит быстро, UI плавный и отзывчивый.
Привлекательность
(Engaging) - делает для пользователя опыт работы с приложением комфортным и приятным, побуждая его захотеть пережить его снова, и снова, и снова…
С точки зрения Google, именно это отделяет сейчас по внешнему виду и ощущениями (look and feel) веб-сайты от нативных приложений.
Другими словами, разработчику предлагаются инструменты (Service Worker, Push Notifications и др.) и указываются цели (сайт/приложение должен быть быстрым в загрузке, работать на слабом коннекте, не «лагать», работать оффлайн при необходимости). Насколько далеко продвинется по этому пути разработчик зависит только от него.
PWA и нативные приложения
То, что PWA внешне похожи на нативные приложения, является, скорей, косметическим решением (хотя и важным для пользователя с психологической точки зрения). А вот то, что они похожи внутренне (все основные ресурсы приложения можно хранить на клиенте, по сети будет передаваться только меняющийся контент) - это огромное достижение.Можно даже назвать это скрытой революцией. По сути, браузер используется как некая виртуальная машина, хранящая и запускающая в себе PWA приложение. Как Андроид является виртуальной машиной для андроид-приложений, так и браузер становится виртуальной машиной для PWA. Как нативное приложение обращается через файловую систему к своим ресурсам, так же и PWA обращается к своим ресурсам - пусть по HTTP, но хранящимся локально.
И в кои-то веки всё это одинаково работает на всех основных браузерах и на всех основных платформах.
Google атакует iOS
Есть мобильные приложения, которым нужно быть нативными (необходима производительность, доступ к системным ресурсам и др.), однако есть приложения, которые в своем функционале вполне реализуемы как PWA. Для них теперь:Не нужно писать различные версии для Android и iOS (и Windows)
- Не нужно регистрировать в Google Play и App Store и платить за это
- Открыт прямой выход на десктопДо нынешнего времени рынок мобильных приложений был закрыт для энтузиастов, которые могут написать полезную программу, но не могут/не хотят платить за ее размещение. И не хотят связываться с бюрократией Google и Apple по проверке приложения, после которой монопольные времена Microsoft вспоминаешь с тоской.
Сейчас эти барьеры сломлены. И сломала их Google. Учитывая то, что именно она является флагманом интернет-технологий, подобный заход на территорию iOS, скорей всего, вполне продуман и просчитан. Остается ждать бума PWA.
Различия PWA с нативными приложениями, конечно, есть - в основном, в правах доступа к ресурсам системы, но работа в этом направлении идет даже в поле чистого HTML5, а для PWA дополнительные привилегии проблемой не будут.
APK vs PWA
Из личного опыта можно вспомнить, как после перевода одного новостного сайта на работу с Service Worker, было решено отказаться от Андроид приложения, сделанного по функционалу сайта. И не столько потому, что его поддержка занимала человеческие ресурсы, а потому, что PWA версия, как ни удивительно, была быстрее, красивее и удобнее в работе, чем java приложение.
Технологии
Кратко рассмотрим основные движители PWA.Service Worker
Сердце PWA - Service Worker. Это проксирующий слой между фронтэндом и бэкэндом, находящийся в браузере. Все запросы браузера идут через него. Данное разделение на два независимых слоя позволило сделать переход обычного веб сайта в PWA максимально простым.Из хранилищ у Service Worker"a есть доступ к Cache Storage для web ресурсов, и IndexDB для данных. Но, самое главное, полная свобода для реализации бизнес логики.
Можно, например, принять запрос от браузера, проверить состояние сети, взять данные из хранилища, произвести с ними операции и вернуть некий результат обратно в браузер - который будет думать, что ответ ему пришел от сервера. Или не будет - как разработчик захочет, так и сделает. Два браузерных слоя (клиентский фронтэнд и Service Worker) позволяют писать полноценные приложения.
В тоже время, для большинства сайтов будет достаточно кэширующей функциональности Service Worker"a, чтобы превратиться в PWA.
PWA не зависит ни от каких-то фреймворков, это чистый javascript, хотя даже специалисты Google на Хабре зачем-то советуют использовать библиотечные генераторы кода. Service Worker прекрасно пишется руками, и это нужно, чтобы хорошо понимать и контролировать логику работы твоего приложения.
С программистской точки зрения Service Worker представляет собой javascript файл, подключаемый в html коде страницы. В нем разработчик определяет логику работы с приходящими из фронтэнда запросами и другую функциональность.
HTTPS
PWA требует, чтобы все ресурсы сайта передавались по HTTPS протоколу. SSL сертификат можно получить бесплатно, некоторые хостеры это делают за вас. Но критично, чтобы на сайте не было ссылок на незащищенные ресурсы - некоторые браузеры просто не будут отображать сайт в этом случае.Основная встречаемая в таких случаях проблема - картинки. Часто редакторы или комментаторы ставят в материал ссылки на картинки из интернета, иногда они автоматически туда (в материал) попадают. Необходимо картинки пересохранять или к себе, или на сервис с доступом по HTTPS.
Application Shell
App shell - это просто скелет графического интерфейса, шаблон. Для примера, возьмем средний сайт c хидером, двумя колонками и прочим. Грубо говоря, вырежем из него контент текущей страницы и всю динамическую информацию, оставшаяся статика - app shell.Суть в том, что app shell хранится на клиенте и загружается при запуске приложения, а затем уже в него грузится из сети динамическая информация. И пока она грузится, app shell должен выглядеть красиво («лоадеры» на местах и т.п.)
Данную архитектуру сайта - загрузку контента и иной динамичной информации через ajax вызовы - можно продумать и реализовать на сайте заранее, тогда переход в PWA будет совсем несложным.
App shell - это как оболочка нативной программы. Смотрите на свое PWA как на нативную программу, и многое станет проще.
Web App manifest
JSON файл, декларативно определяющий для браузера название приложения, иконку, как будет выглядеть PWA (fullscreen, standalone и др.) и некоторые другие параметры. Позволяет «установить» PWA как отдельное приложение на домашний экран смартфона.Push Notifications
Если посерфить интернет с Chrome DevTools, открытым на вкладке Application, то можно увидеть, как мало сайтов пользуют PWA технологии. А 90% тех, что пользуют, делают это только ради Push Notifications.Пока что это самая популярная и самая злоупотребляемая технология PWA - за последние несколько месяцев число сайтов, заходя на которые первым делом ищешь «мышкой» кнопку «Блокировать» на предложение получать самые свежие новости, выросло, такое ощущение, многократно, а само желание навязать свой Push похоже на Spam.
А ведь можно же предлагать подписку на второй или третий заход пользователя на сайт, когда уже понятно, что он тут не случайно.
- Перевод
Видели когда-нибудь кнопку «Добавить на главный экран», которая появлялась на экране вашего Android-смартфона, когда вы просматривали какой-нибудь сайт? Если щёлкнуть по этой кнопке, то на телефон, в фоновом режиме, будет установлено некое приложение, значок для запуска которого попадёт на главный экран. Теперь это приложение можно запустить и работать с сайтом почти так же, как и раньше, но только в обычном телефонном интерфейсе.
То, о чём мы говорим, представляет собой мобильное приложение, которое было загружено из веб-приложения. Причём, как можно заметить, для установки такого приложения вам не приходится взаимодействовать с Play Market. В результате, установка таких приложений упрощается настолько, насколько это вообще возможно. Однако это - далеко не самое интересное. Запуская подобные программы, вы получаете возможность работать с теми данными, которые они выводят, даже без подключения к интернету. Они позволяют взаимодействовать с веб-страницами в оффлайне. Ну не замечательно ли это?
Вероятно, вы уже поняли, что мы только что говорили о так называемых прогрессивных веб-приложениях (Progressive Web App, PWA). Такое приложение можно установить прямо из окна браузера, значок для его запуска будет выглядеть как значок обычного мобильного приложения, и оно, как многие мобильные приложения, позволит вам работать с ним без подключения к интернету.
Кнопка «Добавить на главный экран»
Поговорим теперь о том, что такое «прогрессивность» в применении к веб-приложениям. Предлагаю познакомиться с ними поближе, выяснить, чем они отличаются от обычных веб-приложений, и, кроме того, хочу рассказать вам о том, почему я полагаю, что PWA лучше традиционных мобильных приложений.
Что такое прогрессивное веб-приложение?
Термин «Progressive Web App» придумали Алекс Рассел и Франсес Берриман. По словам Алекса, прогрессивные веб-приложения - это всего лишь веб-сайты, которые принимали правильные витамины. То, что лежит в основе PWA, нельзя назвать новым фреймворком или новой технологией. Это, фактически, набор передовых методов разработки, которые позволяют сделать так, чтобы поведение веб-приложения оказалось бы очень похожим на поведение классических настольных или мобильных приложений.
Значок PWA на главном экране
PWA дают пользователю новые удобные возможности посредством прогрессивных улучшений приложений. В целом, это означает, что PWA, на мобильных устройствах разных поколений, будут работать примерно одинаково. Конечно, некоторые возможности обычных телефонных приложений могут быть им недоступны, но такие приложения обычно работают на разных устройствах так, как они и должны на них работать.
Зачем нужны прогрессивные веб-приложения?
Прежде чем разобраться с тем, зачем вообще нужны PWA, поговорим о том, с какими проблемами мы сталкиваемся, проектируя веб-приложения и обычные мобильные приложения.- Низкая скорость подключения к интернету. Возможно, там, где вы живёте, с быстрым интернетом всё в порядке, поэтому данная проблема вас не затрагивает. Но 60% населения Земли всё ещё пользуется 2G-интернетом. Даже в США некоторым пользователям доступны лишь скорости, сравнимые со скоростями обычных модемов, использующих простые телефонные линии.
- Медленная загрузка веб-сайта. Если сайт загружается очень медленно, знаете, сколько пользователь ждёт, прежде чем нажать на кнопку закрытия окна? Три секунды! 53% пользователей уходят со слишком медленных сайтов.
- Трудоёмкость установки приложений. Пользователи не стремятся устанавливать обычные мобильные приложения. Средний пользователь устанавливает 0 приложений в месяц.
- Вовлечение пользователей в работу с приложением. Пользователи тратят большую часть времени в обычных мобильных приложениях, но охват пользователей мобильными веб-приложениями примерно в три раза больше. В результате, большинство пользователей не особенно активно вовлечено в работу с приложениями, хотя эти пользователи и тратят 80% времени в трёх мобильных приложениях, которыми они пользуются чаще всего.
PWA в действии
Есть множество причин использовать PWA, здесь хотелось бы выделить основные возможности, которые они дают. Если описать эти возможности одним словом, то тут подойдёт аббревиатура FIRE (Fast, Integrated, Reliable, Engaging), то есть, прогрессивное веб-приложение должно быть быстрым, интегрированным в рабочую среду устройства, надёжным, и иметь средства вовлечения пользователей в работу с ним.
- Если говорить о скорости, то PWA, на всех этапах взаимодействия с ними пользователя, работают быстро. Они быстро устанавливаются, быстро запускаются, быстро работают. Так как PWA позволяют кэшировать данные, повторный запуск таких приложений происходит очень быстро, даже без обращения к сетевым ресурсам.
- Интегрированность PWA в среду устройства выражается в том, что такие приложения ведут себя как обычные приложения. Значок для их запуска находится на главном экране, они умеют работать с push-уведомлениями, они могут пользоваться теми же функциями устройства, что и обычные приложения. В результате, работая с прогрессивными веб-приложениями, пользователь не чувствует, что покидает привычную среду.
- Надёжность интегрированных веб-приложений базируется на том факте, что они могут нормально работать и без подключения к сети, за счёт возможностей по кэшированию данных средствами сервис-воркеров.
- Возможности PWA по вовлечению пользователя в работу с ними основаны на том, что они могут отправлять пользователям уведомления. Это позволяет держать пользователя в курсе интересных ему событий, связанных с приложением, и привлекает его к работе с этим приложением.
Как создать прогрессивное веб-приложение?
Компания Google опубликовала контрольный список по разработке прогрессивных веб-приложений. Рассмотрим минимальные требования к приложению, соответствие которым позволяет называть его PWA.▍1. Манифест приложения
Манифест PWA - это файл manifest.json примерно такого содержания: {
"name": "Trending Meme",
"short_name": "Meme",
"theme_color": "#2196f3",
"background_color": "#2196f3",
"display": "standalone",
"orientation": "portrait",
"Scope": "/",
"start_url": "/",
"icons": [
{
"src": "images/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "images/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "images/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "images/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}
Перед нами - обычный JSON-файл, который содержит мета-информацию о веб-приложении. Здесь есть данные о значках приложения (один из них пользователь видит на главном экране после установки приложения), о фоновом цвете приложения, о его полном и сокращённом названии, и так далее. Этот манифест можно написать самостоятельно, а можно использовать специальный инструмент , автоматизирующий создание таких файлов.
Сайт, облегчающий создание файла manifest.json
▍2. Сервис-воркеры
Сервис-воркеры - это воркеры, управляемые событиями, которые выполняются в фоне приложения и действуют в роли посредников между приложением и сетевыми ресурсами. Они могут перехватывать сетевые запросы и кэшировать информацию для приложения. Их можно использовать для загрузки данных, которые планируется использовать для обеспечения работы приложения в оффлайновом режиме. Сервис-воркеры представляют собой JavaScript-программы, которые перехватывают обработку определённых событий и выполняют некие задачи.Вот пример файла serviceworker.js .
Self.addEventListener("fetch", event => { // кэширование данных для работы без подключения к сети const {request} = event; const url = new URL(request.url); if(url.origin === location.origin) { event.respondWith(cacheData(request)); } else { event.respondWith(networkFirst(request)); } }); async function cacheData(request) { const cachedResponse = await caches.match(request); return cachedResponse || fetch(request); }
▍3. Значки
Значки используются для запуска установленных на устройство PWA. Вышеупомянутый сайт, который помогает составлять файлы-манифесты, позволяет автоматически сгенерировать набор значков приложения на основе единственного загруженного на этот сайта графического файла размером 512x512 пикселей. Сгенерированные файлы сохраняются в формате.png .▍4. Безопасность
Для того чтобы некое приложение можно было бы называть PWA, оно, кроме прочего, должно поддерживать обмен данными по защищённому каналу связи с использованием HTTPS. SSL-сертификат для организации такого соединения несложно получить, воспользовавшись возможностями сервисов вроде Cloudflare и LetsEncrypt. Защита приложений - это не только то, что в наши дни прямо-таки обязательно, это ещё и способ продемонстрировать пользователю надёжность приложения и выстроить с ним доверительные отношения.Итоги
В этом материале мы поговорили о прогрессивных веб-приложениях, рассказали о том, зачем они нужны, какие проблемы они решают, какие требования к ним предъявляются. Так же здесь мы затронули тему их разработки, в частности, поговорили о манифесте PWA, о сервис-воркерах, о значках приложений, и о том, что их нужно защищать, используя HTTPS. Технологию PWA нередко воспринимают как нечто, относящееся исключительно к Android-смартфонам, и до недавнего времени такая точка зрения вполне имела право на жизнь. Однако, учитываяЧто такое Progressiwe Web Applications (PWA)?
Говоря простым языком, PWA — это сайт, который пользователь может добавить на рабочий стол телефона и взаимодействовать с ним в автономном режиме.
А если немного усложним, то PWA — это группа приложений, которая строится на базовом стеке Web технологий (JS+HTML+CSS) и позволяет упростить взаимодействие с сайтом до уровня нативного мобильного приложения. Главная задача технологии — увеличить конверсию страницы, упростить взаимодействие с ней мобильного пользователя.
Технология PWA является продолжением AMP. Более того, AMP страницы можно «прокачать» до стандартов Progressive Web Applications.
Типичные требования к PWA:
- Адаптивность — корректная работа на любых устройствах
- Автономность — при использовании Service Worker приложение должно работать в автономном режиме
- Удобство — пользователю должно быть удобно взаимодействовать с приложением на своем устройстве
- Безопасность — должна быть защита от перехвата и подмены данных
- Легкость в установке — пользователь должен иметь возможность установить PWA сайт на свое устройство за пару кликов
- Кроссплатформенность — технология разработки не зависит от платформы (android или iOs)
Недостатки PWA
- Технология новая, поэтому ещё не получила широкого распространения
- Apple пока не выразила намерений по поддержке технологии
Зачем PWA Бизнесу?
Исследования показывают, что пользователи сейчас очень неохотно ставят полноценные приложения на свои устройства.
Именно поэтому у Progressive Web Applications есть большое будущее, как для электронной коммерции, так и для крупных новостных порталов. Тем более, что внедрение технологии дает потрясающие результаты!
Пример PWA приложения
- AliExpress использует PWA и увеличил конверсию примерно на 104%.
- Konga оптимизировали свой ресурс, сократив на 92% количество первоначально загружаемых данных.
- The Washington Post после внедрения PWA увеличил посещаемость своих статей на 12%, ускорив загрузку с 8 секунд до 80 миллисекунд
Представьте, что ваш сайт взаимодействует с пользователем как приложение. То есть пользователь может установить его на любой гаджет, получать уведомления и работать с ним (даже без интернет-соединения). Это уже реальная технология, которую активно продвигает Google, и в этом посте я расскажу вам о ней в деталях.
Progressive Web Apps (PWA) Google анонсировал еще в 2015 году. Этот формат создания мобильных сайтов привлек внимание благодаря относительной простоте разработки и почти мгновенному взаимодействию с пользователем. Уже в мае 2016 на конференции разработчиков Google I/O The Washington Post продемонстрировал свой мобильный гибридный сайт-приложение .
И это только начало. Microsoft уже занимается решением задачи, как добавить прогрессивные веб-приложения в Windows Store. Google в мае 2016 озвучил длинный список идей для развития прогрессивных приложений. И то, что поисковые системы будут уделять особое внимание PWA в будущем, кажется неизбежным.
Присмотритесь: возможно, прогрессивные приложения — ваш золотой билет в SEO-продвижение будущего.
Зачем бизнесу создавать прогрессивные веб-приложения и почему именно сейчас?
Начнем со второго вопроса. Издание Recode недавно опубликовало исследование , которое подтвердило то, что уже у многих специалистов крутится на языке: бум традиционных приложений прошел, а процент тех, кто деинсталлирует приложения, продолжает расти.
Comscore недавно сообщил , что большинство пользователей смартфонов скачивают ноль приложений в месяц. Лишь около одной трети владельцев смартфонов скачивают хоть что-то, и большинство из них загружают от одного до трех приложений в месяц.
Почему прогрессивные веб-приложения изменят ситуацию?
1. Пользователи могут переходить на прогрессивные приложения из ссылок в соцсетях, во время просмотра веб-страниц или непосредственно из выдачи. Согласитесь, это гораздо удобнее, чем конкурировать за просмотры с двумя миллионами доступных приложений на IOS App Store или Google Play Store.
2. Предложение установить прогрессивное приложение показывается только тогда, когда веб-приложение отвечает определенным критериям, и пользователь продемонстрировал интерес посредством повторного посещения сайта.
3. Установка приложения происходит мгновенно. Все компоненты, которые требуют длительной загрузки, уже были установлены в кэш при первом посещении сайта пользователем.
4. Прогрессивные приложения гораздо меньше по размеру, так как они эффективно используют возможности браузера.
5. Всплывающие уведомления, работа в автономном режиме и все другие функции прогрессивного приложения будут работать, даже если посетитель никогда его не устанавливал.
6. Обычные приложения могут быть использованы только на той платформе, для которой они созданы. Вы не можете использовать приложение на вашем компьютере так же, как на Android или iOS устройстве. Кроме того, использовать приложение могут только те, кто его установил.
Прогрессивные веб-приложения будут работать в любом месте, независимо от того, установлены они или нет. Они будут работать даже на платформах, которые еще не поддерживают все функции PWA — даже со старых ПК с примитивными браузерами к ним можно будет получить доступ. Правда — с ограниченным функционалом.
Вы можете возразить, что существуют классические приложения, которые поддерживаются на разных платформах. Но поддержка таких приложений обходится в копеечку. Progressive Web Apps могут снизить эти затраты, сведя все к обеспечению одного приложения, которое работает на любой платформе.
7. Когда вы не в магазине приложений, то не ограничены правилами App Store и не должны платить 30% от объема продаж.
Недостатки Progressive Web Apps
1. PWA — новая технология, поэтому существует не так много примеров реализации этого формата. Те, кто рискнет, станут первопроходцами.
2. На момент публикации прогрессивные веб-приложения не доступны повсеместно. Да, Chrome и Opera начали поддержку прогрессивных Web Apps. Firefox и Microsoft взяли на себя обязательство по поддержке. Пока намерений по поддержке этого формата нет только у Apple.
Впрочем, ни одна из этих причин не является препятствием для тестирования PWA как формата уже сегодня.
В чем именно «прогрессивность» нового формата?
Под прогрессивностью в данном случае имеется в виду то, что приложение с ограниченным функционалом сможет работать на любом гаджете, в любом месте, но при переходе пользователя на более совершенное устройство или браузер, расширяются функции PWA. И при всем этом его не надо загружать многократно на каждое из устройств.
The Washington Post создали Progressive Web App, который установлен в фоновом режиме, когда люди читают их AMP страницы в результатах поиска Google. В результате количество посещений статей выросло на 12%. От загрузки статей по 8 секунд в 2013 они пришли к 80 миллисекундам в Progressive Web App.
Почему стоит поторопиться?
Сегодня пользователю достаточно дважды посетить ваш сайт, чтобы получить от браузера предложение установить PWA. Но так как количество внедрений технологии будет расти, то и частота предложений по установке тоже изменится, и таких предложений будет меньше. Все больше компаний начинают осваивать Progressive Web Apps и вскоре станет сложно выделиться из толпы.
Поразительно, как быстро меняются технологии. Еще вчера все удивлялись стремительному развитию нативных мобильных приложений, а сегодня мы наблюдаем новую эволюцию.
Никто не мог и предположить, что курс развития мобильных приложений изменится так кардинально. Так о чем же речь?
В 2015 году компания Google заявила о создании новой технологии - прогрессивных веб-приложениях/Progressive Web App (PWA). Однако тогда мало кто воспринял это новшество всерьез. Тем не менее сегодня PWA становится популярным трендом.
Так что это за технология - Progressive Web App? Прогрессивные мобильные приложения - это продукт совместной эволюции мобильного сайта и нативного приложения. Проще говоря, гибрид, вобравший в себя самое лучшее от своих предшественников.
Теперь простота установки и открытия мобильного сайта и функционал нативного приложения (push-уведомления, gps-навигация и другие нативные функции) стали единым целым.
Благодаря данной технологии выигрывают и заказчики, и пользователи.
Разработать такое приложение можно в несколько раз дешевле и быстрее, чем нативное, что открывает множество новых возможностей для небольших компаний.
Для пользователей преимущества не менее значимы: не занимает место в памяти телефона, нет необходимости скачивать приложение из магазинов.
Одно из самых важных преимуществ PWA перед нативными приложениями - это отсутствие посредника в лице магазинов приложений App Store и Google Play. Технология прогрессивных веб-приложений это лишнее звено полностью исключает.
Отсутствие магазинов приложений для разработчиков означает, что им больше не нужно руководствоваться установленными правилами и политикой Apple и Google, а для пользователей - упрощение процедуры установки. Для того чтобы открыть PWA, достаточно перейти на сайт компании с мобильного устройства, и привязанное веб-приложение откроется автоматически.
При этом можно установить иконку такого приложения на экран телефона. Для этого в автоматически открывшемся диалоговом окне нужно согласиться с установкой.
Такой способ установки разительно отличается от установки обычного (нативного) приложения. По сути, иконка PWA - это картинка со ссылкой на веб-приложение, открывающееся через браузер, с помощью которой пользователь может запустить понравившееся приложение в любое время. Еще одним важным отличием PWA от «тяжелого натива» является то, что PWA почти не занимает места в памяти телефона пользователя.
Но преимущества преимуществами, а что же на практике?
Пока скептики смотрят в сторону новой технологии с настороженностью, компании-первопроходцы испытывают продукт мобильной эволюции на собственном опыте.
Так, одной из первых компаний, примеривших на себя PWA, стала Lancôme - известный французский косметический бренд.
