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

📅 {date}👁️ {views} просмотров📁 {category}

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

📅 22.10.2020👁️ 28752 просмотров📁 Наши разработки | Плагины для DLE
🏷️ Теги: верстка сайтов, PWA, javaScript

В Веб-браузере 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.html

2. В корень сайта загрузить файл
pwa-sw.js

3. В файл шаблона 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 режима.







    
    
    offline mode
    


    

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

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

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

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

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





// Это "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);
      });
    });
  });




{
	"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

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

В настольной версии Хрома, кстати, тоже работает. Но скрыто в меню

клик по пункту меню переоткроет сайт в виде веб-приложения