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

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

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


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


Их на самом деле всего три.

Условие 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 интерфейсы стали предсказуемы. «Однопоточные», с транзакционным сценарием

[Перевод - recovery mode ] Темный режим: Hello darkness, my old friend

Dark mode остается главной тенденцией в дизайне сайтов и приложений. Мы нашли классную статью на

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

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

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

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

Собственный VPN клиент на JavaScript. 11 часть — Сборка приложения под Windows

P.S. Каждая часть — это часть, сама по себе смысла не имеет, чтобы обзавестись необходимым

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

    1. Max008

      7 апреля 2021 14:51

      Здравствуйте. Как отправить уведомление через PWA ?

      1. TCSE

        7 апреля 2021 18:28

        В нашем примере такой функции нет.

        А вам (вероятно) необходимо реализовать как в примере


        Вот тут https://favicon.tech/migratsiya-sajta-v-progressive-web-app-pwa/ информация на руском по данной теме.
        Быть может вам это поможет.

    1. Сергей

      12 декабря 2021 23:14

      Столкнулся с проблемой что async скрипты после установки pwa стали вести себя не очень адекватно. Есть мысли по этому поводу?
      Скриншот https://imgur.com/pod0rrl

      1. TCSE

        13 декабря 2021 11:30

        я бы предложил перевести скрипты метрик и прочих следилок в секцию до тега < /head >

        что бы они срабатывали раньше, чем происходит загрузка service worker
        других мыслей нет.

        1. Сергей

          13 декабря 2021 16:57

          Скорее всего это не поможет, у меня cloudflare добавляет в header свой скрипт с async он на скриншоте показан.

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

  • Смайлы и люди
    Животные и природа
    Еда и напитки
    Активность
    Путешествия и места
    Предметы
    Символы
    Флаги