Добавьте значок Apple Touch в свое прогрессивное веб-приложение

Кейс Баскс
Kayce Basques
X GitHub

Пользователи Safari для iOS могут вручную добавлять прогрессивные веб-приложения (PWA) на свой главный экран. Значок, появляющийся на главном экране iOS при добавлении PWA, называется значком Apple Touch . В этой лабораторной работе показано, как добавить значок Apple Touch в PWA. Предполагается, что у вас есть доступ к устройству iOS.

Мера

Откройте пример приложения в новой вкладке:

  1. Нажмите «Ремикс для редактирования», чтобы сделать проект редактируемым.

  2. Для предварительного просмотра сайта нажмите «Просмотреть приложение» . Затем нажмите «Полный экран». полноэкранный .

  3. Запишите URL-адрес вашего примера приложения. Он будет выглядеть примерно так: https://example.glitch.me .

Запустите аудит Lighthouse PWA для вашего примера приложения в Chrome DevTools:

  1. Нажмите `Control+Shift+J` (или `Command+Option+J` на Mac), чтобы открыть DevTools.
  2. Откройте вкладку «Маяк» .
  3. Убедитесь, что в списке категорий установлен флажок Progressive Web App .
  4. Нажмите кнопку «Сформировать отчет» .

В разделе «Оптимизированные PWA» Lighthouse сообщает, что в примере приложения не указана допустимая иконка Apple Touch .

Не предоставляет допустимый значок Apple Touch.
Не обеспечивает действительный аудит Apple-Touch-Icon

Добавьте пример приложения на домашний экран iOS.

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

  1. Откройте Safari для iOS.
  2. Откройте URL-адрес вашего примера приложения. Это URL-адрес, похожий на https://example.glitch.me , который вы записали ранее.
  3. Нажмите «Поделиться» Кнопка Apple «Поделиться» > Добавить на главный экран . Чтобы увидеть эту опцию, вам, вероятно, придётся провести пальцем влево.
  4. Нажмите « Добавить» .

Поскольку на сайте не указан значок Apple Touch, iOS просто генерирует значок для сайта из содержимого страницы.

Автоматически сгенерированный значок главного экрана.
Автоматически сгенерированный значок главного экрана.

Добавьте значок Apple Touch в пример приложения

  • Раскомментируйте тег <link rel="apple-touch-icon"> внизу <head> файла index.html . 
    …
    <link rel="stylesheet" href="/https/web.dev/index.css">
    <link rel="shortcut icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
    <!-- <link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736"> -->
    <link rel="apple-touch-icon" href="https://cdn.glitch.com/49d34dc6-8fbd-46bb-8221-b99ffd36f1af%2Ftouchicon-180.png?v=1566411949736">
  </head>
  …

Добавьте пример приложения на домашний экран iOS (снова)

  • Попробуйте ещё раз добавить пример приложения на главный экран iOS. На этот раз для сайта сгенерируется корректный значок. Если вы снова проведёте аудит страницы с помощью Lighthouse, вы также увидите, что проверка «Не предоставлена действительная apple-touch-icon теперь пройдена.
Иконка Apple Touch.
Иконка Apple Touch.