Делаем собственное Progressive Web App приложение для своего сайта. Manifest.json. Часть 3

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

Шаг 2. Работа с manifest

Создайте файл manifest.json и подключите его в index-ом файле вашего сайта:

Рассмотрим пример содержимого этого файла. Черным мои комментарии – их нужно будет удалить, если вы хотите использовать код, как за пример:

{
“name”: “Good Day”, //Полное название приложения
“short_name”: “GD”, //Короткое название приложения
“lang”: “ru-RU”, //Языковой тег (en-US)
“start_url”: “/”, //Какую страницу открывать при клике на иконку в мобильном
“display”: “standalone”, //Приложение будет выглядеть и ощущаться, как отдельное приложение.
“theme_color”: “#E6E6FA”, //Определяет цвет темы по умолчанию для приложения
“background_color”: “#E6E6FA”, //Заливка иконки
“icons”: [ //Иконки – обязательны 512/256/192/152/144/128/32
{
“src”: “/templates/new/icons/512.png”,
“sizes”: “512×512”,
“type”: “image/png”
},
{
“src”: “/templates/new/icons/android-chrome-384×384.png”,
“sizes”: “384×384”,
“type”: “image/png”
},
{
“src”: “/templates/new/icons/android-chrome-192×192.png”,
“sizes”: “192×192”,
“type”: “image/png”
},
{
“src”: “/templates/new/icons/favicon-32×32.png”,
“sizes”: “32×32”,
“type”: “image/png”
}
]
}

Также, есть и другие параметры, например:

“scope”: “https://site_demo.ru/mobile/” – если сайт находится не в корне, а например, в каталоге, то ставим путь каталога.

“description”: “Описание приложения”

После установки манифеста, нам нужно создать Service worker, который позволит кешировать сайт и дать ему возможность работать в автономном режиме.

Шаг 3: Service worker

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

‘use strict’;
importScripts(‘/sw-toolbox.js’);
toolbox.precache([
‘/index.php’,
‘/templates/new/css/0jquery-ui.css’,
‘/templates/new/css/1bootstrap.css’,
‘/templates/new/css/2font-awesome.css’
]);
toolbox.router.get(‘/templates/new/images/*’, toolbox.cacheFirst);
toolbox.router.get(‘/*’, toolbox.networkFirst, { networkTimeoutSeconds: 5 });

В precache мы указываем все файлы, которые хотим кэшировать. Здесь же указываем страницы, которые должны быть доступны пользователю при отсутствии интернета. Если сайт динамический (например, здесь настройки для Joomla) – то ставим главный index сайта. Если же сайт на html без движка, то перечисляем путь к каждой странице.

На последок, мы рассмотрим работу готового pwa приложения!