Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

Ответы на часто задаваемые вопросы


 Поделиться

Информация на странице частенько изменяется, подпишитесь, чтобы быть в курсе обновлений.

 

Вопрос: Я сделал всё по инструкции, но баннер не появился!

Ответ: Убедитесь, что после активации модуля вы его разместили в макетах (схемах). Также рекомендую не спешить устанавливать какие-либо настройки ограничений работы модуля, например, установки ссылки или выбора группы покупателей. Также убедитесь, что очистили все кэши.

Для работы с модулями кэшев, нужно добавить эти страницы в исключения, какие части ссылки именно добавлять узнавайте в инструкциях этих модулей:

/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+ появилась возможность чистить кэш модуля из своего приложения:

Рекомендую использовать этот модуль и указать там ссылку:

https://mysite.by/admin/index.php?route=extension/module/bus_app/clear&user_token=[user_token]&redirect=[route]

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 */

 

 


Comments

С версии 1.0.12+ добавлена настройка window.busApp.setting['display'] - означает, что вы можете узнать в каком режиме экран пользователя: browser, minimal-ui, standalone, fullscreen - это даст понять через приложение-ли зашёл пользователь и исходя от этого скрыть или показать элемент сайта.

Пример использования:

window.addEventListener('busApp', function() {
	var button = document.querySelector('#bus-app');
	if (button) {
		var s = document.createElement('div');
		s.id = 'bus-app-success';
		document.body.appendChild(s);
		var success = document.querySelector('#bus-app-success');
		if (success && window.busApp.setting['display'] != 'browser') {
			success.innerHTML += '<div style="color:red">Приложение установлено</div>';
		}
		if (success && 'Notification' in window && Notification.permission === 'granted') {
			success.innerHTML += '<div style="color:red">Вы подписаны на уведомления</div>';
		}
	}
});

 

Поделиться комментарием


Ссылка на комментарий

×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.