Для устройств работающих на Android в веб-браузере Chrome можно добавить опцию которая будет помогать сохранять ярлык сайта на главном экране смартфона или планшета.
Добавляем в удобном место вашего мобильного шаблона кнопку, при клике на которую будем выводится уведомление с предложением добавить ярлык сайта на главный экран.
Работа скрипта основана на
https://github.com/Web-Art-Craft/dynamic-manifest Мы его немного доработали под реалии DataLife Engine
Скачать архив
Скачать файл: add-to-homescreen.zip [1,43 Kb] (cкачиваний: 135)
Структура архива Содержимое архива а именно папку
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качиваний: 64)
Небольшой плагин для DLE добавляет новые теги
[chrome] текст [/chrome] - отображает содержимое, если веб-браузер Chrome
[not-chrome] текст [/not-chrome] - отображает содержимое, если веб-браузер не Chrome
[safari] текст [/safari] - отображает содержимое, если веб-браузер мобильный Safari
[not-safari] текст [/not-safari] - отображает содержимое, если веб-браузер не мобильный Safari
2 Комментарии