Пока вы раздумываете, выбрасывать ёлку или подождать до марта, мы перевели большой обзор о прогрессивных веб-приложениях от Максимилиано Фиртмана: как их использовать на разных платформах и операционных системах, что нового в функционале и способностях, как может измениться их дизайн и какие инструменты можно использовать уже сегодня для создания собственного PWA. Садитесь поудобнее, читать долго (поэтому материал опять в двух частях).

Прошло уже больше 12 лет, как Стив Джобс первым представил идею веб-приложений, которые выглядят и ведут себя как нативные приложения, и больше 4 лет с момента, как появился термин «PWA». Как выглядят прогрессивные веб-приложения в начале 2020 года? И что добавилось в их экосистему в 2019-м (о чем вы могли не знать)?

Определение PWA не высечено в камне, поэтому автор статьи трактует PWA как шаблон проектирования для разработки приложений с использованием веб-технологий с различными API-интерфейсами вроде Service Workers для управления активами, Web App Manifest для установки через браузер или Trusted Web Activities для Play Store.

Трудно получить информацию о том, сколько сайтов используют технологию PWA или как на неё реагируют пользователи. Есть ниши, в которых люди стремятся к приватности и удаляют нативные приложения (и где очень пригодятся PWA), но их число невелико.

В 2019 супер-популярным был сайт YouPorn, один из самых посещаемых сайтов в мире, работающий как PWA. Но информации об использовании технологии его юзерами нет. Больше информации о приложении есть здесь (по ссылке не порно, открывайте, не стесняйтесь).

Для разработчиков, владельцев веб-сайтов и пользователей пока ещё в новинку, что PWA можно устанавливать на рабочий стол. В 2019-м Starbucks и Uber рассказали о своих PWA, работающих с десктопа (например, для построения более простого потока заказов для Uber). Так что вполне вероятно, что в 2020-м мы будем наблюдать рост количества таких PWA (особенно если учесть свежую версию браузера Edge от Microsoft, в которой технология наконец-то будет поддерживаться).

Единственные данные об использовании PWA опубликовал Samsung на основании своего Samsung Internet browser:

В период с апреля по декабрь 2019 года упоминается минимум 80 000 различных доменов с минимум одним PWA внутри. Данные, конечно, приближенные, но по информации того же Samsung Internet browser прирост пользователей составил 6%. Так что можно считать это значение репрезентативным для всей сети.

Да, это не так масштабно, как 2,9 миллиона приложений в Play Store или 3,9 миллиона в App Store. Но при этом неизвестно, устанавливалось ли какое-то из этих приложений в последние 9 месяцев — так что сравнение не слишком справедливо.

Логичнее сопоставить 80 000 доменов с количеством издателей приложений в сторах — издателей насчитывается около 800 000 в Play Store и 792 000 в AppStore (если учитывать данные о разных доменах, а не о разных PWA). Тогда по сравнению с нативными приложениями доля PWA составляет всего 10%. Но постойте — есть данные, что 80% новых загрузок из маркетов приходятся на 1% издателей. Тогда где там ваши 800 000?

Прогрессивные веб-приложения имеют полную поддержку (включая Service Worker’ов) у 93% текущих интернет-пользователей (Service Worker — скрипт, работающий в фоновом режиме).

В 86% случаев PWA устанавливается как приложение: 82% — прямо из браузера и только 4% — из эпп-сторов.

PWA подходят для установки на Android, iOS, iPadOS, Windows 10 (и в планах на 10X), Windows 7, Windows 8. x, Xbox One, macOS, Linux 64 бит, Chrome OS и kaiOS. PWA не подойдут для смарт-часов, Smart TV, Apple TV, Chromecast, Android TV, PlayStation, автомобилей Tesla (да, у неё есть свой браузер), других игровых приставок и цифровых помощников вроде Facebook Portal, Nest Home или Amazon Echo. С гарнитурами VR/AR и Oculus номер тоже не пройдёт, хотя потенциал есть.

Ниже поговорим о платформах, куда PWA можно установить уже сегодня.

Мы можем установить Progressive Web Apps на устройства Android (телефоны и планшеты) следующими способами:

Установка из браузера
PWA доступны в Chrome (WebAPK), Firefox, Samsung Internet (только WebAPK на устройствах Samsung), UC, Edge, Opera, Brave, Baidu. В других браузерах также может быть эта опция (потому, что они чаще всего основаны на Chromium), но там слишком много ошибок.

Вы не можете установить PWA из браузера Facebook для мобильных устройств, превью-версии Firefox, WebView, пользовательских вкладок или Chrome для DayDream (режим VR). Кроме того, если на смартфоне нет отдельного приложения для домашнего экрана (которое работает в режиме киоска), при попытке установки PWA могут происходить странные вещи.

Для корпоративных клиентов
С помощью Managed Google Play iframe — сервиса от Play Store, который использует WebAPK и вообще не связан с Chrome (политика в Google I).

