Progressive Web Apps пришли на iOS 🚀

В iOS 11.3 Apple незаметно добавила поддержку базового сета технологий Progressive Web Apps (PWA). Настало время посмотреть, как они работают, каковы их плюсы и минусы и что вам нужно знать, если у вас уже есть опубликованное PWA.

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

В процесс при этом не вовлечены магазины приложений, только Edge/Windows 10 сейчас размещает PWA в магазине. Это значит, что теперь вы можете устанавливать приложения на iOS без необходимости получать одобрение App Store. Apple не упомянула об этой возможности только потому, что не хотела запутать пользователей. Даже в заметках о релизе Safari не упоминалось об этой возможности.

Но ведь Apple и создала PWA?

До того, как команда Chrome придумала термин PWA, идея принадлежала Safari и оригинальной iPhone OS. В 2007 Стив Джобс анонсировал “ещё одну вещь” на WWDC: разработка приложений для оригинального iPhone была основана как раз на веб-технологиях. Напомним, что App Store не было в оригинальном плане, а нативный SDK не был доступен в течение первого года существования устройства. С точки зрения Apple, даже сегодня PWA — это просто “веб-приложение с домашнего экрана”, а иконку называют WebChip. Можете посмотреть мою презентацию с Fluent Conference, я упоминаю это на 10:50.

Эта идея не получила внимания 11 лет назад, и Apple перестала обновлять платформу, поэтому даже спустя десятилетие в ней есть баги и она неоднородна. Однако через несколько лет идею скопировали другие платформы, включая браузер MeeGo на Nokia N9 и Chrome на Android.

Chrome помог развить технологию для лучшего пользовательского опыта благодаря спецификациям Service Worker и Web App Manifest. Начиная с iOS 11.3 Apple также поддерживает эти две спецификации, как и Chrome, Firefox, Samsung Internet, UC Browser и Opera. Другие браузеры для компьютеров поддерживают Service Worker, но работа над поддержкой Web App Manifest ещё ведется.

Приложение не проходит тест качества App Store, верно?

Да, все правильно. Но приложение будет работать на основе модели безопасности браузера или веб-платформы. Это означает, что вы можете “публиковать” приложения, которые не будут одобрены в магазине, например, внутреннее приложение для ваших сотрудников, но у вас не будет доступа к чисто нативным функциям: FaceID на iPhone X или ARKit. Либо вам придется подождать, пока веб-платформа начнет поддерживать эти новые функции.

PWA может запускаться внутри Safari, как любой сайт, или в полноэкранном режиме, как любое другое приложение в системе. Если вам интересно, используют ли PWA Web View, то это не так для Safari или установленнии иконкой, но Web View используется при работе в других браузерах или в приложении Facebook.

Возможности PWA на iOS

С Web Platform на iOS вы можете получить доступ к:

• геолокации
• сенсорам
• камере
• аудиовыходу
• синтезу речи (только с подключенной гарнитурой)
• Apple Pay
• WebAssembly, WebRTC, WebGL и другим экспериментальным функциям.

Ограничения по сравнению с нативными приложениями

• Приложение может хранить данные и файлы не больше чем на 50 МБ.
• Если пользователь не использует приложение несколько недель, iOS удалит все файлы приложения. Иконка будет доступна на домашнем экране, но приложение будет скачиваться снова.
• Отсутствие доступа к некоторым функциям: Bluetooth, серийному номеру, Beacons, Touch ID, Face ID, датчику высоты, информации о батарее.
• Отсутствие работы в фоновом режиме.
• Отсутствие доступа к приватной информации (контакты, background location) и к нативным социальным приложениям.
• Отсутствие доступа к платежам внутри приложения и другим сервисам Apple.
• На iPad отсутствует доступ к оконному отображению, PWA будет занимать весь экран
• Отсутствие пуш-оповещений и интеграции с Siri

Что PWA могут на Android, но не на iOS

• На Android вы можете хранить более 50 МБ.
• Android не удаляет файлы, если вы не используете приложение, но файлы могут быть удалены при отсутствии свободной памяти. Если пользователь часто использует PWA, приложение может запросить постоянное место для хранения.
• Доступ к Bluetooth для устройств BLE.
• Web Share для доступа к собственному диалоговому окну
• Распознавание речи
• Фоновая синхронизация и пуш-оповещения
• Баннер веб-приложения, который пригласит пользователя установить приложение
• Ограниченная кастомизация Splash Screen и ориентации
• С WebAPK и Chrome пользователи не могут установить больше одной копии PWA
• С WebAPK и Chrome PWA появляются в настройках, и вы можете видеть статистику использования данных, на iOS все находится в разделе Safari
• С WebAPK и Chrome PWA управляет запросами для своего URL, поэтому ссылка на PWA откроется в отдельном окне, а не в браузере.

Что PWA могут на iOS, но не на Android

• Пользователи могут менять название иконки перед установкой
• Пользователей можно настраивать в профиле конфигурации, поэтому корпоративные пользователи могут получать ссылки на PWA от компании. Safari называет эту функцию WebChip, но это не соответствует Web App Manifest.

Как установить PWA без App Store?

Это одна из самых сложных вещей на iOS, так как Safari не будет отправлять приглашения (как Web App Banners в Android). Поэтому пользователю нужно будет перейти к URL вашего PWA в Safari, а потом вручную нажать иконку “Поделиться” и “Добавить на домашний экран”. Ничто не будет указывать на то, что этот сайт является PWA. Дополнительные браузеры, доступные в App Store, такие как Chrome, Firefox, Brave или Edge, не будут иметь возможности устанавливать PWA или использовать Service Workers.

Приложение будет выглядеть, как любая другая иконка на экране. Для неё не будет доступно меню 3D Touch. И если вы установите то же самое PWA снова, у вас будет еще одна иконка, указывающая на то же приложение.

Во многих веб-приложениях есть ссылка на установку нативного приложения из App Store, и она остается в PWA, как в примере с Tinder:

У меня уже есть PWA, будет ли оно работать на iOS?

Ваше PWA будет сразу доступно для установки после того, как ваши пользователи обновят систему до iOS 11.3. Вам не нужно будет подстраиваться под iOS, но все не всегда будет работать, как задумано.

Я писал об этом статью раньше, и многие баги и сложности бета-стадии остались в финальной версии.

Что не будет работать

• display: fullscreen и display: minimal-ui не будут работать на iOS, fullscreen будет вызывать новое окно, а minimal-ui станет ссылкой на Safari. Вы можете приблизиться к fullscreen (панель статуса будет над вашим приложением) при помощи расширения экрана cover-fit.
• Если вы полагаетесь на фоновую синхронизацию, вам нужно будет иметь решение для резервного копирования.
• Нет возможности зафиксировать ориентацию PWA.
• theme-color для стиля панели статуса не будет работать; вы можете использовать метатег для белых или черных панелей статуса, а также трюк с CSS/HTML для эмуляции theme-color.
• Если ваше PWA не поддерживает жесты или кнопки в интерфейсе, пользователь не сможет переключаться между экранами.

• Ваша иконка для Android будет ужасно выглядеть на iOS, так как Apple не поддерживает прозрачные иконки.

• iOS берет иконки не из Web App Manifest, а по ссылке из apple-touch-icon. Если вы не предоставите ссылку, вместо иконки будет использоваться скриншот.
• Splash screen отсутствует, поэтому многие цветовые свойства из манифеста игнорируются.
• События из манифеста не будут работать, поэтому если вы отслеживаете установку через эти каналы, они не будет работать на iOS (но вы можете отслеживать через navigator.standalone).

О чем нужно помнить

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

• У PWA нет скриншотов, поэтому они отображаются как белые экраны.

• В полноэкранном режиме есть много багов, поэтому не полагайтесь только на Safari при тестировании.
• Если вы хотите использовать выемку на iPhone X, вам нужно будет внести изменения в HTML и CSS. Если вы не сделаете все правильно, может произойти странное.

• Иногда при установке на домашний экран не используется манифест, поэтому на экране оказывается только ссылка.
• Safari и ссылка на домашнем экране используют одну и ту же регистрацию Service Worker и кэшированные файлы. Safari View Controller поддерживает Service Workers и сохраняет кэш, но он удаляет все данные после закрытия сессии.

• Chrome, Firefox и использующие WebView приложения не поддерживают Service Worker-ы, поэтому файлы не устанавливаются. Я думаю, что для WKWebView нужен API, чтобы владелец приложения решал, что делать с Service Worker.
• Чтобы избавиться от багов Service Worker, вам нужно установить Safari Technology Preview или Safari 11.1, доступные с обновлениями macOS 10.11.5, 10.12.6 и 10.13.4.

• Service Workers можно отключить в настройках.

• Если открыть несколько PWA в одно время, в панели задач iOS будут показаны приложения-“призраки” без иконки и названия.