Создание пользовательского экрана-заставки PWA

Как указывалось ранее в нашем руководстве по манифесту PWA, вы можете создать уникальный экран-заставку для своего PWA, написав всего несколько строк кода в файле manifest.json . Процесс не слишком сложен, как можно было бы ожидать, и на самом деле вы можете сделать все в кратчайшие сроки. Давайте приступим к делу, давайте:

Случай с заставками в PWA

Если настройка не настроена, пользователи, открывающие ваше PWA, по умолчанию встречают пустой белый экран. Это должно быть хорошо само по себе, так как на современных устройствах время открытия приложений практически мгновенное. Однако на более медленных устройствах это может быть проблемой, поскольку портит первоначальное восприятие вашего приложения пользователем. В сочетании с тем фактом, что устройства с более низкими характеристиками и 1 ГБ ОЗУ по-прежнему являются наиболее распространенными, уникальная заставка, представляющая ваш бренд, является обязательной.

Как создать свой собственный экран-заставку

На Android этот процесс выполняется так же быстро, как внесение трех строк кода. Однако для iOS это другая история, так как вам придется создавать заставки разных размеров для разных размеров экрана.

Для Android

Делать это вручную

В файле manifest.json убедитесь, что эти три свойства: name , background_color и icons настроены правильно:

• name : имя вашего PWA
• background_color : Цвет фона вашего экрана-заставки. Распознаются только допустимые значения цвета CSS.
• icons : значок .png с минимальным размером 192×192 пикселей.

Например, вот как должен выглядеть правильно настроенный manifest.json . Обратите внимание, что свойство icons имеет четыре разных размера — эти значки разного размера предоставляются для обеспечения наилучшей совместимости с различными устройствами.

 {
    "theme_color": "#f69435",
    "background_color": "#ffffff",
    "дисплей": "полноэкранный",
    "сфера": "/",
    "start_url": "/",
    "имя_приложения": "SimiCart",
    "short_name": "СимиКарт",
    "description": "Решения нового поколения для электронной коммерции Magento",
    "значки": [
        {
            "источник": "/icon-192x192.png",
            "размеры": "192x",
            "тип": "изображение/png"
        },
        {
            "источник": "/icon-256x256.png",
            "размеры": "256x",
            "тип": "изображение/png"
        },
        {
            "источник": "/icon-384x384.png",
            "размеры": "384x",
            "тип": "изображение/png"
        },
        {
            "источник": "/icon-512x512.png",
            "размеры": "512x",
            "тип": "изображение/png"
        }
    ]
}

После завершения настройки свойств (и вашего файла manifest.json ) браузеры, поддерживающие PWA (обычно Chrome), автоматически генерируют значки разных размеров для экрана-заставки и отображают их соответствующим образом.

Довольно легко, не так ли? Если вы спросите нас, мы думаем, что именно так и должен ощущаться развивающийся опыт.

 Рекомендуемая литература: Манифест PWA: простой способ создания манифеста веб-приложения

Использование генератора манифеста

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

Для iOS

Apple, конечно же, не хочет упрощать этот процесс для разработчиков. На момент написания этой статьи статус поддержки манифеста веб-приложения по-прежнему указан как « Частично поддерживается » — без изменений через два года после его первого появления. Это означает, что PWA не поддерживают icons , minimal-ui , fullscreen , theme-color и orientation .

К счастью, есть еще способ обойти это — использовать метатег <apple-touch-startup-image> . Не идеальное решение — но оно работает.

 <!-- Заставка для iPhone X (1125 x 2436 пикселей) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) и (device-height: 812px) и (-webkit-device-pixel-ratio: 3)" href="/apple -запуск-1125x2436.png">

Используя метатег <apple-touch-startup-image> , вы можете указать изображение с фиксированным разрешением для экрана-заставки PWA (т. е. startup-image ). Этот настраиваемый экран-заставка совместим только с одним размером экрана, и вам потребуется гораздо больше разных размеров изображений, чтобы соответствовать разным размерам экранов продуктов Apple, представленных на рынке.

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

 <!-- iPhone X (1125 x 2436 пикселей) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) и (device-height: 812px) и (-webkit-device-pixel-ratio: 3)" href="/apple -запуск-1125x2436.png">
<!-- iPhone 8, 7, 6s, 6 (750 x 1334 пикселей) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) и (device-height: 667px) и (-webkit-device-pixel-ratio: 2)" href="/apple -запуск-750x1334.png">
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242 x 2208 пикселей) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) и (device-height: 736px) и (-webkit-device-pixel-ratio: 3)" href="/apple -запуск-1242x2208.png">
<!-- iPhone 5 (640 x 1136 пикселей) -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) и (device-height: 568px) и (-webkit-device-pixel-ratio: 2)" href="/apple -запуск-640x1136.png">
<!-- iPad Mini, Air (1536 x 2048 пикселей) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) и (device-height: 1024px) и (-webkit-device-pixel-ratio: 2)" href="/apple -запуск-1536x2048.png">
<!-- iPad Pro 10,5" (1668 x 2224 пикселей) -->
<link rel="apple-touch-startup-image" media="(device-width: 834px) и (device-height: 1112px) и (-webkit-device-pixel-ratio: 2)" href="/apple -запуск-1668x2224.png">
<!-- iPad Pro 12,9" (2048 x 2732 пикселей) -->
<link rel="apple-touch-startup-image" media="(device-width: 1024px) и (device-height: 1366px) и (-webkit-device-pixel-ratio: 2)" href="/apple -запуск-2048x2732.png">

Свяжите этот код с <head> вашего index.html и не забудьте вставить <meta> ниже, чтобы включить поведение PWA, иначе наш экран-заставка вообще не будет работать.

 <meta name="apple-mobile-web-app-capable" content="yes">

С этим у вас должно быть все готово. Запустите iOS PWA, и вы сможете увидеть заставку.

Использование генератора заставки iOS

Конечно, есть лучшие способы автоматизировать этот процесс, например, с помощью генератора заставки iOS. Используя ваше изображение в качестве источника, генератор сгенерирует для вас изображения разного размера вместе с необходимым HTML-кодом, который будет вставлен в ваш index.html .

Вывод

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

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