Как создать PWA приложение или Web App Manifest для uCoz ?

Что такое Web App Manifest ?

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

Сегодня мы обсудим материал, в котором опишем решение, с помощью которого, мы cможем создать приложение Web App Manifest для мобильных устройств посетителей вашего сайта.

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

Заказать разработку PWA

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

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

1. Short name - введите название тематики вашего сайта, заголовок с 2-3 слов.
2. Name - обычно название вашего домена или слоган сайта.
3. Description - описание к PWA приложению длиной не более 200 символов.
4. Background color - цвет фона приложения PWA.
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 - выбрать изображение, основной логотип вашего сайта размером 512x512.

Пример настроек для манифеста показан на изображении немного выше, после как заполните форму, нажимаете на кнопку "GENERATE MANIFEST".

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

1. Иконки лого для нашего файла манифеста;
2. Готовый файл manifest.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"
 },

Готовый файл 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

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

Проверить работу Web App Manifest PWA можно в инструментах разработчика браузера Google Chrome или Яндекс браузера, на любой странице вашего сайта нажмите правую кнопку мыши и выберите пункт "Посмотреть код / Инспектировать элемент".

После перейдите в вкладку Lighthouse, выберите пункт Desktop, отметьте так же все категории в блоке и нажмите кнопку Generate report:

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

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

При посещении сайта на котором установлен файл манифеста, вам в нижней части экрана будет предложено установить приложение сайта на главный экран вашего устройства:

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

Заказать разработку PWA