Если вы работаете над прогрессивными веб-приложениями. Тогда вы очень хорошо знакомы с Manifest.json. Для тех, кто не знаком с Manifest.json: «Это простой файл json со всей необходимой информацией, необходимой для сохранения веб-приложения на главном экране мобильного телефона пользователя, а также с тем, как оно будет выглядеть с точки зрения взаимодействия с пользователем - запуск экран, цвет темы, значки и т. д. »
Вот демонстрация того, как Manifest будет работать с вашим PWA, когда пользователь будет взаимодействовать с приложением.
Manifest.json предназначен не только для прогрессивных веб-приложений. Вы можете использовать его с любым сайтом.
tl: dr; Вы можете посмотреть это видео и узнать, как использовать manifest.json
# 1 Код
# 2 Глоссарий Manifest.json:
- Значки. Значки - это значки PWA разного размера и плотности. Он будет сохранен на главном экране мобильного телефона пользователя.
- short_name - это краткое название приложения, которое будет располагаться под значком. Это отступ для отображения там, где нет места для отображения полного имени.
- имя - удобочитаемое название приложения. Это имя вашего приложения, которое будет отображаться на баннере приложения.
- описание - дает общее описание приложения.
- ориентация. С помощью этой функции вы можете управлять ориентацией приложения. Ниже приведены несколько свойств ориентации. Они хороши для тех приложений, которые хотят поддерживать только одну конкретную ориентацию.
- пейзаж
- портрет
. display - определяет предпочтительный режим отображения для веб-приложения разработчиком.
- автономный → скрыть пользовательский интерфейс браузера.
- полноэкранный режим → используется вся доступная область отображения, пользовательский агент не отображается.
- браузер → предпочитаю просматривать свою страницу как обычный сайт в браузере,
- minimal-ui → Приложение будет выглядеть и работать как отдельное приложение, но будет иметь минимальный набор элементов пользовательского интерфейса для управления навигацией. Элементы зависят от браузера.
- background_color - определяет цвет фона приложения при запуске. Это помогает плавно переходить от запуска веб-приложения к загрузке его содержимого.
- theme_color - определяет цвет темы по умолчанию для приложения. Иногда это влияет на то, как приложение отображается в ОС (например, в переключателе задач Android цвет темы окружает приложение).
- область - это ограничивает область действия PWA. Это контролирует, какая страница будет открываться из manifest.json. Если пользователь перейдет на страницу, поместите область. Страница будет обслуживаться как обычный сайт.
- start_url - указывает URL-адрес, который загружается, когда пользователь запускает приложение с устройства (например, при добавлении на главный экран), обычно это индексный файл. Обратите внимание, что это должен быть относительный URL-адрес, указывающий на индексный файл, относительно источника сайта.
# 3 Как добавить на веб-страницу?
Время тестирования №4
Настольное тестирование на Chrome:
Дополнительный:
- dir - Направление контента в приложении
- связанные_приложения -
- язык
Что следует помнить:
- По телефону пользователь должен посетить сайт 3 раза с перерывом в 5 минут, после чего он получит уведомление «Добавить на главный экран» [AHS].
- В iOS уже есть функция добавления на главный экран, поэтому никаких уведомлений не будет.
- Когда вы вносите какие-либо изменения в Manfiest.json. Пользователю необходимо повторно добавить значок после удаления предыдущих значков и удаления всего кеша.
Понравилось? Понравилось? почему бы вам не нажать на значок хлопка и не поделиться в социальных сетях? или дайте мне знать, что я пропустил или что вам понравилось?