Если вы работаете над прогрессивными веб-приложениями. Тогда вы очень хорошо знакомы с 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. Пользователю необходимо повторно добавить значок после удаления предыдущих значков и удаления всего кеша.

Понравилось? Понравилось? почему бы вам не нажать на значок хлопка и не поделиться в социальных сетях? или дайте мне знать, что я пропустил или что вам понравилось?