Как создать Web App Manifest PWA
Web App Manifest (Манифест ) — это специальный файл (Web App Manifest с дополнительными полями для JS API), который сообщает браузерам, какие файлы следует сохранять, а какие следует заменять другим содержимым. В манифесте описывается информация, необходимая для работы NativeCache.
Сегодня мы обсудим материал, в котором опишем решение, с помощью которого, мы cможем создать приложение Web App Manifest для мобильных устройств посетителей вашего сайта.
При посещении сайта в нижней части экрана устройства будет отображаться уведомление с предложением добавить на рабочий стол ярлык приложения вашего сайта. После нажатия на это уведомление вы установите приложение вашего сайта на ваш телефон, после запуска в данном приложении ваш сайт будет работать значительно быстрей чем обычно в браузере благодаря технологии Web App Manifest.
Как создать Web App Manifest ?
Основное, что вам нужно, это воспользоваться функционалом онлайн генератора манифеста: первый пример и второй пример, мы рекомендуем использовать именно первый пример так как он более расширенный.
- Short name - введите название тематики вашего сайта, заголовок с 2-3 слов.
- Name - обычно название вашего домена или слоган сайта.
- Description - описание к PWA приложению длиной не более 200 символов.
- Background color - цвет фона приложения PWA.
- Theme color - цвет темы PWA для вашего приложения.
- Start URL - введите адрес главной вашего сайта.
- Direction - выбрать значение right.
- Display - выбрать значение standalone.
- Orientation - выбрать значение any.
- Related application - выбрать значение false.
- Language - выбрать значение RU, хотя вы можете выбирать тот язык который вам необходим если у вас сайт не на русском языке.
- Upload image - выбрать изображение, основной логотип вашего сайта размером 512x512.
Пример настроек для манифеста показан на изображении немного выше, после как заполните форму, нажимаете на кнопку "GENERATE MANIFEST".
После генерации вы получаете готовые файлы:
- Иконки лого для нашего файла манифеста;
- Готовый файл manifest.json.
нажимая на кнопки с примера на изображении выше вы получите готовые файлы. Загрузите их на ваш компьютер и после загрузите в корень файлового менеджера вашего сайта.
Примечание! Корень файлового менеджера, это та директория, которую вы видите при открытии файлового менеджера. Загрузите ваш файл manifest.json и иконки формата png, переименовывать их не нужно. К этому же перечню изображений дополнительно добавьте файл лого 512х512 и так же загрузите в корень фтп сайта.
Важно! Переименование в txt формат нужно чтобы лишь отредактировать содержимое файла, после редактирования нужно вернуть формат для файла с txt в json.
После загрузки в корень фтп всех файлов, файл формата 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"
},
Важно! Выше добавлен код выделенный синим, это то что мы дополнили к содержимому файла манифеста, продублируйте на фтп в корень вашего сайта логотип для приложения разрешением 144х144 и переименуйте его на maskable_icon.png.
Примечание! После скачивания файла минифеста, переименуйте его на manifest.json. Так же важно, с файла манифеста перед переименованием удалите строку: "prefer_related_applications": "false", она нам не нужна. Как должен выглядеть файл в примере показано чуть выше.
Готовый файл 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"
}
]
}
Если вы выполнили все как рекомендовалось, осталось совсем немного, установить наш файл манифеста, в шаблоне в активных используемых модулях между тегов <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 обязателен для работы приложения, если его не загрузить и не установить как описано, выше приложение работать не будет. И еще важный момент, после загрузки в файловый менеджер данного скрипта, откройте его на редактирование и практически в самом низу подмените ссылку на изображение /android-icon-192x192-dunplab-manifest-48026.png там должна быть ваша ссылка.
Как проверить работу Web App Manifest PWA ?
Проверить работу Web App Manifest PWA можно в инструментах разработчика браузера Google Chrome или Яндекс браузера, на любой странице вашего сайта нажмите правую кнопку мыши и выберите пункт "Посмотреть код / Инспектировать элемент".
После перейдите в вкладку Lighthouse, выберите пункт Desktop, отметьте так же все категории в блоке и нажмите кнопку Generate report:
после окончания сканирования получим результат:
Как работает Web App Manifest PWA на мобильных устройствах ?
При посещении сайта на котором установлен файл манифеста, вам в нижней части экрана будет предложено установить приложение сайта на главный экран вашего устройства:
в результате сайт запускается как отдельное приложение и благодаря технологии Web App Manifest работает очень быстро.