Улучшения¶

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

Существует множество усовершенствований, которые могут улучшить конверсию и использование вашего PWA.

Ярлыки приложений¶

Ярлыки приложений — это статический список глубоких ссылок на ваш PWA, они прописаны в вашем манифесте (Спецификация манифеста Web App Manifest). Позволяет определить список ярлыков для различных частей или функций PWA, ускоряющих навигацию по часто используемым разделам.

Ярлыки приложений доступны в большинстве настольных операционных систем и в Android с WebAPK. Они появляются в контекстном меню на значке приложения на главном экране, в доке или на панели задач, как показано на следующем рисунке:

Чтобы получить доступ к этому меню, необходимо щелкнуть правой кнопкой мыши или нажать длинную клавишу на иконке PWA.

Ярлыки определяются в члене shortcuts манифеста. Он принимает массив членов со следующими свойствами:

name

Текст, который будет показан пользователю, обычно в контекстном меню.

start_url

URL, который должен загружаться при запуске PWA с этого ярлыка. Это должен быть URL в области видимости PWA, и он должен содержать глубокую ссылку на функцию, которую описывает имя или короткое_имя.

short_name (необязательно)

Сокращенное название, используемое, когда недостаточно места для отображения полного значения поля name.

description

(Необязательно) Описание того, что будет делать данный ярлык

icons

(Необязательно) Массив объектов иконок с полями src, type, sizes и необязательным полем purpose, описывающими, какие изображения должны представлять данный ярлык.

К ярлыкам приложений следует относиться как к возможностям, которые можно реализовать наилучшим образом. Это означает, что вы не можете рассчитывать на постоянное появление таких ярлыков, и даже если они появятся, вы не знаете, сколько ярлыков появится и будет ли платформа игнорировать иконки, поскольку это зависит от браузера. Полноценное обсуждение каждой платформы не представляется возможным, но ниже вы получите представление о том, как это работает на Android и настольных компьютерах. Лучший способ справиться с этой неопределенностью — упорядочить элементы по приоритету.

Следующий пример кода определяет различные ярлыки приложений, которые можно попробовать, если установить приложение на Android с Chrome или на настольном компьютере с Edge или Chrome.

iOS и iPadOS¶

При публикации PWA есть некоторые усовершенствования, которые могут улучшить работу пользователей в Safari на iOS/iPadOS.

Всплывающие экраны¶

Как показано в главе Web App Manifest, в Android заставки создаются автоматически на основе значений манифеста. Этого нельзя сказать об iOS и iPadOS. В этих устройствах заставки следует задавать в HTML как статические изображения с помощью элементов <link>.

На устройствах Apple эти изображения называются стартовыми и используют свойство rel со значением apple-touch-startup-image, как показано на рисунке:

1
2
3
4

<link
    rel="apple-touch-startup-image"
    href="ios-startup.png"
/>

Сложность заключается в том, что стартовое изображение должно иметь точный размер окна, которое будет открываться на вашем PWA. Таким образом, на разных устройствах iOS и iPadOS потребуются разные изображения. Для iPad необходимо предусмотреть больше ситуаций, таких как открытие в ландшафтном/портретном режиме и отображение PWA в режиме многозадачности (например, на ⅓, ½ или ⅔ экрана).

Обновленный список размеров экранов iOS и iPadOS можно посмотреть на сайте Apple Human Interface Guidelines.

Различные версии изображения запуска могут быть заданы с помощью медиазапроса внутри атрибута media:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<link
    rel="apple-touch-startup-image"
    href="ios-startup.png"
    media="orientation: portrait"
/>
<link
    rel="apple-touch-startup-image"
    href="ios-startup-landscape.png"
    media="orientation: landscape"
/>

Шаблоны проектирования стартовых изображений для iOS¶

Определение начальных образов — сложная работа, поэтому мы предлагаем несколько инструментов для их автоматической генерации и настройки:

• Статическая генерация интегрируется с вашей системой сборки, создает все статические изображения PNG и предоставляет вам HTML-код с элементами <link> для вставки в документ. Примером такого инструмента является PWA Asset Generator.
• Генератор на стороне клиента — JavaScript-инструмент, который может встраивать одну или несколько base64-версий начального изображения в инжектируемые элементы <link> в зависимости от типа и размера экрана текущего устройства. Можно использовать холст в памяти, рендерить изображение и преобразовывать его в data: URI с PNG-файлом. Библиотека PWA Compat — это простая в использовании клиентская библиотека, которая делает это путем клонирования типичного экрана запуска Android.

Обнаружение PWA на мобильных платформах Apple¶

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

Чтобы избежать чтения строки агента пользователя, проверьте свойство standalone объекта navigator. Это нестандартное свойство, и оно доступно только для движка WebKit на iOS и iPadOS.

• Если navigator.standalone имеет значение undefined, это означает, что пользователь не находится на устройстве iPadOS или iOS.
• Если navigator.standalone имеет значение false, это означает, что пользователь открыл PWA в браузере и использует его там.
• Если navigator.standalone имеет значение true, то это означает, что пользователь открыл PWA с главного экрана и получает опыт работы с автономным PWA.

Поддержка полноэкранного режима¶

В Safari на iOS и iPad в качестве режима отображения иконки PWA поддерживается только display: standalone . Хотя display: fullscreen не поддерживается, как на устройствах Android, можно использовать нестандартный мета-тег, чтобы заставить PWA переходить в полноэкранный режим.

На следующем изображении слева показан стандартный автономный дизайн с цветом темы, а справа — PWA с полноэкранным режимом iOS, позволяющим выводить содержимое за строку состояния.

Если добавить в HTML следующий тег, то ваш PWA на iOS и iPadOS перейдет в полноэкранный режим, но это не так, как на Android.

1
2
3
4

<meta
    name="apple-mobile-web-app-status-bar-style"
    content="black-translucent"
/>

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

При использовании этого режима будьте осторожны с дизайном, поскольку операционная система всегда будет отображать значки белым цветом, поэтому всегда следует контрастировать фоны для верхней части экрана со светлым содержимым. Кроме того, важно использовать переменные окружения CSS для вывода содержимого в безопасной области, как показано в Главе "Дизайн приложений".

Надежность установки¶

Safari на iOS и iPadOS до версии 15.4 загружает файл манифеста из сети только тогда, когда пользователь открывает лист общего доступа — с помощью значка общего доступа в браузере, — а не в момент загрузки страницы. Поэтому Safari не проверяет, является ли ваш сайт PWA, до этого момента, что может привести к ситуации, когда манифест не может быть загружен или занимает слишком много времени, и Safari игнорирует его.

Если Safari не может вовремя загрузить манифест, нажатие кнопки "Добавить на главный экран" помещает значок на главный экран, но не обеспечивает работу с приложением; это будет просто ярлык вкладки Safari.

Ресурсы¶

• Генератор ресурсов PWA
• Быстрое выполнение задач с помощью ярлыков приложений
• Библиотека PWA Compat
• Определение ярлыков приложений

Источник — Enhancements

Комментарии