Всем привет. Зашел я на сайт InstantCMS с телефона и вылезла сверху подсказка «Скачайте (или установите) приложение InstantCMS» и кнопка «Установить». Скрин не успел сделать, больше никак не могу ее поймать. Вопрос: как сделать такую же подсказку?
Вопрос: как сделать такую же подсказку?
Написать код).
Написать код).
Спасибо
Эта подсказка — часть функционала pwa приложений. Выводится она браузером сама (при этом не совсем понянет механизм когда именно). Для того чтобы она появилась ваш сайт должен «стать» pwa. Для этого в каталоге есть дополнение.
instantcms.ru/addons/pwa-for-instantcms.HTML
По настройке в принципе всё легко.
По настройке в принципе всё легко.
Спасибо большое за разъяснение.
Попробовал через код, как советовали выше. Вроде бы получается, но надо дорабатывать.
Если кому интересна эта тема, то я своего добился при помощи нейросети. Написали с ней HTML-код, для моих нужд вполне подходит. В разделе «Виджеты и страницы» из раздела «Общие» берем HTML блок (я поставил его в Header в раздел «Лого+меню пользователя» на все страницы). Код:
<div id="icms-app-banner" style="display:none; position:fixed; top:10px; left:10px; right:10px; background:white; color:black; padding:14px 20px; text-align:center; z-index:99999; box-shadow:0 4px 12px rgba(0,0,0,0.1); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; border-radius:12px; max-width:500px; margin:0 auto;"> <div style="display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px;"> <span style="font-weight:500; font-size:15px;">📱 Установите наше приложение</span> <div style="display:flex; align-items:center; gap:12px;"> <a href="https://вашассылка" id="app-download-link" target="_blank" rel="noopener" style="background:#007bff; color:white; padding:8px 20px; border-radius:24px; text-decoration:none; font-weight:600; font-size:14px; white-space:nowrap;">Скачать</a> <button id="app-banner-close" style="background:transparent; border:none; color:#666; font-size:20px; cursor:pointer; padding:0; width:24px; height:24px; display:flex; align-items:center; justify-content:center;">×</button> </div> </div> </div> <script> (function() { function isWebView() { const ua = navigator.userAgent; // Ключевая проверка: наличие "Version/4.0" в Android WebView if (/Android.*Version\/4\.0.*Chrome/.test(ua)) { return true; } // Стандартная проверка if (/wv/i.test(ua)) return true; // Проверка для iOS WebView if (/iPhone|iPad|iPod/.test(ua) && 'standalone' in window.navigator && !window.navigator.standalone) { return true; } return false; } function isMobile() { return /Android|iPhone|iPad|iPod|Opera Mini|IEMobile|BlackBerry/i.test(navigator.userAgent); } function getCookie(name) { const nameEQ = name + "="; const ca = document.cookie.split(';'); for(let i = 0; i < ca.length; i++) { let c = ca[i]; while (c.charAt(0) === ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length); } return null; } function setCookie(name, value, days) { const expires = new Date(); expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000)); document.cookie = name + '=' + value + ';expires=' + expires.toUTCString() + ';path=/'; } if (isMobile() && !isWebView() && getCookie('icms_app_banner_shown') !== '1') { document.getElementById('icms-app-banner').style.display = 'block'; document.getElementById('app-banner-close').onclick = function() { document.getElementById('icms-app-banner').style.display = 'none'; setCookie('icms_app_banner_shown', '1', 14); }; document.getElementById('app-download-link').onclick = function() { setCookie('icms_app_banner_shown', '1', 365); document.getElementById('icms-app-banner').style.display = 'none'; }; } })(); </script>
- В третьей строке "📱 Установите наше приложение" можете вставить свой текст.
- В пятой строке ссылку на ваше приложение и «Скачать» можно поменять на «Установить».
Ключевые особенности:
- Всплывающая подсказка показывается только на мобильных устройствах
- Не показывается в WebView приложениях (как в моем случае)
- Если пользователь закроет эту подсказку, то она ему в следующий раз будет показана через 14 дней
- Если пользователь нажмет на кнопку «Установить», то будет показана только через 365 дней (год).
Настройки блока HTML блока следующие:
- Подзаголовок не показываем
- Дизайн: без шаблона контейнера, чтобы он нигде не высвечивался
- Шаблон виджета — html
- Доступ — без разницы. На ПК эта подсказка показываться не будет.
Буду рад вашим мнениям))
Тестирую второй день, полет нормальный! Чищу куки, захожу, проверяю. Все норм.
Кстати, можно ведь не только ссылку на приложение туда вставить, можно на другой ресурс.