Interested Article - Прогрессивное веб-приложение

Прогрессивное web-приложение ( англ. progressive web app, PWA ) — технология в web-разработке, которая визуально и функционально трансформирует сайт в приложение (мобильное приложение в браузере).

Статистика говорит о том, что 66 % пользователей не скачивают ни одного приложения в месяц (данные comScore от 2014 года — в среднем за три месяца). Примерно 85 % своего времени пользователь проводит в пяти любимых приложениях. Как правило, это мессенджеры, соцсети, видеохостинги.

При этом, мобильный браузер также во многом не является приоритетной формой выхода в Интернет. По данным , в 2017 году пользователи смартфонов и планшетов потратили 87 % своего времени на приложения — по сравнению с 13 % в браузере.

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

отправка push-уведомлений;
работа в режиме офлайн ;
доступ к аппаратному обеспечению устройства (с ограничениями);
установка ярлыка (иконки) на рабочий стол мобильного устройства, визуально не отличающегося от ярлыка нативного приложения, и пр.

Развитие технологии PWA

Технология PWA была создана корпорацией Microsoft в 2000 году ( HTA ), затем в Apple в 2007 году создали свой вариант HTML-приложений. Изначально приложения для оригинального iPhone разрабатывались именно на платформе web и были доступны в Safari — браузере для macOS и iOS. Однако успеха технология не имела по причине скудного user experience (poor user experience), и год спустя во второй версии операционной системы появился App Store. Тогда же началось активное развитие нативных приложений, отложившее развитие технологии PWA.

Несколько лет спустя другие платформы клонировали идею, например браузер MeeGo на Nokia N9.

Широкую известность технология PWA приобрела в 2015 году, благодаря расширению возможностей браузера Google Chrome и продвижению Service Worker и Web App Manifest. Тогда же дизайнер Фрэнсис Берримэн (Frances Berriman) и инженер Google Chrome Алекс Рассел (Alex Russell) придумали термин PWA.

В марте 2018 года произошли существенные изменения в области реализации web-стандартов. В обновлённой iOS 11.3 Apple добавила поддержку Service Worker в мобильную версию Safari. Тогда же поддержку добавили и в Safari для macOS.

В свою очередь, уже через месяц после Apple, в апреле 2018 года, Microsoft добавила поддержку Service Worker в свой браузер Microsoft Edge. Кроме того, в Windows 10 появилась возможность распространения PWA через Microsoft Store.

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

Внедрение PWA

Один из вариантов — воспользоваться готовым бесплатным фреймворком с открытым кодом. Среди них выделяются Ionic и Vue Storefront.

Ionic — фреймворк со встроенной библиотекой стандартных элементов и платным расширением возможностей. Он представляет собой SDK . В его состав входят наборы JavaScript - и CSS -компонентов, созданные на основе Angular 2 , Sass и Apache Cordova .

Vue Storefront — это бесплатный фреймворк для PWA интернет-магазина с открытым исходным кодом. Написан на Vue.js . Он имеет гибкие настройки и адаптивен, что делает его достаточно универсальным решением для интеграции с Pimcore/CoreShop, BigCommerce, PrestaShop, Shopware или, например, Magento через API .

Также одним из универсальных решений для внедрения PWA является фреймворк Quasar.

Помимо использования фреймворка, можно интегрировать технологию PWA, используя плагины. Для каждой CMS существует свой стандартный плагин. В этом случае прежде необходимо проверить, чтобы сайт отвечал требованиям:

Service Worker;
Application shell (оболочка для быстрой загрузки с Service Worker);
Web App Manifest;
Push Notifications;
SSL -сертификат для передачи данных по протоколу HTTPS .

Service Worker — это JavaScript-файл, который запускается в фоновом режиме как автономный сервис. Он не связан с DOM или web-страницами, работает на другом потоке и получает доступ к DOM с помощью API postMessage.

С точки зрения пользователя Service Worker позволяет выполнять такие действия, как, например, отправка push-уведомлений и предварительная загрузка материалов для просмотра в автономном режиме офлайн.

Application shell — это виртуальная оболочка. Подобно оболочке нативного приложения, она загружается при его запуске, а далее динамическая информация загружается на неё из сети.

Web App Manifest предоставляет информацию о приложении в текстовом JSON -файле. Необходим, чтобы web-приложение было загружено и визуально отображалось для пользователя аналогично нативному приложению.

Может содержать следующие элементы: background_color, categories, description, dir, display, iarc_rating_id, icons, lang, name, scope, screenshots, serviceworker, short_name, start_url, theme_color и пр. Все они отвечают за информацию, которую пользователь обычно видит после установки: название, цвет фона, создание иконки на экране смартфона и.т.д.

