Добавить на главный экран

Google в последнее время очень радует новыми функциями в браузере Chrome, постоянные читатели моего блога наверняка помнят мою детальную инструкцию «Как сделать push уведомление в браузере» она была очень популярна и я решил продолжить писать про хитрости, которые могут улучшить ваш сайт.

Речь пойдет о уведомлении на сайте, которая всплывает в мобильной версии сайта — «Добавить на главный экран». При нажатии на эту кнопку, на рабочем столе вашего телефона создается иконка с ссылкой на ваш сайт. Ссылка работает как приложение, т.е ваш сайт будет открываться как отдельное приложение. Меньше слов, больше дела. Начнем.

Шаг 1. Создание рабочего файла и добавление скрипта.

В первую очередь, в корневой папке вашего сайта, создайте пустой файл с названием — «service-worker.js«. И где нибудь в шаблоне вашего сайта (можно в футоре) добавьте следующий код:

<script>
if ('serviceWorker' in navigator) {
console.log("Will the service worker register?");
navigator.serviceWorker.register('service-worker.js')
.then(function(reg){
console.log("Yes, it did.");
}).catch(function(err) {
console.log("No it didn't. This happened:", err)
});
}
</script>

Шаг 2: Создание manifest.json файла.

Вторым этапом нужно также в корневой папке вашего сайта, создать файл manifest.json. И добавить запись в шаблон вашего сайта. Запись добавляется перед закрывающимся тегом </head>

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

Шаг 3. Редактирование manifest.json файла.

Третьи и заключительный этап. Это конфигурация manifest.json файла. Тут нужно быть предельно аккуратным и не копировать бездумно, вам нужно будет отредактировать его под себя.

{
"short_name": "Полезный сайт",
"name": "Полезный сайт - mindwork.su",
"theme_color": "#4A90E2",
"background_color": "#F7F8F9",
"display": "standalone",
"icons": [
{
"src": "/icons/icon-1x.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "/icons/icon-2x.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "/icons/icon-3x.png",
"type": "image/png",
"sizes": "144x144"
},
{
"src": "/icons/icon-4x.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "/"
}

В принципе тут должно быть все понятно. Но давайте разберем основные моменты:

  1. short_name — это «имя вашей иконки» которая отображается на главном экране мобильного телефона под знаком вашего приложения.
  2. name — Полное название вашего приложения.
  3. icons — установка различного размера значков под разные размеры экранов телефона. Вы можете заметить, что я постарался выбрать максимальное количество размеров. Также вы должны будете выбрать иконку вашего будущего приложения (ссылки вашего сайта) иконка должна быть в формате png, и совпадать с размерами которые указаны в настройках manifest.json файла. Вы должны будете скинуть свои иконки в папку в вашем сайте, и изменить путь к иконкам в настройках manifest.json файла.
  4. theme_color — эта настройка отвечает за цвет в адресной строке, можете выбрать цвет какой вам по душе.
  5. background_color — это цвет заставки вашего приложения.
  6. start_url — Это адрес ссылки куда будет направляться пользователь, после нажатия на иконку вашего сайта. Советую оставить «/» или если у вас есть мобильная версия сайта, то написать адрес мобильной версии сайта, например «/mobile». В этом случае, пользователь попадет на главную страницу вашей мобильной версии сайта.

На этом все, следите за новыми статьями моего блога, постараюсь про новые и интересные хитрости. Не забудьте поделиться ссылкой и сохранить у себя статью. :)

автор: Наманов Шухрат

Как сделать уведомление на сайте «Добавить на главный экран» в мобильной версии сайта.
60 оценок, Средняя оценка: 5 из 5

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *