Режим PWA для сайта - добавить приложение на главный экран

В Веб-браузере Chrome существует функция позволяющая добавлять любой сайт (при соблюдении ряда условий) в качестве веб-приложения на главный экран гаджета.

Это так называемый режим PWA Ready.
Краткое видео для понимания
Все что требуется для повторения данного результата - 3 текстовых файла на вашем сайте.
pwa-manifest.json - манифест описывающий название приложения и его иконки
pwa-offline.html - заглушка для режима оффлайн
Так как мы разрабатываем сайты исключительно на DataLife Engine то предметный разбор будет именно для структуры DLE.
Добавляем в шаблон сайта функции Progressive Web App (PWA)
Архив с файлами для самых нетерпеливых
Установить можно через систему плагинов DLE или в ручную распаковав архив.
1. Загрузить в папку /templates/ файлы:
pwa-offline.html
2. В корень сайта загрузить файл
3. В файл шаблона main.tpl
перед закрывающим тегом
</head>
вставить:
{* Включаем режим PWA *}
<link rel="manifest" href="/templates/pwa-manifest.json">
Перед закрывающим тегом
</body>
вставит:
{* Включаем режим PWA *}
<script type="text/javascript">
// Проверяем совместимость браузера, в котором мы запускаем
if ("serviceWorker" in navigator) {
if (navigator.serviceWorker.controller) {
console.log("[PWA Builder] active service worker found, no need to register");
} else {
// Регистрация serviceWorker
navigator.serviceWorker
.register("/pwa-sw.js", {
scope: "/"
})
.then(function (reg) {
console.log("[PWA Builder] Service worker has been registered for scope: " + reg.scope);
});
}
}
</script>
4. Отредактировать содержимое файла /templates/pwa-manifest.json
Указать ссылки на свои иконки сайта в секциях
{
"src": "https://via.placeholder.com/192/",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://via.placeholder.com/512/",
"type": "image/png",
"sizes": "512x512"
}
Указать фирменный цвет для вашего приложения в секциях
"theme_color" : "#283645",
"background_color" : "#283645",
Указать свое название приложения вместо
"name" : "TCSE-cms.com",
А так же подробное описание, вместо
"description" : "Студия разработки веб-сайтов",
Вписать адрес своего домена, вместо
"start_url" : "https://tcse-cms.com/",
5. Отредактировать содержимое файла /templates/pwa-offline.html
К примеру на нашем сайте он выглядит так
Собственно данный файл необходим для тех случаев, когда клик по иконке приложения внезапно не смог соединится с сайтом и на экране посетителя отобразится страница-заглушка оффлайн режима.
Рекомендуется указывать на ней контактные данные, режим работы и прочую информацию важную для реальных посетителей.
Ниже код всех трех файлов используемых для PWA Ready режима.
Условия срабатывания PWA
Их на самом деле всего три.
Условие 1:
Сайт должен иметь SSL версию, т.е. открываться по HTTPS протоколу.
Условие 2:
В файле манифеста должно быть указаны ссылки на иконки размером 192х192 и 512х512 (мы уже проставили там заглушки, пожалуйста замените их на свои иконки).
Условие 3:
Файл service worker должен быть в корне сайта (речь о /pwa-sw.js).
Для тестирования своего PWA используйте встроенный в Google Chrome - Lighthouse
Но лучшим показателем того, что вы сделали все правильно будет автоматическое появление банера с предложением поставить приложение на главный экран вашего смартфона

В настольной версии Хрома, кстати, тоже работает. Но скрыто в меню
клик по пункту меню переоткроет сайт в виде веб-приложения
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.
Похожие публикации
Добавить на главный экран - скрипт для DLE: add-to-homescreen
Для устройств работающих на Android в веб-браузере Chrome можно добавить опцию которая будет помогать сохранять ярлык сайта на главном экране смартфона или планшета. Добавляем в удобном место вашего... читать далее
«Реактивный» интерфейс. Лекция Артёма Белова на FrontTalks 2018
В браузерном JavaScript интерфейсы стали предсказуемы. «Однопоточные», с транзакционным сценарием отрисовки: пустой экран — загрузка — интерфейс. Разработчик Артём Белов из компании Cxense с упором... читать далее
[Перевод - recovery mode ] Темный режим: Hello darkness, my old friend
Dark mode остается главной тенденцией в дизайне сайтов и приложений. Мы нашли классную статью на эту тему и решили поделиться переводом. Мнение пользователей, реализация и поддержка dark mode,... читать далее
Тепловая карта кликов — как пользователи ведут себя на сайте
Сегодня у нас в руках множество инструментов, исследований и статей по ux/ui и том как сайт будут читать и идентифицировать. Но главный вопрос остаётся открытым. А знаете ли именно вы, куда... читать далее
Chrome Audit на 500: Часть 1. Лендинг
В инструментах разработчика браузера хром есть вкладка «Audit». На ней расположился инструмент который называется Lighthouse, служит он для анализа насколько хорошо сделано веб приложение. Недавно я... читать далее
Собственный VPN клиент на JavaScript. 11 часть — Сборка приложения под Windows
P.S. Каждая часть — это часть, сама по себе смысла не имеет, чтобы обзавестись необходимым контекстом и не испытывать когнитивный диссонанс от отсутствия так необходимых блоков текста начните читать... читать далее