Web App Manifest (манифест) — это специальный файл (Web App Manifest с дополнительными полями для JS API), который сообщает браузеру, какие файлы нужно сохранять, а какие — заменять другим содержимым. В манифесте описывается информация, необходимая для работы технологии NativeCache.

В этой статье мы разберёмся, как создать Web App Manifest для мобильных устройств посетителей вашего сайта.

При посещении сайта в нижней части экрана появится уведомление с предложением добавить ярлык сайта на главный экран. После нажатия на это уведомление будет установлено «приложение», запуск которого обеспечит быструю загрузку сайта — быстрее, чем при открытии в обычном браузере, благодаря технологии Web App Manifest.

Как создать Web App Manifest

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

1. Short name — короткое название, желательно 2–3 слова, отражающее тематику сайта.
2. Name — полное название сайта, может быть доменом или слоганом.
3. Description — краткое описание приложения (до 200 символов).
4. Background color — цвет фона для экрана загрузки приложения.
5. Theme color — основной цвет оформления PWA.
6. Start URL — ссылка на главную страницу сайта.
7. Direction — выберите значение right.
8. Display — выберите standalone.
9. Orientation — выберите any.
10. Related application — укажите false.
11. Language — выберите RU или нужный язык, если сайт не на русском.
12. Upload image — загрузите логотип сайта размером 512×512 пикселей.

Пример заполненной формы выше. После ввода всех данных нажмите кнопку GENERATE MANIFEST.

После генерации вы получите:

1. Набор иконок (лого) для манифеста.
2. Готовый файл manifest.json.

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

После загрузки всех файлов на сервер, переименуйте файл с примерным названием dunplab-manifest-48526.json в manifest.txt и откройте для редактирования. Найдите и вставьте следующий фрагмент кода:

{
 "short_name": "Слоган сайта",
 "name": "Sitename.org",
 "lang": "ru",
 "description": "Описание сайта",
 "start_url": "https://site.ru/",
 "background_color": "#00aae7",
 "theme_color": "#00aae7",
 "dir": "ltr",
 "display": "standalone",
 "orientation": "any",
 "icons": [
 {
 "src": "/maskable_icon.png",
 "sizes": "144x144",
 "type": "image/png",
 "purpose": "maskable"
 },
 {
 "src": "/512x512.png",
 "type": "image/png",
 "sizes": "512x512"
 },
 {
 "src": "/android-icon-192x192-dunplab-manifest-48526.png",
 "type": "image/png",
 "sizes": "192x192"
 },
 {
 "src": "/apple-icon-180x180-dunplab-manifest-48526.png",
 "type": "image/png",
 "sizes": "180x180"
 }
 ]
}

Готовый пример файла manifest.json

{
 "short_name": "Слоган сайта",
 "name": "Sitename.ru",
 "lang": "ru",
 "description": "описание к приложению",
 "start_url": "https://site.ru/",
 "background_color": "#317efb",
 "theme_color": "#317efb",
 "dir": "ltr",
 "display": "standalone",
 "orientation": "any",
 "icons": [
 { "src": "/maskable_icon.png", "sizes": "144x144", "type": "image/png", "purpose": "maskable" },
 { "src": "/512x512.png", "type": "image/png", "sizes": "512x512" },
 { "src": "/android-icon-192x192-dunplab-manifest-48026.png", "type": "image/png", "sizes": "192x192" },
 { "src": "/apple-icon-180x180-dunplab-manifest-48026.png", "type": "image/png", "sizes": "180x180" },
 { "src": "/apple-icon-152x152-dunplab-manifest-48026.png", "type": "image/png", "sizes": "152x152" },
 { "src": "/apple-icon-144x144-dunplab-manifest-48026.png", "type": "image/png", "sizes": "144x144" },
 { "src": "/apple-icon-120x120-dunplab-manifest-48026.png", "type": "image/png", "sizes": "120x120" },
 { "src": "/apple-icon-114x114-dunplab-manifest-48026.png", "type": "image/png", "sizes": "114x114" },
 { "src": "/favicon-96x96-dunplab-manifest-48026.png", "type": "image/png", "sizes": "96x96" },
 { "src": "/apple-icon-76x76-dunplab-manifest-48026.png", "type": "image/png", "sizes": "76x76" },
 { "src": "/apple-icon-72x72-dunplab-manifest-48026.png", "type": "image/png", "sizes": "72x72" },
 { "src": "/apple-icon-60x60-dunplab-manifest-48026.png", "type": "image/png", "sizes": "60x60" },
 { "src": "/apple-icon-57x57-dunplab-manifest-48026.png", "type": "image/png", "sizes": "57x57" },
 { "src": "/favicon-32x32-dunplab-manifest-48026.png", "type": "image/png", "sizes": "32x32" },
 { "src": "/favicon-16x16-dunplab-manifest-48026.png", "type": "image/png", "sizes": "16x16" }
 ]
}

Подключение файла manifest.json в шаблон

Если вы выполнили все действия, осталось совсем немного — подключить файл манифеста к вашему сайту. Для этого в шаблоне, в используемых модулях, добавьте следующий код между тегами <head> и </head>:

<link rel='manifest' href='/manifest.json' type="application/manifest+json">

Готово. Теперь переходим к следующему этапу — подключению обработчика манифеста service-worker.

Подключение JS-скрипта service-worker

В глобальный блок «Нижняя часть сайта» добавьте следующий скрипт:

<script>
if ('serviceWorker' in navigator) {
 navigator.serviceWorker
 .register('/sw.js')
 .then(function (reg) {
 console.log('Registration succeeded. Scope is ' + reg.scope);
 })
 .catch(function (error) {
 console.error('Trouble with sw: ', error);
 });
}
</script>

Этот скрипт необходим для корректной работы манифеста. Также нужно загрузить файл sw.js в корень FTP вашего сайта.

Загрузить файл sw.js

Как проверить работу Web App Manifest (PWA)?

Проверить работу Web App Manifest можно в инструментах разработчика браузера Google Chrome или Яндекс.Браузера.

1. Откройте любую страницу вашего сайта.
2. Нажмите правой кнопкой мыши и выберите «Посмотреть код / Инспектировать элемент».
3. Перейдите на вкладку Lighthouse.
4. Выберите пункт Desktop, отметьте все категории и нажмите кнопку Generate report.

После окончания сканирования вы получите отчёт с результатами:

Как работает Web App Manifest на мобильных устройствах?

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

После установки сайт запускается как отдельное приложение и благодаря технологии Web App Manifest работает значительно быстрее.