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

Режим 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качиваний: 5)
Установить можно через систему плагинов 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 интерфейсы стали предсказуемы. «Однопоточные», с транзакционным сценарием отрисовки: пустой экран — загрузка — интерфейс. Разработчик Артём Белов из компании 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. Каждая часть — это часть, сама по себе смысла не имеет, чтобы обзавестись необходимым контекстом и не испытывать когнитивный диссонанс от отсутствия так необходимых блоков текста начните читать... читать далее

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent