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

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

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

📅 16.04.2020👁️ 11596 просмотров📁 Наши разработки | Плагины для DLE

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

Работа скрипта основана на https://github.com/Web-Art-Craft/dynamic-manifest
Мы его немного доработали под реалии DataLife Engine
Скачать архив [attachment=38:add-to-homescreen.zip]
Структура архива

Содержимое архива а именно папку templates загрузить в корень вашего сайта.
После этого в списке шаблонов появится новая папка pwa это и есть набор скриптов.

Далее открываете свой шаблон сайта, который используете для мобильных устройств в файле main.tpl в секции перед тегом

вставляете код
{* Включаем add-to-homescreen режим *}

Далее в main.tpl перед тегом

вставляете код
{* Включаем add-to-homescreen режим *}



На этом скрипт подключен.
Вам остается вывести кнопку для его активации.
Сам код кнопки

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

Пример того, как это сделать

обратите внимание на чекбокс "разрешить использование тега банера в тексте новостей"

дополнительно можно указать и типы устройств на которых отображать этот банер-кнопку.
Далее прямо в тексте публикации просто вставляете тег банера
{banner_add-to-homescreen}

Вот и сама такая кнопка для тестов (видна только на смартфонах и планшетах)
{banner_add-to-homescreen}
Что бы протестировать кнопку "в живую" переключите шаблон на action_skin_change=yes&skin_name=smartphone
скриншот для тех, кто смотрим с десктопа :-)


Настройки скрипта DLE: add-to-homescreen


В базовом значении скрипт использует динамические параметры для генерации site.manifest
А именно:

Вам потребуется поставить вместо картинок-заглушек свои ссылки на иконки сайта.
например, заменить на
"icons": [
            {
                "src":"/favicon.png",
                "sizes": "48x48",
                "type": "image/png"
            },
            {
                "src": "/templates/smartphone/images/favicons/android-chrome-144x144.png",
                "sizes": "144x144",
                "type": "image/png"
            },
            {
                "src": "/templates/smartphone/images/favicons/android-chrome-196x196.png",
                "sizes": "196x196",
                "type": "image/png"
            },
            {
                "src": "https://via.placeholder.com/512/",
                "sizes": "512x512",
                "type": "image/png"
            }
        ]

Для генерации всех необходимых значений favicon используйте онлайн сервис https://realfavicongenerator.net

Раз кнопка работает только в веб-браузере Chrome то не помешало бы как-то настроить вывод скрипта исключительно для Хрома (и только на андройде).
[attachment=47:browser-selection_v0_1.xml]
Небольшой плагин для DLE добавляет новые теги

[chrome] текст [/chrome] - отображает содержимое, если веб-браузер Chrome
[not-chrome] текст [/not-chrome] - отображает содержимое, если веб-браузер не Chrome

[safari] текст [/safari] - отображает содержимое, если веб-браузер мобильный Safari
[not-safari] текст [/not-safari] - отображает содержимое, если веб-браузер не мобильный Safari