Для чего нужен manifest json

Манифест? А? Что? Зачем?

Многие из нас, кто работает над вебом, активно стараются уменьшить разрыв между нативными и веб-приложениями.

Но что это за разрыв? Всего несколько лет назад этот разрыв был, в большей степени, технологическим. Если вы хотели получить доступ к GPS устройства, вам приходилось писать нативное приложение. Сейчас ситуация несколько улучшилась: теперь мы можем получать доступ к датчикам устройства, вроде GPS, камеры и ориентации устройства — хотя впереди ещё долгий путь. Благодаря последним успехам веб-технологий, теперь у нас есть платформа, которая может конкурировать с нативными приложениями уже почти на равных.

Сегодня разрыв между нативными и веб-приложениями не столько технологический — дело в удобстве пользователей: они предпочитают устанавливать приложения, которые уютно живут на домашнем экране (или даже на рабочем столе, если речь про десктопные браузеры).

Кроме того, нативные приложения по умолчанию работают в офлайне и интегрируются с возможностями, которые предоставляет операционная система: например, возможность видеть установленные приложения в переключателе задач. Или возможность управлять настройками конфиденциальности приложения в том же самом месте, что и для приложений, установленных из магазина. Чтобы сделать что-нибудь подобное в браузере, мы всё ещё слоняемся по браузеру в поисках открытых вкладок и вводим длинные, скучные адреса.

Нам нужен такой способ «установки» веб-приложений, чтобы они были неотличимы от любого другого приложения, установленного на устройстве пользователя. Но в тоже время, мы не хотим потерять мощные функции, составляющие основу веб-платформы: связанность ссылками, просмотр исходного кода и возможность хостить собственные проекты.

Мы в веб-сообществе, как правило, называем это «прогрессивными веб-приложениями».

Что такое «установка»?

По сути, «установка» веб-приложения — это добавление «закладки» на домашний экран или в программу запуска приложений. Есть некоторые довольно очевидные вещи, которые вы, как разработчик, должны предоставить браузеру, чтобы тот мог считать сайт приложением: название, иконки, и т.д. Есть и более сложные функции, которые могут вам пригодиться, например, возможность указать предпочтительную ориентацию устройства и нужен ли вам полноэкранный режим.

Спецификация манифеста предлагает вам стандартный способ сделать это с помощью файла JSON. Просто сошлитесь на файл манифеста в HTML-странице следующим образом:

Но что находится в этом загадочном файле манифеста? Хорошо, что вы спросили!

Очень простой манифест

Самый простой манифест может состоять всего-то из имени и одной или нескольких иконок.

Типичный манифест

Более типичный манифест может выглядеть следующим образом. Имена его ключей должны говорить сами за себя, но мы подробнее опишем их использование ниже.

Название приложения

Ключ short_name служит названием приложения при отображении в условиях ограниченного пространства (например, под значком на домашнем экране телефона). Ключ name может быть немного длиннее, отображая название приложения полностью. Также он служит дополнительной информацией для пользователя, который ищет ваше приложения на телефоне. Так что, набрав «улётный» или «фото», пользователь сможет найти приложение на своем устройстве.

Но будьте внимательны: некоторые браузеры могут требовать указать название — иначе, ваше приложение может лишиться статуса «прогрессивное веб-приложение».

Иконки

Назначение иконки

Больше подробностей о назначении иконок можно найти в спецификации Web App Manifest.

Режимы отображения и ориентация

Приложения при запуске должны иметь возможность контролировать свое отображение на экране. Если это игра, то ей, вероятно, нужно быть в полноэкранном режиме и в горизонтальной ориентации. Для этого формат манифеста предоставляет вам два ключа.

Доступные значения режимов отображения:

Плюс такого указания ориентации в том, что она выступает в качестве «ориентации по умолчанию» для всего приложения. Поэтому, при переходе от одной странице к другой, ваше приложение остается в правильном положении. Вы можете изменить ориентацию по умолчанию с помощью API ориентации экрана.

Также вы можете применить другие стили для приложение в определённом режиме с помощью характеристики display-mode :

Стартовый адрес

Иногда при запуске приложения вам нужно, чтобы пользователь всегда попадал на определенную страницу. Ключ start_url даёт возможность это указать.

«Область» приложения

Нативные приложения имеют чёткие границы: как пользователь, вы уверены, что когда вы открываете нативное приложение, оно неожиданно не откроет другое незаметно для вас. Чаще всего, вам предельно ясно, что вы переключились с одного нативного приложения на другое. Обычно эти визуальные подсказки предоставляет операционная система (например, вызов диспетчера задач и выбор другого приложения или нажатие Cmd Tab или Alt Tab на компьютере).

С вебом все иначе: это огромная гипертекстовая система, в которой веб-приложение может охватывать несколько доменов: вы можете с легкостью перейти с gmail.com на docs.google.com и пользователь даже этого не заметит. На практике, идея существования границ приложения является абсолютно чуждой для веба. Ведь, в действительности, веб-приложение — это просто серия HTML-документов (представьте «серию труб»… м-м, нет, забудьте!).

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

Формат манифеста решает эту проблему позволяя указывать «область адреса» для вашего приложения. Эта область устанавливает границы для приложения. Это может быть либо домен, либо директория на этом домене.

Интернационализация: lang и dir

Распространение приложения

Нужно написать с подробностями и скриншотами.

Цвет темы и цвет фона

Как мне определить, что пользователь «установил» приложение?

Однако по причинам конфиденциальности вы не можете непосредственно обнаружить, установлено ли ваше приложение — только узнать, что в вашем веб-приложении используется файл манифеста.

Причины для использования отдельного файла:

В спецификации есть более подробная информация о том, почему мы выбрали JSON вместо HTML-тегов.

Кто это внедряет?

Манифест и прогрессивные веб-приложения реализованы в Chrome, Opera и Samsung Internet для Android. Firefox также подаёт обнадёживающие сигналы, что будет поддерживать эти стандарты (реализации в Gecko уже больше двух лет, но она не используется ни в одном из продуктов).

Взаимодействие с поисковыми роботами

Как и другие веб-ресурсы, манифест веб-приложения должен быть доступен для любого веб-браузера или поискового робота.

Если разработчик веб-приложения хочет известить поисковых роботов о запрете на сканирование файла, он может сделать это включив манифест веб-приложения в файл robots.txt. Это описано подробнее в протоколе robots.txt. Разработчик веб-приложения также может использовать HTTP-заголовок X-Robots-Tag.

Авторы

Основная часть этого пояснения первоначально появилась в статье « The W3C App Manifest specification» на HTML5 Doctor, и была написана Маркусом Касересом и Брюсом Лоусоном. Данный материал публикуется на основе лицензии для некоммерческое использования. Вы можете спокойно изменять, повторно использовать, модифицировать и расширять это пояснение. Некоторые авторы сохраняют свои авторские права на отдельные статьи.

Источник

Её величество иконка в manifest.json

Немного о добавление иконок для сайта в мультибраузерном и мультиплатформенном мире. О возможности добавления иконки сайта на рабочий стол мобильного устройства и многом другом.

Иконка для сайта называется Favicon.

Favicon – это маленький значок, помогающий идентифицировать страницу. Это часто забываемая концепция бренда для сайта. Они дополняют UX просмотра в нескольких ключевых местах.

В зависимости от браузера и контекста они могут отображаться:

ICO – формат изображений для отображения иконок. Изначально favicon в вебе был размером 16х16 пикселей, но со временем появилась поддержка разных размеров в ICO файле (32×32, 24×24, 48×48, 64×64, 128×128 и 256×256).

В настоящее время favicon не обязательно должен быть формата ICO. Часто встречаются форматы GIF, PNG, JPG и даже SVG favicon.

Почему я назвал статью «Ее величество иконка»? Да потому, что эта «пешка» прошла в «ферзи».

Изначально Microsoft для Internet Explorer 5 разработала способ добавления favicon на сайт. Для этого нужно было сохранить файл иконки размером 16х16 пикселей в корневой папке сайта с именем favicon.ico. Это все что требовалось, никакого HTML. Кстати, большинство браузеров до сих пор проверяют корневую папку на наличие файла favicon.ico и я всегда обязательно размещаю фавикон в главную директорию сайта.

Позже, когда favicon стал частью стандартов HTML 4.01 и XHTML 1.0, рекомендовали использовать тег link для размещения favicon.

Тег link можно прописать по разному, я использую все сразу, чтобы угадать:

Для форматов png или gif:

