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

В Веб-браузере Chrome существует функция позволяющая добавлять любой сайт (при соблюдении ряда условий) в качестве веб-приложения на главный экран гаджета.Это так называемый режим PWA Ready. Краткое видео для пониманияВсе что требуется для повторения данного результата - 3 текстовых файла на вашем сайте.pwa-sw.js - сам сервисВоркерpwa-manifest.json - манифест описывающий название приложения и его иконкиpwa-offline.html - заглушка для режима оффлайнТак как мы разрабатываем сайты исключительно на DataLife Engine то предметный разбор будет именно для структуры DLE.Добавляем в шаблон сайта функции Progressive Web App (PWA)Архив с файлами для самых нетерпеливых [attachment=56:Плагин для DLE 13 и выше]Установить можно через систему плагинов DLE или в ручную распаковав архив.1. Загрузить в папку /templates/ файлы: pwa-manifest.json pwa-offline.html2. В корень сайта загрузить файл pwa-sw.js3. В файл шаблона main.tpl перед закрывающим тегом вставить: {* Включаем режим PWA *} Перед закрывающим тегом вставит: {* Включаем режим PWA *} 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-offline.html
offline mode

Интернет-соединение не обнаружено

Страница в режиме оффлайн

Скорее всего у вас отвалился интернет, либо проблемы с доступом к хостингу нашего сайта, либо истек SSL сертификат и ваш веб-браузер блокирует загрузку сайта по не безопастному соединению.

Раз сайт временно не доступен, почитайте мои записи во Вконтакте или посмотрите фотки в Инстаграме

Ну а если хотите что-то написать, пишите электронные письма на адрес mail@tcse-cms.com

код pwa-sw.js // Это "Offline page" service worker const CACHE = "pwabuilder-page"; // TODO: замените следующее на правильную автономную резервную страницу i.e.: const offlineFallbackPage = "offline.html"; const offlineFallbackPage = "/templates/pwa-offline.html"; // Этап установки устанавливает автономную страницу в кеш и открывает новый кеш self.addEventListener("install", function (event) { console.log("[PWA Builder] Install Event processing"); event.waitUntil( caches.open(CACHE).then(function (cache) { console.log("[PWA Builder] Cached offline page during install"); if (offlineFallbackPage === "pwa-offline.html") { return cache.add(new Response("TODO: Update the value of the offlineFallbackPage constant in the serviceworker.")); } return cache.add(offlineFallbackPage); }) ); }); // Если какая-либо загрузка не удалась, она покажет автономную страницу. self.addEventListener("fetch", function (event) { if (event.request.method !== "GET") return; event.respondWith( fetch(event.request).catch(function (error) { // Следующее подтверждает, что запрос был для перехода к новому документу if ( event.request.destination !== "document" || event.request.mode !== "navigate" ) { return; } console.error("[PWA Builder] Network request Failed. Serving offline page " + error); return caches.open(CACHE).then(function (cache) { return cache.match(offlineFallbackPage); }); }) ); }); // Это событие, которое можно запустить с вашей страницы, чтобы сообщить программному обеспечению обновить автономную страницу. self.addEventListener("refreshOffline", function () { const offlinePageRequest = new Request(offlineFallbackPage); return fetch(offlineFallbackPage).then(function (response) { return caches.open(CACHE).then(function (cache) { console.log("[PWA Builder] Offline page updated from refreshOffline event: " + response.url); return cache.put(offlinePageRequest, response); }); }); });  код pwa-manifest.json { "dir" : "ltr", "lang" : "Russian", "name" : "TCSE-cms.com", "scope" : "/", "display" : "standalone", "start_url" : "https://tcse-cms.com/", "short_name" : "TCSE", "theme_color" : "#283645", "description" : "Студия разработки веб-сайтов", "orientation" : "any", "background_color" : "#283645", "related_applications" : "", "prefer_related_applications" : "false", "icons": [ { "src": "https://via.placeholder.com/192/", "sizes": "192x192", "type": "image/png" }, { "src": "https://via.placeholder.com/512/", "type": "image/png", "sizes": "512x512" } ], "generated" : "true" } Условия срабатывания PWAИх на самом деле всего три.Условие 1: Сайт должен иметь SSL версию, т.е. открываться по HTTPS протоколу.Условие 2:В файле манифеста должно быть указаны ссылки на иконки размером 192х192 и 512х512 (мы уже проставили там заглушки, пожалуйста замените их на свои иконки).Условие 3:Файл service worker должен быть в корне сайта (речь о /pwa-sw.js).Для тестирования своего PWA используйте встроенный в Google Chrome - LighthouseНо лучшим показателем того, что вы сделали все правильно будет автоматическое появление банера с предложением поставить приложение на главный экран вашего смартфонаВ настольной версии Хрома, кстати, тоже работает. Но скрыто в менюклик по пункту меню переоткроет сайт в виде веб-приложения