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

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

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

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

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

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

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

Технология PWA была создана корпорацией Apple в 2007 году. Изначально приложения для оригинального 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 (software development kit). В его состав входят набор 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 (Document Object Model) или 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, который запускается браузером в фоновом режиме, и стратегии кеширования обеспечивается возможность работы офлайн;
• front отделён от back’а. Меньше времени и ресурсов тратится на разработку и переработку дизайна и логики взаимодействия PWA с клиентом;
• PWA можно установить без «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 % (по данным Statista).

Функционал 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.

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

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

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

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