Улучшения

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

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

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

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

Ярлыки приложений в Android и macOS.

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

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

name
Текст, который будет показан пользователю, обычно в контекстном меню.
url
URL-адрес, который PWA должен загрузить, когда пользователь запускает его с помощью этого ярлыка. Это должен быть URL-адрес в пределах вашей области PWA, и он должен иметь глубокую ссылку на функцию, которую описывает name или short_name .
short_name
(Необязательно) Более короткое имя используется, когда недостаточно места для отображения полного значения поля name .
description
(Необязательно) Описание того, что будет делать этот ярлык.
icons
(Необязательно) Массив объектов значков с полями src , type , sizes и дополнительными purpose , описывающими, какие изображения должны представлять ярлык.

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

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

iOS и iPadOS

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

Заставки

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

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

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

Проблема заключается в том, что загрузочный образ должен иметь точный размер окна, который будет иметь PWA при открытии. Таким образом, для разных устройств iOS и iPadOS потребуются разные изображения. На iPad необходимо охватить больше ситуаций, таких как альбомная/портретная ориентация и рендеринг PWA в многозадачном режиме (например, 1/3, 1/2 или 2/3 экрана).

Вы можете проверить обновленный список размеров экрана iOS и iPadOS в Рекомендациях Apple по пользовательскому интерфейсу.

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

<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 .

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

Автономное поведение по умолчанию (слева) и полноэкранный экран iOS (справа).

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

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

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

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

По умолчанию верхние 0 пикселей области просмотра находятся под строкой состояния; если вы добавите черно-полупрозрачный метатег, верхние 0 пикселей области просмотра будут соответствовать физической верхней части экрана.

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

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

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

Ресурсы