Манифест PWA: простой способ создания манифеста веб-приложения

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

Для чего это?

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

Способы настройки вашего manifest.json

Начиная с нуля

Немного познакомившись с форматом данных JSON, вы сможете создать собственный манифест веб-приложения без каких-либо усилий.

Типичный файл manifest.json должен выглядеть примерно так:

 {
    "theme_color": "#f69435",
    "background_color": "#ffffff",
    "дисплей": "полноэкранный",
    "сфера": "/",
    "start_url": "/",
    "имя_приложения": "SimiCart",
    "short_name": "СимиКарт",
    "description": "Решения нового поколения для электронной коммерции Magento",
    "значки": [
        {
            "источник": "/icon-192x192.png",
            "размеры": "192x",
            "тип": "изображение/png"
        },
        {
            "источник": "/icon-256x256.png",
            "размеры": "256x",
            "тип": "изображение/png"
        },
        {
            "источник": "/icon-384x384.png",
            "размеры": "384x",
            "тип": "изображение/png"
        },
        {
            "источник": "/icon-512x512.png",
            "размеры": "512x",
            "тип": "изображение/png"
        }
    ]
}

Вы можете опустить некоторые части кода, но все же есть некоторые обязательные члены, без которых пользователь не сможет установить ваше PWA:

 имя, короткое имя, значки, отображение, start_url

• name : имя вашего приложения, которое отображается под значком вашего приложения на главном экране и в других местах. Сохраняйте значение свойства name коротким и простым.

• short-name : когда значение вашего свойства name не помещается на экране пользователя, будет использоваться значение этого свойства. Рекомендуется, чтобы ваше short-name не превышало 20 символов. На самом деле стрелять по 10 персонажей.

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

Например, одна только iOS требует 4 разных размера для 4 своих устройств:

• iPhone: 120 x 120 пикселей и 180 x 180 пикселей
• iPad Pro: 167 x 167 пикселей
• iPad и iPad mini: 152 x 152 пикселей

Даже Google Chrome требует как минимум 2 разных размера для полного удобства использования на iOS и Android:

• 512 х 512 пикселей
• 192 х 192 пикселей

Для того, чтобы иконка вашего изображения вызывалась, используется набор свойств, а именно src , type и sizes .

• src : путь к файлу изображения значка.
• types : тип файла изображения
• sizes : ширина x высота изображения в пикселях

 "значки": [ 
    {
       "источник": "/imgs/icon152.png",
       "тип": "изображение/png",
       "размеры": "192x192"
    },
    {
       "источник": "/imgs/icon215.png",
       "тип": "изображение/png",
       "размеры": "512x512"
    }
]

• display : указывает, как должно отображаться приложение. Для захватывающего и похожего на приложение опыта рекомендуется установить его в fullscreen (без пользовательского интерфейса). Однако также доступны такие варианты, как standalone , minimal-ui , которые менее затратны с точки зрения производительности, но они достигаются за счет потери иммерсивного опыта (строка состояния может по-прежнему отображаться).

• start_url : указывает путь, с которого запускается ваше приложение. Ваше значение start_url может быть простым / , если ваше приложение запускается из того же каталога .root, где хранится ваш manifest.json .

Необязательные члены

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

• scope : ограничивает пределы, до которых может дойти пользователь. Если пользователь выходит за рамки, он возвращается к обычной веб-странице внутри вкладки или окна браузера. Чтобы расширить свой веб-сайт, просто введите / или введите полный URL-адрес вашего веб-сайта.

Примечания :
— Поведение области scope по умолчанию — это каталог, из которого обслуживается ваш manifest.json .
– Любая ссылка, открытая в веб-приложении, будет отображаться в существующем окне PWA. Чтобы открыть любую ссылку во вкладке браузера, вам нужно добавить target="_blank" к тегу <a> .
– start_url должен быть в области видимости.

• background_color : указывает цвет фона в определенных контекстах приложения. В частности, это поле можно использовать для установки цвета фона экрана-заставки.

• theme_color : указывает цвет темы элементов пользовательского интерфейса веб-приложения, таких как адресная строка. Изменение применяется ко всему сайту и вступает в силу только тогда, когда сайт запускается с главного экрана.

Примечания . Ваши конфигурации на уровне страницы — например, метатег цвета темы: <meta name="theme-color" content="#3367D6"> — переопределяют значение вашего theme_color в манифесте веб-приложения.

• description : Это должно быть самоочевидным.

• shortcuts : определяет ярлыки для страниц в веб-приложении. Доступ к ярлыкам приложений можно получить, нажав и удерживая значок запуска приложения на Android или щелкнув правой кнопкой мыши значок приложения на панели задач (Windows)/док-панели (macOS).

 "ярлыки" : [
  {
    "имя": "Уведомления",
    "url": "/пользователь/уведомления/",
    "description": "Новости, которые вы пропустили"
  },
  {
    "name": "Создать новый заказ",
    "url": "/создать/заказать"
  },
  {
    "name": "Мой список желаний",
    "url": "/пользователь/список желаний"
  }
]

Использование генератора манифеста веб-приложения

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

Свяжите свой manifest.json

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

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

После ссылки на манифест веб-приложения все поддерживаемые браузеры теперь должны правильно распознавать ваш manifest.json . Полный список поддерживаемых в настоящее время браузеров см. на CanIUse.

Вывод

И это все для простого манифеста веб-приложения. Создание полнофункционального manifest.json не займет у вас много времени. И всего с несколькими дополнительными настройками ваше веб-приложение можно сделать устанавливаемым, как и любые другие PWA.