Информация на странице частенько изменяется, подпишитесь, чтобы быть в курсе обновлений.
Вопрос: Я сделал всё по инструкции, но баннер не появился!
Ответ: Убедитесь, что после активации модуля вы его разместили в макетах (схемах). Также рекомендую не спешить устанавливать какие-либо настройки ограничений работы модуля, например, установки ссылки или выбора группы покупателей. Также убедитесь, что очистили все кэши.
Для работы с модулями кэшев, нужно добавить эти страницы в исключения, какие части ссылки именно добавлять узнавайте в инструкциях этих модулей:
/index.php?route=extension/module/bus_app/notification
/index.php?route=extension/module/bus_app/push
/index.php?route=extension/module/bus_app/debug
/bus_app_install.js
Вопрос: У меня метрики перестали работать!
Ответ: Начиная с версии 1.0.10 появилась возможность указать ссылки на скрипты в исключения. Добавьте ссылки на скрипты метриков в поле "Ссылки на исключение из кэша" или отключите CacheStorage.
https://vk.com
https://www.instagram.com/alettools/
https://code-ya.jivosite.com
https://code.jivosite.com
https://node-ya6.jivosite.com
https://files.jivosite.com
https://www.gstatic.com
https://www.googletagmanager.com
https://www.google-analytics.com
https://www.google.com
https://mc.yandex.ru
https://connect.facebook.net
https://schema.org
/manifest.json
/index.php?route=product/search
Вопрос: Как настроить Push-уведомления?
Ответ: Начиная с версии 1.0.10 появилась возможность настроить Push-уведомления от сервиса FireBase
Включите в настройках push-уведомления, выберите из списка какие уведомления будете отправлять. Выберите из списка доступный сервис, например, FireBase.
На сайте FireBase создайте проект. Зайдите в настройки проекта во вкладку "Cloud messaging" сгенерируйте публичный и приватный ключ (key pair). Скопируйте с этой страницы
"srever key" в поле модуля "API ключ", "key pair" в поле модуля "Публичный ключ". Перейдите во вкладку "General" нажмите на кнопку "</>" и создайте приложение для получения html-кода. Полученный код установите в поле модуля "API HTML-код". Сохраняйте настройки, из другого устройства пробуйте подписаться, а из текущего отправить уведомление.
API HTML-код рекомендую привести к такому виду, если нужно, чтобы ошибки от firebase не мешали работать в Internet Explorer:
Синхронный вариант:
<!--[if !(IE)]><!--> <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js" type="text/javascript"></script> <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js" type="text/javascript"></script> <script type="text/javascript"> if ('firebase' in window && 'messaging' in window.firebase && firebase.messaging.isSupported()) { firebase.initializeApp({ apiKey: "rththhfghthhfht", authDomain: "trhrththrhtrh.firebaseapp.com", projectId: "thrthrthrth", storageBucket: "trtrtrt.appspot.com", messagingSenderId: "drgdrgdrgdrg", appId: "dfgdfgdfgrdgrgdg", measurementId: "drgdrgdrgdrgdrg" }); document.dispatchEvent(new CustomEvent('busAppService', {bubbles: true})); } else { window.addEventListener('busApp', function() { busApp.setting['push_status'] = false; }); } </script> <!--<![endif]-->
Асинхронный вариант:
<!--[if !(IE)]><!--> <script type="text/javascript"> import('https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js').then(function() { import('https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js').then(function() { if ('firebase' in window && 'messaging' in window.firebase && firebase.messaging.isSupported()) { firebase.initializeApp({ apiKey: "rththhfghthhfht", authDomain: "trhrththrhtrh.firebaseapp.com", projectId: "thrthrthrth", storageBucket: "trtrtrt.appspot.com", messagingSenderId: "drgdrgdrgdrg", appId: "dfgdfgdfgrdgrgdg", measurementId: "drgdrgdrgdrgdrg" }); document.dispatchEvent(new CustomEvent('busAppService', {bubbles: true})); } else { window.addEventListener('busApp', function() { busApp.setting['push_status'] = false; }); } }); }); </script> <!--<![endif]-->
<!--[if !(IE)]><!--> <script type="text/javascript"> function busAppLoadScript(url, callback) { var s = document.createElement('script'); s.type = 'text/javascript'; s.src = url; if (typeof callback !== 'undefined') { s.onreadystatechange = callback; s.onload = callback; } document.head.appendChild(s); } busAppLoadScript('https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js', function() { busAppLoadScript('https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js', function() { if ('firebase' in window && 'messaging' in window.firebase && firebase.messaging.isSupported()) { firebase.initializeApp({ apiKey: "rththhfghthhfht", authDomain: "trhrththrhtrh.firebaseapp.com", projectId: "thrthrthrth", storageBucket: "trtrtrt.appspot.com", messagingSenderId: "drgdrgdrgdrg", appId: "dfgdfgdfgrdgrgdg", measurementId: "drgdrgdrgdrgdrg" }); document.dispatchEvent(new CustomEvent('busAppService', {bubbles: true})); } else { window.addEventListener('busApp', function() { busApp.setting['push_status'] = false; }); } }); }); </script> <!--<![endif]-->
Вопрос: Как опубликовать приложение PWA в Google Play, App Store и Microsoft Store?
Ответ: Для Google Play и Microsoft Store есть сервис https://blog.pwabuilder.com/docs/generating-your-android-package/ по созданию TWA приложения, возможно это подойдёт и для App Store. Механизм создания TWA из админ панели скорее будет разработан по средством API.
Google Play: https://blog.pwabuilder.com/docs/android-platform/
Microsoft Store: https://blog.pwabuilder.com/docs/windows-platform/
App Store: https://blog.pwabuilder.com/docs/ios-platform/
Вопрос: Всё настроил, но приложение не предлагает установки.
Ответ: К сожалению в manifest.json должна быть хотя бы одна иконка размером 144х144 в формате png, поэтому устанавливайте иконку в целом в этом формате.
Вопрос: Не выводится оповещение о статусе подключения.
Ответ: Оповещение выводится на тех страницах, где установлен в макетах (схемах) баннер приложения.
Вы можете создать отдельный HTML модуль для вывода оповещения.
<style type="text/css"> /* необходимые стили */ #bus-app-line[hidden="true"], #bus-app-line [hidden="true"]{display:none !important} #bus-app-line [data-message="offline"]{color:red} #bus-app-line [data-message="online"]{color:limegreen} /* стили которые можно изменять */ #bus-app-line{position:fixed;margin:0;padding:0;top:0;left:0;width:100%;z-index:10000000000} #bus-app-line .close{position:absolute;z-index:1000;right:6px;top:6px;height:24px;width:24px;cursor:pointer} #bus-app-line .box{position:absolute;align-content:center;justify-content:center;width:100%;min-height:130px;font-size:18px;text-align:center;color:#fff;cursor:pointer;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background:#232323;padding:15px;z-index:999} #bus-app-line .box .line{width:100%} </style> <script type="text/javascript"> window.addEventListener('busAppBefore', function() { var button = document.querySelector('#bus-app'); if (!button) { var s = document.createElement('div'); s.id = 'bus-app'; s.style['display'] = 'none'; s.innerHTML = '<div data-button="install"></div><div data-button="notification"></div>'; document.body.appendChild(s); } var button = document.querySelector('#bus-app-line'); if (!button) { var s = document.createElement('div'); s.id = 'bus-app-line'; s.setAttribute('hidden', ''); s.innerHTML = '<div onclick="busApp.close(\'bus-app-line\');" data-close="bus-app-line"><img src="image/catalog/bus_app/close.png" width="32" height="32" alt="<?php echo $button_bus_app_close; ?>" title="<?php echo $button_bus_app_close; ?>" class="close"></div><div class="box" data-box=""><div class="line" data-message="offline"></div>'; document.body.appendChild(s); } }); </script>
------------------------------------------------------------------------------------------------------------------------------------------------------------------
Чтобы убрать или выводить определённые элементы сайта для разных режимов отображения, то правила стилей заворачивайте в такой код - где:
/* Отображать как в браузере - до установки приложения */ @media all and (display-mode: browser) { } /* Отображать с минимальным функциионалом (в ios не работает) - после установки приложения */ @media all and (display-mode: minimal-ui) { } /* Отображать в автономном режиме - после установки приложения */ @media all and (display-mode: standalone) { } /* Отображать во весь экран - после установки приложения */ @media all and (display-mode: fullscreen) { }
Чтобы убрать или выводить определённые элементы сайта для разных режимов сети, то правила скриптов заворачивайте в такие события - где:
// интернет пропал window.addEventListener('offline', function() { }); // интернет появился window.addEventListener('online', function() { });
С версии 1.0.8+ появилось событие которое происходит, когда код скрипта загружен и может выполнить ваш код. Это на случай, если найдёте полезным использовать функции модуля, например, window.busApp.ajax(), window.busApp.md5() и window.busApp.setting.
document.addEventListener('busApp', function(e) { console.log('BusApp - запущен, значит можем использовать функции BusApp: ', window.busApp); }); window.addEventListener('busApp', function(e) { console.log('BusApp - запущен, значит можем использовать функции BusApp: ', window.busApp); }); document.addEventListener('busAppNotification', function(e) { console.log('Функция Notification - запущена, значит можем выполнить ваш код: ', window.busApp); }); window.addEventListener('busAppNotification', function(e) { console.log('Функция Notification - запущена, значит можем выполнить ваш код: ', window.busApp); });
С версии 1.0.8+ скрипт для инициализации нажатия кнопки подписаться:
window.addEventListener('busAppBefore', function() { var button = document.querySelector('#bus-app'); if (!button) { var s = document.createElement('div'); s.id = 'bus-app'; s.setAttribute('style', 'display:none'); s.innerHTML = '<button data-button="install"></button><button data-button="notification"></button>'; document.body.appendChild(s); } }); window.addEventListener('busAppNotification', function() { if (Notification.permission !== 'granted') { var button = document.querySelector('#bus-app [data-button="notification"]'); if (button) { button.click(); } } });
C версии 1.0.10+ появилась возможность чистить кэш модуля из своего приложения:
Рекомендую использовать этот модуль и указать там ссылку:
HTML: <button type="button" onclick="window.location.href = 'https://mysite.by/admin/index.php?route=extension/module/bus_app/clear&token=fgddfgdfgdfhdfhdfh&redirect=extension/module/bus_cache';" data-toggle="tooltip" title="" class="btn btn-primary" style="background-color:#570fc2;" data-original-title="Очистить кэш PWA"><i class="fa fa-eraser"></i></button> - где: extension/module/bus_app/clear - роут модуля для 2.3.X-3.X module/bus_app/clear - роут модуля для 2.0.X-2.2.X extension/module/bus_cache - роут вашего модуля на который произойдёт редирект после чистки кэша. PHP: $message = $this->load->controller((version_compare(VERSION, '2.3.0', '>=') ? 'extension/' : false) . 'module/bus_app/clear');
С версии 1.0.10+ отправка пуш сообщения пользователю из админ панели:
//account_id - получить из таблицы oc_bus_app_account по customer_id или session_id //array(1 => 'сообщение') - 1 это id языка /* bus_app */ $file = DIR_CATALOG . 'controller/' . (version_compare(VERSION, '2.3.0', '>=') ? 'extension/' : false) . 'module/bus_app.php'; if (is_file($file)) { include_once($file); $class = 'Controller' . (version_compare(VERSION, '2.3.0', '>=') ? 'Extension' : false) . 'ModuleBusApp'; $message = (new $class($this->registry))->push(array( 'type' => 9, 'account_id' => 1, 'images' => array(1 => 'catalog/images.png'), 'titles' => array(1 => 'заголовок'), 'messages' => array(1 => 'сообщение'), 'urls' => array(1 => 'ссылка') )); // или $message = (new $class($this->registry))->push(array( 'type' => 9, 'account_id' => 1, 'language_id' => 1, 'image' => 'catalog/images.png', 'title' => 'заголовок', 'message' => 'сообщение', 'url' => 'ссылка' )); } /* bus_app */
С версии 1.0.10+ отправка пуш сообщения пользователю из каталога:
//account_id - получить из таблицы oc_bus_app_account по customer_id или session_id //array(1 => 'сообщение') - 1 это id языка /* bus_app */ $message = $this->load->controller((version_compare(VERSION, '2.3.0', '>=') ? 'extension/' : false) . 'module/bus_app/push', array( 'type' => 9, 'account_id' => 1, 'images' => array(1 => 'catalog/images.png'), 'titles' => array(1 => 'заголовок'), 'messages' => array(1 => 'сообщение'), 'urls' => array(1 => 'ссылка') )); // или $message = $this->load->controller((version_compare(VERSION, '2.3.0', '>=') ? 'extension/' : false) . 'module/bus_app/push', array( 'type' => 9, 'account_id' => 1, 'language_id' => 1, 'image' => 'catalog/images.png', 'title' => 'заголовок', 'message' => 'сообщение', 'url' => 'ссылка' )); /* bus_app */
