Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс

Поиск по сайту

Наш Telegram бот: @htmlweb_bot

Что такое manifest.json, зачем он сайту и как его сделать

manifest.json - это текстовый файл в формате json, который можно открыть любым текстовым редактором, например Блокнот.

Когда пользователь пожелает добавить ваш сайт в избранное, браузер будет использовать иконку из favicon. Если посетитель вашего сайта добавить иконку на рабочий стол компьютера, то система будет искать картинку для отображения в файле manifest.json. То же будет и на мобильном телефоне при добавлении ссылки на страницу сайта на рабочий стол.

По умолчанию файл manifest.json система будет искать в корне вашего сайта. Чтобы указать другое имя или пусть используйте тег

<link rel="manifest" href="/manifest.json">

Размещайте его в секции <head></head>

Пример содержимого файла manifest.json:Скачать пример

{"manifest_version": 3,
"name": "WEB - технологии",
"short_name": "HtmlWeb",
"description": "Примеры, скрипты, справочник, уроки для начинающих по HTML, PHP, AJAX, JavaScript. Сервисы, базы данных и API для ваших сайтов. Продвижение и поисковая оптимизация.",
"display": "standalone",
"start_url": "/",
"shortcuts": [
    {
        "name": "WEB технологии",
        "url": "/",
        "icons": [{ "src": "/pic/ico/192x192.png", "sizes": "192x192" }]
    }
    ],
"icons" : [
{
"src": "/pic/ico/44x44.png",
"sizes": "44x44",
"type": "image/png"
},
{
"src": "/pic/ico/48x48.png",
"sizes": "48x48"
},
{
"src": "/pic/ico/1240x600.png",
"sizes": "1240x600"
},
{
"src": "/pic/ico/300x300.png",
"sizes": "300x300"
},
{
"src": "/pic/ico/150x150.png",
"sizes": "150x150"
},
{
"src": "/pic/ico/88x88.png",
"sizes": "88x88"
},
{
"src": "/pic/ico/24x24.png",
"sizes": "24x24"
},
{
"src": "/pic/ico/50x50.png",
"sizes": "50x50"
},
{
"src": "/pic/ico/620x300.png",
"sizes": "620x300"
},
{
"src": "/pic/ico/192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/pic/ico/144x144.png",
"sizes": "144x144"
},
{
"src": "/pic/ico/96x96.png",
"sizes": "96x96"
},
{
"src": "/pic/ico/72x72.png",
"sizes": "72x72"
},
{
"src": "/pic/ico/36x36.png",
"sizes": "36x36"
},
{
"src": "/pic/ico/1024x1024.png",
"sizes": "1024x1024"
},
{
"src": "/pic/ico/180x180.png",
"sizes": "180x180"
},
{
"src": "/pic/ico/152x152.png",
"sizes": "152x152"
},
{
"src": "/pic/ico/120x120.png",
"sizes": "120x120"
},
{
"src": "/pic/ico/76x76.png",
"sizes": "76x76"
}]
}

manifest.json стал продолжением и расширяет возможности favicon.ico. Favicon.ico положено делать составной с несколькими разрешениями в одном файле. Так же можно добавлять favicon.ico в png формате или svg-формате. Браузер сам выбирает из файла формата ico требуемое разрешение. Но для этого ему нужно скачать и разобрать файл формата ico. В варианте с manifest.json вы даете ссылку на конкретный файл нужного размера. Разрешение файла должно строго соответствовать указанному в атрибуте "sizes"!

Чтобы не было искажения или размытия файлы картинок делают из векторного формата. Вы как вариант для маленьких картинок и крупных можно использовать разные лого или лого с разной проработкой деталей. Можно указать в файле manifest.json другие форматы и разрешения, но главное чтобы были указанные здесь разрежение, который являются обязательными.

Поля и их описание:

name – имя, которое будет отображаться под иконкой, ну и вообще везде, где будет отображаться ваше «приложение»
short_name – будет использоваться в тех случаях, когда места для отображения полного имени недостаточно
icons – набор иконок разных размеров
start_url – определяет url, которые открывается при нажатии иконки (можно использовать, чтобы зафиксировать пользователей, которые открывают сайт через иконку на рабочем столе, добавив параметр, допустим, ?src=homescreen в url)
display - fullscreen, standalone, minimal-ui, browser – отвечает за то, как будет отображаться ваш сайт (с адресной строкой без нее и т.п.)
orientation – none, portrait, landscape - ориентация. Не фиксируется на Apple. Пути решения здесь.
theme_color – позволяет изменить цвет адресной строки браузера, например: theme_color: #2196F3
background_color – устанавливает цвет страницы до того как она загрузилась. Пока страница не загрузилась пользователь видит серое пустое поле. Оптимально изменить этот цвет на цвет фона сайта.
theme_color и background_color можно увидеть только если «display»: «standalone» или «fullscreen»

У иконок Apple есть свои особенности, с ними можно ознакомиться на офф.сайте

Полезные ссылки по теме:

.
Прокомментировать/Отблагодарить