PWA манифест и метатеги [Модуль 10: Метаданные и head]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Современные сайты могут вести себя почти как настоящие приложения: устанавливаться на домашний экран, работать офлайн и иметь собственную иконку. Это возможно благодаря технологии Прогрессивных веб-приложений (PWA). Основой PWA является специальный файл-манифест, который подключается в `<head>`. Кроме того, существует ряд метатегов, которые управляют внешним видом приложения на мобильных устройствах, например, цветом адресной строки браузера или иконкой на рабочем столе. В этой серии упражнений мы научимся подключать веб-манифест и настраивать основные метатеги, чтобы сделать наш сайт готовым к 'установке' на смартфон.

Список тем

Подключение веб-манифеста

id: 37900_pwa-meta-01

Чтобы браузер 'узнал' о вашем веб-приложении и предложил его установить, необходимо подключить специальный конфигурационный файл — манифест. Это делается с помощью тега `<link>`, но со специальным значением в атрибуте `rel`. Укажите это значение.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #f5f5f5;
}
.info {
  padding: 10px;
  background-color: #e7f3fe;
  border-left: 4px solid #2196F3;
}

                     <head>
  <title>Мое PWA</title>
  <link input1="manifest" href="manifest.json">
</head>
<body>
  <div class="info">
    <p>Теперь браузер знает, где искать информацию о нашем приложении.</p>
  </div>
</body>

HTML

<head>
  <title>Мое PWA</title>
  <link input1="manifest" href="manifest.json">
</head>
<body>
  <div class="info">
    <p>Теперь браузер знает, где искать информацию о нашем приложении.</p>
  </div>
</body>

Для подключения файла манифеста (обычно это `manifest.json`) используется тег `<link>` с атрибутом `rel` и значением `manifest`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Цвет темы для браузера

id: 37900_pwa-meta-02

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

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}
.header {
  background-color: #0056b3;
  color: white;
  padding: 10px;
  text-align: center;
}

                     <head>
  <title>Цвет темы</title>
  <meta name="input1" content="#0056b3">
</head>
<body>
  <div class="header">
    Верхняя часть браузера должна окраситься в этот цвет.
  </div>
</body>

HTML

<head>
  <title>Цвет темы</title>
  <meta name="input1" content="#0056b3">
</head>
<body>
  <div class="header">
    Верхняя часть браузера должна окраситься в этот цвет.
  </div>
</body>

Для управления цветом темы интерфейса браузера используется метатег с `name="theme-color"`. Сам цвет указывается в HEX-формате в атрибуте `content`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Атрибуты для цвета темы

id: 37900_pwa-meta-03

Давайте закрепим. Для указания цвета темы используется метатег с двумя атрибутами: один указывает тип метаданных, а второй — их значение (сам цвет). Заполните пропуски для обоих атрибутов.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  background-color: #333;
}

                     <head>
  <title>Атрибуты цвета</title>
  <meta input1="theme-color" input2="#333333">
</head>
<body>
  <p style="color: white;">Интерфейс браузера должен стать темным.</p>
</body>

HTML

<head>
  <title>Атрибуты цвета</title>
  <meta input1="theme-color" input2="#333333">
</head>
<body>
  <p style="color: white;">Интерфейс браузера должен стать темным.</p>
</body>

Вам нужно использовать атрибут `name` со значением `theme-color` и атрибут `content` для указания цвета, например `#ffffff`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Иконка для домашнего экрана (Apple)

id: 37900_pwa-meta-04

На устройствах Apple для указания иконки, которая появится на домашнем экране при добавлении сайта, используется специальный тег `<link>`. Укажите правильное значение для атрибута `rel`.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}
img {
  width: 60px;
  height: 60px;
  border-radius: 12px;
}

                     <head>
  <title>Иконка для Apple</title>
  <link rel="input1" href="https://naytikurs.ru/img/2.png">
</head>
<body>
  <p>Эта иконка появится на домашнем экране:</p>
  <img src="https://naytikurs.ru/img/2.png" alt="Иконка">
</body>

HTML

<head>
  <title>Иконка для Apple</title>
  <link rel="input1" href="https://naytikurs.ru/img/2.png">
</head>
<body>
  <p>Эта иконка появится на домашнем экране:</p>
  <img src="https://naytikurs.ru/img/2.png" alt="Иконка">
</body>

Для указания иконки на iOS-устройствах используется тег `<link>` с `rel="apple-touch-icon"`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Полноэкранный режим (Apple)

id: 37900_pwa-meta-05

Чтобы на устройствах Apple ваше веб-приложение открывалось в полноэкранном режиме (без интерфейса браузера), используется специальный метатег. Укажите его имя и значение 'yes'.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}

                     <head>
  <title>Полноэкранный режим</title>
  <meta name="input1" content="input2">
</head>
<body>
  <p>Этот метатег 'превращает' сайт в приложение на iOS.</p>
</body>

HTML

<head>
  <title>Полноэкранный режим</title>
  <meta name="input1" content="input2">
</head>
<body>
  <p>Этот метатег 'превращает' сайт в приложение на iOS.</p>
</body>

Чтобы приложение выглядело как нативное на iOS, используется метатег `<meta name="apple-mobile-web-app-capable" content="yes">`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Стиль статус-бара (Apple)

id: 37900_pwa-meta-06

В полноэкранном режиме на iOS можно управлять стилем системного статус-бара (где часы и уровень заряда). Для этого есть специальный метатег. Укажите его имя.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  background: black;
  color: white;
}

                     <head>
  <title>Статус-бар</title>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="input1" content="black-translucent">
</head>
<body>
  <p>При таких настройках контент будет отображаться под полупрозрачным статус-баром.</p>
</body>

HTML

<head>
  <title>Статус-бар</title>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="input1" content="black-translucent">
</head>
<body>
  <p>При таких настройках контент будет отображаться под полупрозрачным статус-баром.</p>
</body>

Стиль статус-бара задается с помощью метатега `<meta name="apple-mobile-web-app-status-bar-style">`. Возможные значения: `default`, `black`, `black-translucent`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Полный набор для PWA

id: 37900_pwa-meta-07

Давайте соберем вместе основные теги для PWA: подключение манифеста, цвет темы и иконку для Apple. Заполните все пропущенные значения `rel` и `name`.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
}

                     <head>
  <title>Итоговая сборка PWA</title>
  <link input1="manifest" href="manifest.json">
  <meta input2="theme-color" content="#FFFFFF">
  <link input3="apple-touch-icon" href="https://naytikurs.ru/img/9.png">
</head>
<body>
  <p>Все основные теги для PWA на месте!</p>
</body>

HTML

<head>
  <title>Итоговая сборка PWA</title>
  <link input1="manifest" href="manifest.json">
  <meta input2="theme-color" content="#FFFFFF">
  <link input3="apple-touch-icon" href="https://naytikurs.ru/img/9.png">
</head>
<body>
  <p>Все основные теги для PWA на месте!</p>
</body>

Вам нужно указать: `rel="manifest"` для манифеста, `name="theme-color"` для цвета темы и `rel="apple-touch-icon"` для иконки Apple.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку