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

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

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

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


Работа скрипта основана на https://github.com/Web-Art-Craft/dynamic-manifest

Мы его немного доработали под реалии DataLife Engine

Скачать архив add-to-homescreen.zip [1,43 Kb] (cкачиваний: 4)

Структура архива


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


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

вставляете код

{* Включаем add-to-homescreen режим *}
<link rel="manifest" id="custom-manifest">


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

</body>

вставляете код

{* Включаем add-to-homescreen режим *}
<script src="/templates/pwa/favicon-sw.js"></script>
<script src="/templates/pwa/favicon-script.js"></script>



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

Сам код кнопки

<div style="display: none;"> <input type="text" id="app_name"> <button id="set_app_name" type="button"> Сгенерировать манифест </button> </div> 
<button id="add_app_to_desktop" type="button" class="btn btn-success btn-sm btn-block">Добавить на главный экран</button>


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



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



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

дополнительно можно указать и типы устройств на которых отображать этот банер-кнопку.

Далее прямо в тексте публикации просто вставляете тег банера
{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 то не помешало бы как-то настроить вывод скрипта исключительно для Хрома (и только на андройде).

browser-selection_v0_1.xml [6,02 Kb] (cкачиваний: 3)

Небольшой плагин для DLE добавляет новые теги


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

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


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.


Похожие публикации

Плагин AMTS-tcse - расширенный переключатель мобильных шаблонов

Представляем вашему внимание: Advanced Mobile Templates Switch (AMTS-tcse) расширенный переключатель мобильных шаблонов позволяющий вместо шаблона smartphone используемый для всех типов мобильных... читать далее

Переключение шаблонов мобильной и настольной версии сайта в DLE

Хотя сейчас в моде исключительно адаптивные сайты, но они не всегда позволяют максимально эффективно решить задачу по адаптации контента под мобильные устройства. Зачастую проще сделать мобильную... читать далее

Версия сайта для слабовидящих - как сделать для DLE

Если вам приходилось разрабатывать сайт для государственных учреждений РФ, то вы уже должны знать о требовании к специализированной версии сайта для слабовидящих. Скрипт "версии для слабовидящих"... читать далее

Документация к модулю Форма Предзаказа

Модуль «Форма Предзаказа» предназначен для вывода на сайте формы отправки менеджерам сайта информации о выбранном продукте. Вызов формы предзаказа возможен как из краткой новости (shortstory.tpl),... читать далее

Снег на сайте - Jquery плагин

Наиболее современный способ реализации падающего снега на вашем сайте, работающем на движке DLE. Все, что требуется - распаковать архив из новости, загрузить папку со скриптами в шаблон сайта и... читать далее

Скрипт просмотра папки php_folder_viewer

Обзор содержимого папки всего одним файлом. Достаточно загрузить файл в нужную папку, например www.site.ru/folder1/ и открыть его адрес в веб-браузере, например www.site.ru/folder1/index.php... читать далее

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


@

  • 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