Иконка представляет собой точку запуска сайта или приложения. Она всегда должна смотреться хорошо. То есть быть четкой и ясной, без видимых пикселей, а размер и качество должны подходить под разрешение экрана устройства. Favicon 16×16 и 32×32 – это хороший фолбек, но они будут плохо смотреться на экранах с большим разрешением.

Дело осложняется тем, что современные браузеры и мобильные ОС требуют разные размеры иконок и угадать бывает очень трудно.

Смотрите сами неполный список рекомендаций:

Если собрать все вместе, предполагая, что мы следуем всем рекомендованным размерам для всех основных браузеров и платформ, наш набор файлов будет примерно такой:

Разметка link примерна такая:

Уверен, вы уже схватились за голову. Караул. Это ж сколько рисовать всего, да еще вставлять столько тегов.

А еще появился Manifest.json и browserconfig.xml.

По сути своей это конфигурационные файлы которые управляют иконками на той или иной ОС или браузере.

Но сначала разберемся с этими файлами, а не с иконками разных размеров.

Manifest.json

Файл манифеста содержит информацию об иконках, цветовой теме, ориентации экрана, начальном URL и т.д. Используется для создания виджета в закладках браузеров.

Подключение файла как и всего остального в head:

Пример простого файла:

Манифест для сайта – это простой JSON-файл, который позволяет вам настроить следующие вещи:
1. Какая будет иконка у пользователя, после того как он добавит ваш сайт на рабочий стол
2. Как будет запускаться ваш сайт (с адресной строкой, без нее или в полноэкранном режиме)
3. Splash screen
4. Цветовую тему
5. Ориентацию экрана
6. Начальный url
и многое другое, например мы можем убрать адресную строку, чтобы было похоже на нативное приложение.

Кратко пройдемся по параметрам:

Как быстро все реализовать:

1. Вначале приготовьте прозрачный свой логотип или квадратную картинку в формате PNG, достаточного размера.

Выставляем в нем галочки как на скриншоте:

Выбираем созданную заранее картинку и генерируем.

И о чудо! Получаем полный комплект иконок с нужными названиями и размерами, готовые конфигурационные файлы и теги link для вставки в шаблон сайта.

Хотя прямое назначение этого сервиса генерировать иконки, а не манифест, он его создает. Таким образом, у вас будут и иконки (для iOS и Андроид), и манифест. Полный комплект! Правда, манифест придется подправить (изменить имя и прочие настройки).

Я исправил в нем только имя:

Если name не влазит, устройства сами берут short_name. Лучше имя покороче, чтоб влазило под иконку в одну строку.

Правьте в NotePad++ в UTF-8 без BOM.

Вставил полученные на этом же сервисе теги в head:

И кинул все иконки в главную директорию (не хотелось пути менять).

В результате, добавив ссылку на экран IPhone, получил такое:

А совсем недавно такое работало только на андроид системах. Прогресс идет.

Очень удобный, есть много настроек для каждого устройства с демо результата. Я пользуюсь им.

Мне в нем понравилось, что он генерирует и черно-белый файл svg, кроме всего прочего. Для чего он нужен?

А нужен он в В Mac OS с его Safari (не путайте Safari в iOS!).

Чтобы использовать SVG Mac OS, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.

Если не указывать эту иконку, то браузер будет отображать первую букву домена вашего сайта.

В Mac OS особо не разгуляешься, к сожалению. Если сохранить сайт на рабочий стол в Mac OS, то значок будет отображаться как скриншот страницы с html кодом. Просто так сайт приложением в Mac OS не сделать.

Для такой маленькой иконки очень много работы

С этим соглашается Philippe Bernard, автор RealFaviconGenerator. Он протестировал несколько вариантов, чтобы уменьшить количество необходимых файлов.

Он предполагает, что более минимальный подход обеспечивает достаточное покрытие совместимости для подавляющего большинства случаев.

Пусть браузер сам занимается уменьшением

Как говорилось ранее, браузеры обычно используют иконку самого близкого большего размера и уменьшают ее до желаемого размера, когда оптимального размера нет.

Поэтому если вы не возражаете, чтобы браузер за вас автоматически уменьшал изображения, можете предоставить всего одну большую иконку, которая будет покрывать большинство случаев.