Push Notifications — технология для отправки push-уведомлений .

Помимо этого, PWA требует, чтобы все ресурсы сайта передавались по протоколу HTTPS .

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

PWA совмещает в себе свойства нативного приложения и функции браузера, что имеет свои преимущества:

PWA поддерживается наиболее популярными ОС: Windows , iOS , Android . При этом загрузить можно на пк, смартфон, планшет, терминал в торговом зале;
обновления добавляются разработчиками удалённо. Пользователи видят изменения и улучшения, но им не требуется скачивать эти обновления самостоятельно;
PWA индексируется Google и другими поисковыми системами ;
благодаря сценарию Service Worker, который запускается браузером в фоновом режиме, и стратегии кэширования , обеспечивается возможность работы офлайн;
Frontend отделён от Backend’a. Меньше времени и ресурсов тратится на разработку/переработку дизайна и логики взаимодействия PWA с клиентом;
PWA можно установить без «Google play» и App Store, а также вопреки запрету устанавливать приложения из неизвестных источников. Лояльно относятся к PWA и антивирусные программы. Одновременно с этим передача данных происходит по протоколу HTTPS, поэтому PWA безопасно;
с февраля 2019 года PWA можно добавлять в App Store и Google Play, давая пользователю возможность скачать приложение из привычного источника.

Недостатки PWA

Технология PWA не универсальна и имеет ряд недостатков:

не все устройства и не все операционные системы поддерживают полный набор возможностей PWA;
невозможно наладить активное участие пользователей iOS (например приложение может хранить локальные данные и файлы размером только до 50 Мбайт, нет доступа к In‑App Payments (встроенные платежи) и многим другим сервисам Apple, нет интеграции с Siri), поддержка iOS начинается с версии 11.3;
работа офлайн ограничена;
работу PWA может ограничивать доступ к аппаратным компонентам;
нет достаточной гибкости в отношении «специального» контента для пользователей (например программы лояльности);
при использовании PWA увеличивается расход заряда батареи мобильного устройства.

PWA и e-Commerce

Интернет-магазины активно используют PWA.

Более 60 % от мирового объёма розничных продаж в e-Commerce производятся через онлайн-каналы. К 2021 году ожидается рост этого показателя до 73 % (по данным ).

PWA предоставляет возможность работать с e-Commerce офлайн и повышать конверсию за счёт непрерывности сессий.

С PWA пользователь может управлять push-уведомлениями, входить в «Личный кабинет» в один клик, оплачивать покупки банковскими картами или системами Apple Pay и Google Pay.

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

Одна из платформ, доступных для внедрения PWA — Magento CMS. Технология PWA получила широкое распространение не так давно, однако уже накоплен опыт интеграции PWA с Magento.

Как правило, для ускоренного внедрения используется встроенное решение — PWA Studio. Однако в нём до сих пор не реализована технология SSR (server-side rendering), что позволило бы выдавать поисковой системе готовую страницу по запросу. В этом случае возможно использование Vue Storefront. Для поискового робота страница на Vue Storefront выглядит так же, как и обычный сайт — это важно для SEO.

Для микро бизнеса старт-ап предоставил полностью бесплатную платформу, где каждый желающий может создать свой PWA SPA сайт. Созданный на React это конструктор имеет встроенные возможности для создания Landing page и e-commerce. Полученный в конструкторе проект можно впоследствии установить на собственный хостинг.

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

Сеть Starbucks разработала PWA для сбора заказов в дополнение к обычному мобильному приложению. При почти одинаковом интерфейсе размер PWA оказался меньше на 99,84 %, что сделало его более популярным среди пользователей. В результате количество заказов через мобильный Интернет удвоилось и почти сравнялось с количеством заказов через десктоп ^{[

что?

]} .

Создание PWA принесло успех и для AliExpress. Показатель конверсии для новых пользователей повысился на 104 %. Функциональность PWA также помогла им генерировать вдвое больше посещений страниц за сеанс. Время сеанса увеличилось в среднем на 74 % во всех браузерах (по данным ).

PWA также пользуются такие известные компании, как , , , и др.

Среди российских компаний, специализирующихся на разработке PWA, можно отметить , , .

Отказ от поддержки

На протяжении многих лет PWA были связаны с несколькими проблемами конфиденциальности. Это привело к тому, что Apple заблокировала несколько функций PWA в Safari.

Тем не менее, другие браузеры, такие как Chrome и Firefox, продолжали активно поддерживать разработку PWA. Недавно Mozilla выпустила Firefox 85, в этой версии перестала поддерживаться важная функция настольных PWA.