Магазины приложений
Для Google Play Store у приложения для Android должна быть хотя бы одна Trusted Web Activity (TWA — технология, которая позволяет добавить PWA в эпп-стор). Для добавления приложения в Samsung Galaxy Store нужно отправить URL приложения на адрес электронной почты, который будет использовать службу Samsung Minting WebAPK. В Amazon App Store есть способ публиковать веб-приложения также для планшетов Amazon Fire, но он основан на старой платформе, не поддерживающей все технологии PWA.

«Иконки веб-приложений для домашнего экрана» были с самых первых версий айфона, но только в версиях iOS 13 и iPadOS 13 появилась поддержка Service Worker и базовых частей веб-манифеста.

В свежих версиях iOS и iPadOS прогрессивные веб-приложения впервые получили базовый пользовательский интерфейс, соответствующий родным приложениям. Но пока всё ещё есть ошибки и баги, которые неодинаково работают в автономном режиме (PWA) и в Safari. Например, API WebRTC для работы с камерой (бывает нужно для чтения QR-кода). И хотя над этим якобы работают, ошибка актуальна последние 2 года.


Установка из браузера
Возможно только в Safari версии 11.1 и выше (версия 13+ улучшает user experience). Не получится установить PWA из Safari View Controllers (например, когда вы нажимаете на ссылку в приложении Twitter) или в любом псевдо-браузере вроде Google Chrome, Firefox, Edge или Facebook для мобильных устройств (нужно помнить, что в AppStore недоступны любые другие движки, кроме Safari, поэтому и все другие браузеры для Эппл не совсем браузеры).


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

Установка из браузеров в Windows 10
Google Chrome 70+ и Microsoft Edge (начиная с версии, выпущенной в январе 2020 года). Не получится установить PWA из Firefox, IE или Edge до 15 версии.

Установка из браузеров в Windows 7/8.x
Google Chrome 70+ и новый Microsoft Edge. Не получится установить PWA из Firefox, IE или Edge до 15 версии.

Установка из браузеров в WindowsX
Microsoft Edge (в версиях, начиная с января 2020 года).

Магазины приложений
Microsoft Store для Windows 10 (для настольных ПК и Hololens) и Xbox One. Не получится установить PWA в Windows 10 для мобильных устройств или любой другой устаревшей мобильной ОС от Microsoft.

Microsoft Edge (новая Chromium-версия) позволяет устанавливать любой сайт в качестве PWA, даже если он не соответствует критериям PWA или даже если это сайт 1991 года. Google Chrome также имеет эту опцию, но она скрыта: нужно создать ярлык на рабочем столе и выбрать, чтобы тот «открывался как окно» — не слишком очевидно, верно?

macOS
PWA можно установить только с помощью Google Chrome 73 + или будущей версии Edge из браузера. Safari для macOS и Firefox не поддерживают установку PWA.

Linux 64 bits
Только установка через Google Chrome 70+.

ChromeOS
Установка из браузера доступна из ChromeOS 67+; TWA недоступны в ChromeOS.

kaiOS
Только из эпп-сторов (kaiStore, JioStore). В основе kaiOS — старая платформа Gecko, но она имеет базовую поддержку Service Workers (документации недостаточно, чтобы понять, что на ней возможно, а что нет).

Большинство создателей браузеров приняли термин «прогрессивное веб-приложение», один только Apple все еще борется с PWA. Что 2 года назад, что сейчас.

Но в 2019 году от WebKit (движка, на котором собран браузер Safari) и команд Apple впервые можно было услышать термин PWA, хотя и в ином ключе — они старались де-легитимизировать технологию, утверждая, что будто её «не существует на самом деле». Чаще всего это можно наблюдать в обсуждениях некоторых спецификаций и твиттере:

Apple официально старается не использовать термин PWA, даже если он будет понятен большинству. Вместо него они говорят «Приложения HTML5» и «Веб-приложения для домашнего экрана».

Конечно, может показаться, что Apple вредит интернету и что «Safari— это новый IE». Да, у их команды есть собственные цели, которые не вписываются в планы империи Chromium. И, понятное дело, эти цели не ясны и не прозрачны для сообщества. Отсюда столько обсуждений.

И хотя термин PWA не поддерживается Apple и командой WebKit (движка в основе Safari), они развивают поддерживающую платформу в последние два года — благодаря этому какой-никакой UX для прогрессивных веб-приложений будет доступен на iOS и iPadOS с 2020 года.

Apple даже опубликовала некоторые PWA в 2019 (некоторые из них — даже не подозревая об этом):

Корпоративная политика обычно стоит за частью решений, которые крупные компании (как Apple и Google), принимают в отношении некоторых технологий вроде PWA. И похоже, Apple — не единственная компания, у которой есть определенные корпоративные проблемы с веб-приложениями, «похожими на нативные». У Google такое тоже было, когда Chrome выпустил Trusted Web Activity — механизм публикации PWA в Play Store. Но Гугл, в отличие от яблочной империи, старался сделать свои решения максимально продуманными и комплексными, чтобы облегчить им дальнейший рост.