Но есть случаи, когда такой подход не позволителен: необходимо, чтобы иконки всегда смотрелись идеально, чтобы были видны детали и цвета, чтобы все было читаемо и хорошо смотрелось на всех размерах. В больших иконках лучше добавить больше деталей, таких как текст, название бренда, то, что невозможно поместить на маленькие размеры.

Минимальный набор иконок (от Ruadhán O’Donoghue)

Следующие файлы в корневой папке

favicon.ico (с размерами 16×16, 32×32)

favicon-16×16.png: современный эквивалент формата ICO

apple-touch-icon-180.png: Apple touch icon

safari-pinned-tab.svg: SVG на закрепленной вкладке в Safari

mstile-150×150.png: MS плитка

Файл manifest.json, использующий изображение chrome:

Файл browserconfig.xml, использующий изображение mstile:

Но проще воспользоваться сервисом. Ничего страшного и утяжеляющего сайт не будет, если вы все сделаете как я написал.

Можно и закончить эту публикацию, но осталась одна важная вещь:

Сейчас многие шаблоны прописывают вызов иконки из папки самого шаблона. Если шаблон и фреймворк не позволяет вывести иконку из директории шаблона, то не забудьте путь до нее разрешить в robots.txt. Пример: Allow: /templates/vash-shablon/favicon.ico Так как по умолчанию в нем закрыто индексирование папки templates (для CMS Joomla).

Я попробовал, взял иконку для айфона побольше и переименновал, добавил link и дописал в ранее созданный manifest.json рекомендуемое яндекс.

Это для информации. Меня вполне устраивают на панели быстрого запуска яндекс браузера и стандартно формируемые.

Вот и все, пожалуй, на это время. В принципе просто, но конечно удивляет и восхищает Карьера фавиконки за эти годы. Мы сами придумываем себе трудности, чтобы их преодолевать. Вроде, про это.

После того как я написал эту статью, прошло не так много и времени и в Яндекс вебмастере появились уведомления, что формат SVG у них сейчас стал рекомендуемый. Требования к фавиконке: Размер: 120 × 120 пикселей (рекомендуемый), 16 × 16 или 32 × 32. Формат: SVG (рекомендуемый), ICO, GIF, JPEG, PNG, BMP. Совет. Используйте размер 120 × 120 пикселей или формат SVG, чтобы на сервисах Яндекса логотип сайта выглядел четче и заметнее.

SVG формат конечно хорош, но я лично рисовать ничего не буду. И так все четко и заметно. Могли бы сами сконвертировать при желании. В on line конвертерах в svg из png и генераторах даже не пытайтесь, при сохранении будет черно-белая иконка (такая применима только в mac os. Писал выше). Если есть правильная цветная svg, то вставить ее можно как обычный файл, используя в type (Тип передаваемых данных) image/svg — для формата SVG:

Источник

Пишем правильный манифест для сайта

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

Манифест для сайта – это простой JSON-файл, который позволяет вам настроить следующие вещи:
1. Какая будет иконка у пользователя, после того как он добавит ваш сайт на рабочий стол
2. Как будет запускаться ваш сайт (с адресной строкой, без нее или в полноэкранном режиме)
3. Splash screen
4. Цветовую тему
5. Ориентацию экрана
6. Начальный url
и многое другое

Подробнее

Чтобы показать, как manifest влияет на отображение сайта, я создал простое, тестовое веб-приложение, которые возвращает название региона по коду.

Сначала зафиксируем положение дел до добавления файла манифеста.

После того как пользователь добавил иконку, она будет выглядеть так (на Андроид 5.0)
Название браузер выдернул из тега tilte. Так что, если у вас нету файла манифеста, то хотя бы title должен быть нормальным. А вот иконка в виде буквы “G” появилась сама (не понятно, почему именно G).
А сам сайт будет выглядеть так

Тут, собственно, ничего особенного, кроме того, что мы можем убрать адресную строку, чтобы приложение было похоже на нативное.

Встречайте, manifest.json!

Генерируй и властвуй.

Конечно, можно написать весь манифест ручками, но это скучно, долго и можно ошибиться. Уже нашлось немало умельцев, которые автоматизировали этот процесс. Ниже небольшой обзор инструментов для автоматической генерации манифеста.

brucelawson.github.io/manifest — все что вам нужно – заполнить поля (есть краткое описание каждого параметра, так что процесс довольно легкий), остальное за вас сделает генератор.

