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

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

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

Это так называемый режим PWA Ready.

Краткое видео для понимания

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

pwa-sw.js - сам сервисВоркер
pwa-manifest.json - манифест описывающий название приложения и его иконки
pwa-offline.html - заглушка для режима оффлайн

Так как мы разрабатываем сайты исключительно на DataLife Engine то предметный разбор будет именно для структуры DLE.

Добавляем в шаблон сайта функции Progressive Web App (PWA)

Архив с файлами для самых нетерпеливых Скачать файл: Плагин для DLE 13 и выше [4,81 Kb] (cкачиваний: 141)
Установить можно через систему плагинов DLE или в ручную распаковав архив.

1. Загрузить в папку /templates/ файлы:

pwa-manifest.json
pwa-offline.html

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

pwa-sw.js

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-offline.html


<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>offline mode</title>
    <style type="text/css">
        p {padding: 10px 0;}
        .text-left {text-align: left;}
        .text-right {text-align: right;}
        .text-center {text-align: center;}
        .btn {margin:10px; padding: 7px 10px; border: solid 1px;text-decoration: none;}
        .btn:hover {opacity: 0.6;}
    </style>
</head>
<body style="background-color: #EBE9EE; color: #000;">
    <div style="padding: 20px; margin: auto;">
        <h1 class="text-left">Интернет-соединение не обнаружено</h1>
        <h2>Страница в режиме оффлайн</h2>
        <p>
            Скорее всего у вас отвалился интернет, либо проблемы с доступом к хостингу нашего сайта, либо истек SSL сертификат и ваш веб-браузер блокирует загрузку сайта по не безопастному соединению.
        </p>
        <p>
            Раз сайт временно не доступен, почитайте мои записи во <a href="https://vk.com/" class="btn">Вконтакте</a> или посмотрите фотки в <a href="https://www.instagram.com/">Инстаграме</a>
        </p>
        <p>
            Ну а если хотите что-то написать, пишите электронные письма на адрес <a href="mailto:mail@tcse-cms.com" class="btn">mail@tcse-cms.com</a>
        </p>
    </div>
</body>
</html>

код 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

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

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

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

Другие публикации

Добавить на главный экран - скрипт для DLE: add-to-homescreen

Для устройств работающих на Android в веб-браузере Chrome можно добавить опцию которая будет

Тепловая карта кликов — как пользователи ведут себя на сайте

Сегодня у нас в руках множество инструментов, исследований и статей по ux/ui и том как сайт будут

Chrome Audit на 500: Часть 1. Лендинг

В инструментах разработчика браузера хром есть вкладка «Audit». На ней расположился инструмент

5 Комментарии

1. Max008
  
  7 апреля 2021 14:51
  Здравствуйте. Как отправить уведомление через PWA ?
  
  0
1. 1. TCSE
    
    7 апреля 2021 18:28
    
    В нашем примере такой функции нет.
    
    А вам (вероятно) необходимо реализовать как в примере
    
    Вот тут https://favicon.tech/migratsiya-sajta-v-progressive-web-app-pwa/ информация на руском по данной теме.
    Быть может вам это поможет.
    
    0
1. Сергей
  
  12 декабря 2021 23:14
  Столкнулся с проблемой что async скрипты после установки pwa стали вести себя не очень адекватно. Есть мысли по этому поводу?
  Скриншот https://imgur.com/pod0rrl
  
  0
1. 1. TCSE
    
    13 декабря 2021 11:30
    
    я бы предложил перевести скрипты метрик и прочих следилок в секцию до тега < /head >
    
    что бы они срабатывали раньше, чем происходит загрузка service worker
    других мыслей нет.
    
    0
  1. 1. Сергей
      
      13 декабря 2021 16:57
      
      Скорее всего это не поможет, у меня cloudflare добавляет в header свой скрипт с async он на скриншоте показан.
      
      0

Готовые решения

Вопрос-Ответ

Последние работы

О веб-студии

Корп сайты

Интернет-магазины

Блоги

Собственные проекты

Продукты

Добавляем в шаблон сайта функции Progressive Web App (PWA)

Ниже код всех трех файлов используемых для PWA Ready режима.

Условия срабатывания PWA

5 Комментарии

Написать комментарий