Прогрессивные
веб-приложения 2020
Часть 2
веб-приложения 2020
Часть 2
Продолжение обзора о возможностях одной из самых многообещающих технологий
В первой части обзора о PWA мы уже посмотрели, насколько активно использовалась технология в 2020-м, на каких платформах и как она была доступна, и обнаружили, что Apple опять хочет быть белой вороной, не признавая PWA как таковые (но всё-таки ими пользуясь). В продолжении поговорим о дизайне, распространении и возможностях прогрессивных веб-приложений.
Распространение
Android
Это наиболее распространенный сценарий установки для PWA, но с 2020 года будут возможны и другие методы.
Возможность установки PWA из пользовательского интерфейса не появится в Safari или Firefox
Исходя из последних новостей, в спецификации веб-манифеста (что такое веб-манифест — см. выше), вероятно, собираются удалить из рекомендации событие beforeinstallprompt, и оно станет доступно только для Chromium. С помощью этого события можно создать кастомную кнопку «установить» в интерфейсе сайта, чтобы вызвать диалоговое окно установки. Safari и Firefox публично заявили, что не заинтересованы в реализации этой опции, поэтому её не будет вне империи Chromium (Google Chrome, Samsung Internet, Microsoft Edge, Brave и так далее).
Оригинальный WebAPK minting service доступен только для Google Chrome
Говоря об установке из браузера на Android, WebAPK (запускает приложения на смартфоне или планшете без их фактической установки) предоставляет наилучшие возможности для Android. А значит, на десктопе в Google Play Store эти приложения можно скачать для установки только при использовании Google Chrome в качестве браузера, несмотря на публичное заявление о том, что Гугл хочет открыть платформу для других браузеров.
WebAPK использует облачный сервис для мгновенного создания APK (архивного исполняемого файла-приложения для Android) и его подписи криптографическим ключом, поэтому устройство Android устанавливает приложение без вывода сообщений, и оно выглядит как любое другое встроенное приложение.
У Samsung есть собственный метод WebAPK, доступный только на устройствах Samsung с установленным Galaxy Store (поскольку они также управляют ОС и браузером). Другие браузеры вроде Firefox, Brave или Edge не могут использовать этот способ из-за необходимости криптоподписей приложения на уровне ОС — из-за этого PWA, установленные из этих браузеров, могут не появляться в панели запуска, а иконки на главном экране будут иметь значок конкретного браузера.
WebAPK использует облачный сервис для мгновенного создания APK (архивного исполняемого файла-приложения для Android) и его подписи криптографическим ключом, поэтому устройство Android устанавливает приложение без вывода сообщений, и оно выглядит как любое другое встроенное приложение.
У Samsung есть собственный метод WebAPK, доступный только на устройствах Samsung с установленным Galaxy Store (поскольку они также управляют ОС и браузером). Другие браузеры вроде Firefox, Brave или Edge не могут использовать этот способ из-за необходимости криптоподписей приложения на уровне ОС — из-за этого PWA, установленные из этих браузеров, могут не появляться в панели запуска, а иконки на главном экране будут иметь значок конкретного браузера.
Когда вы используете браузеры без WebAPK, иконка приложения будет со значком браузера
Распространение в магазинах приложений
В 2019 году Apple заявили, что им не нужны прогрессивные веб-приложения в AppStore.
А значит, нельзя добавлять в AppStore приложения, которые загружали бы JavaScript на лету (для обновления работы приложения) без одобрения со стороны команды AppStore QA. Фактически, запрещается скрипт Service Worker или любой другой механизм обновления — да, API Service Worker и так недоступен в WebView, но есть некоторые реализации.
Справка
WebView — компонент платформы Android, который позволяет встраивать web-страницы в Android-приложения.
Да, вы можете создать приложение и загрузить его в AppStore, но помните, что любое обновление приложения не будет автоматическим, как на других платформах.
Google Play Store и Chrome по-тихому стали принимать PWA в свои магазины приложений. WebView при этом не используется, и тот же механизм Chrome (и, возможно, других браузеров) будет отображать приложение из магазина, включая совместное использование всех хранилищ и файлов cookie. Это возможно за счёт опции TWA — Trusted Web Activities. Вместо публикации URL-адреса вам нужно опубликовать PWA Launcher (фактически обернуть PWA в TWA). PWA Launcher — приложение, которое открывает браузер в автономном режиме и отображает URL-адрес PWA.
Google Play Store и Chrome по-тихому стали принимать PWA в свои магазины приложений. WebView при этом не используется, и тот же механизм Chrome (и, возможно, других браузеров) будет отображать приложение из магазина, включая совместное использование всех хранилищ и файлов cookie. Это возможно за счёт опции TWA — Trusted Web Activities. Вместо публикации URL-адреса вам нужно опубликовать PWA Launcher (фактически обернуть PWA в TWA). PWA Launcher — приложение, которое открывает браузер в автономном режиме и отображает URL-адрес PWA.
На саммите Chrome Dev команда браузера Chrome упомянула OYO Lite — PWA в Google Play Store, — впервые подтвердив, что TWA, отправленные за несколько месяцев до этого, можно использовать для распространения PWA в магазине приложений.
Trusted Web Activities были доступны в течение всего 2019 года, но Chrome публично не говорил об использовании этой функции для публикации PWA в Play Store в течение 10 месяцев. TWA, конечно, — штука замечательная, хотя о развитии и обновлении технологии сейчас ничего не говорят (например, были идеи связать нативный код с TWA).
TWA основан на открытом протоколе Custom Tabs (переименован в библиотеку браузеров Android Helper). Другие браузеры вроде Firefox и Samsung Internet скоро добавят поддержку TWA (уже доступна в Firefox Preview). Это означает, что пользователь сможет изменить движок (браузер), который хочет использовать для PWA, из Play Store.
TWA основан на открытом протоколе Custom Tabs (переименован в библиотеку браузеров Android Helper). Другие браузеры вроде Firefox и Samsung Internet скоро добавят поддержку TWA (уже доступна в Firefox Preview). Это означает, что пользователь сможет изменить движок (браузер), который хочет использовать для PWA, из Play Store.
Samsung Galaxy Store поддерживает отправку веб-приложений
Samsung в 2019 году добавил простой способ отправки PWA в Galaxy Store без пакинга — этого многие ждали. Функция по-прежнему выполняется вручную (отправка по адресу электронной почты), а PWA отображаются в разделе «веб-приложения» (хотя это и не совсем верно).
Поисковая индексация
В 2017 году Microsoft объявила, что Bing будет индексировать Progressive Web Apps с 2018 года, и они будут автоматически перечислены в Магазине Microsoft для Windows 10. Но проект провалился.
Is the Microsoft Store PWA automatic crawl and publish idea a failed project?
— Maximiliano Firtman (@firt) October 17, 2018
After six months only 30 PWAs are published; most of them are not PWAs now on other browsers, and a lot of them have deficient quality while a lot of good PWAs out there are not in the list. pic.twitter.com/oNvvDc1Vzp
Автор статьи в своём твите говорит, что с момента якобы автоматического появления приложений в Магазине Windows, было опубликовано всего 30 PWA, которые и PWA-то сложно назвать толком
И хотя официального заявления Microsoft о прекращении работы этой функции не было, каких-либо новых PWA, добавляемых в Магазин по этому механизму, замечено не было. Теперь разработчики должны создавать пакет APPX (APPX — стандартный формат для распространения приложений через Windows Store) для отправки PWA в магазин приложений вручную.
Для корпоративных клиентов
Добавление PWA для корпоративных пользователей. Веб-манифест игнорируется, и мы можем настроить только основные метаданные с веб-портала.
Это одна из функций, которая сегодня используется реже (и менее известна). В Android вы можете использовать Managed Google Play iframe для распространения PWA среди корпоративных пользователей — пользователи найдут ваш PWA в своем корпоративном магазине приложений. В Play Store будет использоваться служба создания WebAPK, чтобы создать APK из URL и предложить его пользователям. Жаль, что это можно увидеть в действии только для корпоративных пользователей, а не для всех остальных.
Со стороны Apple у нас есть файл Mobile Configuration, принятый iOS и iPadOS. Его можно создать, используя Apple Configurator 2, а сам файл будет включать Web Clips (иконки на главном экране). За иконкой будет прятаться URL-адрес и интерфейс, который и будет установленным PWA. Файл можно подписать криптографически или распространить без подписи. Если пользователь iOS/iPadOS примет его, то увидит значок PWA на главном экране.
Со стороны Apple у нас есть файл Mobile Configuration, принятый iOS и iPadOS. Его можно создать, используя Apple Configurator 2, а сам файл будет включать Web Clips (иконки на главном экране). За иконкой будет прятаться URL-адрес и интерфейс, который и будет установленным PWA. Файл можно подписать криптографически или распространить без подписи. Если пользователь iOS/iPadOS примет его, то увидит значок PWA на главном экране.
Предупреждение: кажется, это граничит с неизвестностью, но есть сомнения, что описанный механизм схож с тем, что используется при установке PWA из Safari. Нужно тестировать.
Возможности
С точки зрения возможностей PWA в 2020 году, экосистему можно разделить на три части:
Империя Chromium
С проектом Fugu и новыми возможностями в 2019 году появились новые API, а в 2020 году появятся и другие, которые расширят возможности веб-платформы для Google Chrome, Samsung Internet, Microsoft Edge и других.
Вот почему в рамках этой экосистемы вы найдете лучшие возможности, включая дополнительные механизмы фонового выполнения, доступ к оборудованию и платформе (такие как Контакты, WebNFC, контекстные меню для PWA, перечень экранов, режим приложения с вкладками, размещение приложения в окне). И конечно, те, что уже есть — WebAssembly, WebRTC, WebPush, WebAuthn, WebShare, WebXR, RequestPayment и т. д.
Есть ряд функций, которые развиваются в другом темпе — похоже, это связано с внутренней борьбой между Android/Play Store и Chrome в Google. Среди них: эволюция TWA, установка значка в омнибоксе или долгая история с поддержкой иконок на Android 8+. На десктопе Chrome, кажется, развивается быстрее.
Вот почему в рамках этой экосистемы вы найдете лучшие возможности, включая дополнительные механизмы фонового выполнения, доступ к оборудованию и платформе (такие как Контакты, WebNFC, контекстные меню для PWA, перечень экранов, режим приложения с вкладками, размещение приложения в окне). И конечно, те, что уже есть — WebAssembly, WebRTC, WebPush, WebAuthn, WebShare, WebXR, RequestPayment и т. д.
Есть ряд функций, которые развиваются в другом темпе — похоже, это связано с внутренней борьбой между Android/Play Store и Chrome в Google. Среди них: эволюция TWA, установка значка в омнибоксе или долгая история с поддержкой иконок на Android 8+. На десктопе Chrome, кажется, развивается быстрее.
Королевство WebKit
Команда WebKit (основавшая Safari) не стремится к большей власти в интернете, как Chromium, — они осторожны и больше заинтересованы в конфиденциальности и производительности, чем в новых возможностях. Сейчас уже доступны некоторые опции (WebAssembly, WebAuthn, вход через Apple, Apple Pay и RequestPayment). Другие пока под сомнением (доступ к оборудованию, WebPush или фоновое выполнение) и не похоже, что они будут в скором времени реализованы. Вот тут — дорожная карта на 2020-й: смотрите сами, что на самом деле находится на стадии рассмотрения или разработки.
Edge на краю света
Здесь есть набор движков, будущее которых под вопросом, в том числе Gecko (который реализует множество API из империи Chromium, но в мире PWA работает намного медленнее, и его развитие под сомнением), kaiOS (кажется, застрявшая в старой версии Gecko без перспектив на будущее), TWA и универсальные API-интерфейсы Windows Store.
Дизайн
В 2019 были актуальны три концепции, которые повлияют на дизайн PWA:
- Темные темы.
- Складные устройства.
- Технология Maskable icons.
Темная тема
Хотя содержимое вашего PWA можно изменить с помощью медиазапросов CSS, в спецификации веб-манифеста нет легкой настройки иконок или цвета темы для темного режима. Хотя на стороне iOS изображения при загрузке PWA могут легко заменяться на темную тему:
Here's something special with PWAs on iOS 13, dark mode splash screens! I think this is the only benefit of having HTML link tags with media attrs for PWA launch images on iOS ????
— Önder Ceylan ???? (@onderceylan) October 26, 2019
This is currently possible w https://t.co/ycBYqj8abq #pwa #ios #darkmode #GDESummit2019 pic.twitter.com/mL0pRbZz6k
«Вот нечто особенное у PWA на iOS 13 — заставки темного режима! Я думаю, что это единственное преимущество наличия тегов HTML-ссылок с медиа-атрибутами для запуска изображений PWA на iOS»
Складные устройства
Пока складные устройства все еще являются чем-то новым, PWA будут работать на совместимых устройствах. Они ни чем особо не отличаются от обычных устройств, но на некоторых платформах могут быть баги при ресайзе области окна. Появятся некоторые API, которые помогут PWA в будущем, например Windows Segments Enumeration API.
Технология Maskable icons
На Android 8+ изменилась работа иконок и появилась идея адаптивных значков, но только не для PWA — из-за этого большинство иконок на PWA выглядели плохо: центрировались в белом круге. На устранение бага потребовалось довольно много времени — теперь технология всё-таки доступна.
And we REALLY need maskable implemented soon, look how silly PWA icons look on Q pic.twitter.com/lE7MDP7eVi
— KΞNNΞTH C.⚡ (@kennethrohde) June 9, 2019
В цепочке горячих обсуждений иконок на Android есть пример, как они безобразно выглядят на рабочем столе
Chrome поддерживает её в альфа-версии, поэтому вскоре технология Maskable icons будет доступна и для остальных сервисов Гугла. Firefox также добавил поддержку этих иконок.
Инструменты
Инструменты для прогрессивных веб-приложений совершенствуются в последние годы. Ниже те, что доступны уже сейчас.
Генераторы Launcher-ов для сторов
В прошлом году появилось много инструментов для поддержки веб-разработчиков, желающих опубликовать PWA в Google Play Store без использования Android Studio и собственных инструментов с нуля.
pwa2apk был первым инструментом для преобразования PWA в PWA Launcher, готовый для Google Play Store
Первым подобным инструментом на рынке был PWA2APK от независимого издателя AppMaker, за которым последовали Microsoft PWA Builder и Llama-pack, а также CLI (в процессе разработки от команды Chrome).
PWA Builder
Инструмент Microsoft развивается, и в течение прошлого года был выпущен PWA Builder 2.0 с множеством новых функций. В течение года PWA Builder запустил pwa-install — веб-компонент, который управляет поведением beforeinstallprompt.
Веб-компонент <pwa-install> из PWA Builder в действии
В будущем инструмент может эволюционировать до чего-то более сфокусированного на веб-компонентах (включая поддержку пуш-уведомлений, интеграцию с другими инструментами с открытым исходным кодом вроде llama-pack или генератора ресурсов PWA и отказ от поддержки iOS).
Технология Maskable icons
Если у вас есть PWA, вы должны предоставить Maskable icon в веб-манифест. Не делаете этого? Тогда хотя бы используйте приложение Maskable.app.
Пришло время «замаскировать» ваши иконки PWA!
Lighthouse
Единственное недавнее большое изменение в Lighthouse для PWA — теперь он будет проверять иконку для iOS/iPad. Это важно, потому что сейчас предостаточно PWA без иконок для iOS, хотя Lighthouse про них говорил, что всё ок.
A strong statement that @____lighthouse considers iOS a valid PWA platform, apart from Android: there’s finally a test for Apple Touch Icon presence: https://t.co/bcfYvKQwcc ???? (CC: @firt)
— Thomas Steiner (@tomayac) July 23, 2019
Also more great features in “What's New In DevTools (Chrome 77)”: https://t.co/llohncivAq
Автор твита делится, что Lighthouse наконец-то стал считать iOS подходящей платформой для PWA и даже создал тест на соотвествие иконок.
I will add to this that if you are developing a PWA there is no professional reason not to provide at least an icon for iOS, even if you don't like how Apple implements the feature. Your users don't know and shouldn't care about browsers politics ???? https://t.co/aixMEYzGp5
— Maximiliano Firtman (@firt) May 3, 2019
Автор настаивал на этом изменении в Lighthouse (вы можете следить за обсуждением с командой Chrome в ветке ниже)
Фух, выдохните — вы осилили этот супер-сложный материал и теперь ещё на шажочек ближе к будущему мобильного интернета. Впервые узнали о PWA? Тогда загляните вот сюда.