www.favicon-generator.org — хоть прямое назначение этого сайта генерировать иконки, а не манифест. Он все же его создает и в отличии от предыдущего у вас уже будут и иконки (для iOS и Аднроид) и манифест. Правда, манифест придется подправить (изменить имя и прочее настройки).

manifest-validator.appspot.com — этот инструмент предназначен для валидации вашего манифеста.

Результат

Итак иконки нарисовали, манифест сделали. Дальше надо сообщить браузеру о манифесте, добавив в тег head следующие

Все. Смотрим, что получилось
Иконка:

Слева до. Справа после (иконка получилась невпечатлительная, с удовольствием поменяю, если пришлете лучше). Тут уже заметно, что Android использовал имя из поля short_name, так как name не помещается, видимо.

Загрузка приложения:

Тут самые приятные изменения. Во-первых, вместо белого экрана вы видите подобие splash screen, который сам создается системой из иконки, полного имени и цвета, указанного в манифесте (возможно, это происходит только на android 5.0 выше). Во-вторых, этот splash screen плавно исчезает, что визуально красиво.

Сам сайт:

Тут тоже все стало лаконично. Без UI браузера сайт смотрится гораздо лучше и больше похож на нативное приложение.

Я перечислил не все свойства, которые можно указать в файле манифеста. С полным списком можно ознакомиться здесь
Демо приложение
Репозиторий приложения

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

Источник

Справка по манифестам

Манифест – это файл JSON ( appsscript.json ) из проекта коннектора на платформе Apps Script. Он содержит информацию о вашем коннекторе, необходимую для его развертывания и использования в Студии данных. Подробнее о манифестах проектов Apps Script…

Ниже описана информация, которая должна быть представлена в манифесте.

AuthType

Вы можете выбрать один из следующих методов аутентификации:

FeeType

Для свойства FeeType можно выбрать одно из следующих значений.

Sources

Пример манифеста для коннектора с открытым кодом

Ниже приведен пример заполненного манифеста.

Источник

What is manifest.json file and how it is useful

The manifest.json is a simple JSON file in your website that tells the browser about your website on user’s mobile device or desktop. Having a manifest is required by Chrome to show the Add to Home Screen prompt.

When user installs or bookmark your web application to the homescreen or adds it to an application launcher, manifest.json provides to the browser so that it can treat your website the name, icons, etc. There are then more advanced features that you would need, like being able to indicate the preferred orientation and if you want your app to be fullscreen.

The manifest.json file contains details of your website app name, icons it should use, the start_url it should start at when launched, and many other details.

You can add bellow code if your Manifest file is manifest.webmanifest.

First check if manifest.json is applied in the browser. For that open developer window by pressing shortcut F12. In Application tab, click Manifest option and see if it displays information that you have set.

Explanation

Let’s discuss some of most used options in the manifest.json file.

«short_name»: «HackTheStuff»,
«name»: «HackTheStuff blogging platform»,

«short_name» is the very short name of your web application that is displayed in homescreen or in the menu. «name» is bigger name and alias of your web application that is useful when user search in phone or desktop searchbar.

«icons»: [
<
«src»: «/images/icons-128.png»,
«type»: «image/png»,
«sizes»: «128×128»
>
],

«icons» option is the logo of your application that will display in the homescreen or the menu. It is a json array of icons object. Every object contains src, sizes and type property You can add different size of your logo and add them in manifest.json file in nested object. It will automatically adds responsive size of icon in different size of the displays.

«start_url»: «/index.html»,

«start_url» is the root URL of your web application that will always open first.

«display»: «standalone»,

«display» will tell how to display website in the browser. Options are fullscreen, minimul-ui, standalone, or browser. «standalone» will display as normal with statusbar and «fullscreen» will display in fullscreen.

«orientation»: «landscape»

«orientation» will set your application default orientation, when open.

«background_color»: «#3367D6»,
«theme_color»: «#3367D6»
In Android system, Google Chrome and other browsers, «background_color» and «theme_color» will set on splash screen that show while your site is loading.

«scope»: «/app/»,

«scope» controls the URLs that navigates all the entry and exit points in your web application. If the user opens that is outside the scope, then it opens in normal web page inside a browser tab/window.

Источник