Программистам
Инструкции по настройке сайта для работы в Converzilla
- Скрытие блоков сайта в приложении (COOKIE)
- Интеграция с Push-уведомлениями
- Скрытие блоков сайта в приложении (Через стили)
- Настройка звука для push-уведомлений
Скрытие блоков сайта в приложении (COOKIE)
При конвертации часто бывает, что некоторые блоки или скрипты не требуется запускать. Это можно сделать с помощью добавления JS или CSS на сайт после его загрузки, но такое добавление будет работать только после полной загрузки сайта. В этом случае пользователь может увидеть прыжки интерфейса, что нежелательно.
Самый лучший вариант обработки - использование COOKIE. Дело в том, что при загрузке сайта в приложении автоматически передается COOKIE - CONVERZILLA, и по этой COOKIE можно делать проверки на вывод информации на сайте.
☝ Таким образом вы можете скрыть все скрипты или выводить альтернативные блоки для мобильного приложения.
PHP пример:
if(!isset($_COOKIE['CONVERZILLA'])) {
echo '<div>Этот блок скрыт, в мобильном приложении.</div>';
}
if(isset($_COOKIE['CONVERZILLA'])) {
echo '<div>Этот блок показать, в мобильное приложении.</div>';
}
Python пример:
import os
if 'CONVERZILLA' not in os.environ:
print('Этот блок скрыт, в мобильном приложении.')
if 'CONVERZILLA' in os.environ:
print('Этот блок показать, в мобильное приложении.')
NodeJS пример:
var express = require('express');
var app = express();
var cookieParser = require('cookie-parser');
app.use(cookieParser());
app.get('/', function(req, res){
if(!req.cookies.CONVERZILLA) {
res.send('Этот блок скрыт, в мобильном приложении.');
}
if(req.cookies.CONVERZILLA) {
res.send('Этот блок показать, в мобильное приложении.');
}
});
Интеграция с Push-уведомлениями
После запуска приложения, UserID из OneSignal будет автоматически передаваться на страницы сайта при загрузке через COOKIE. Вы можете перехватить этот UserID на стороне сайта и связать его с текущим пользователем.
Используя этот UserID, вы можете отправлять персональные push-уведомления вашим клиентам.
Пример получения UserID на PHP:
if(!isset($_COOKIE['ONESIGNAL_USER_ID'])) {
$userID = $_COOKIE['ONESIGNAL_USER_ID'];
}
Стоит учесть что ONESIGNAL_USER_ID может появиться не сразу а например через 10-30 секунд после начала использования приложения при самом первом запуске.
Пример получения UserID в JS:
if(window.userId){
console.log("USER ID", window.userId);
}Аналогично userId может появиться не сразу, поэтому можно использовать функцию попытки получения userId, пока он не станет доступным:
function getUserId(callback){
let tryGetUserIdInterval = setInterval(()=>{
if(window.userId){
callback(window.userId);
clearInterval(tryGetUserIdInterval);
}
},3000);
}
getUserId((userId)=>{
console.log("userId", userId);
})Навигация через Push-уведомления
Если вы хотите, чтобы при нажатии на push-уведомление пользователь не только перешел в приложение, но и был направлен на одну из страниц сайта, передайте параметр url в параметре data запроса.
Если в приложении только 1 язык для уведомлений, например только русский, то используйте ключ en, так как он является ключом по умолчанию.
Пример на PHP:
$fields = array(
'app_id' => 'ВАШ app_id',
'include_player_ids' => ["ONESIGNAL_USER_ID"]
'contents' => ["en" => "My Push"],
'headings' => ["en" => "Hi!"],
'data' => [
'url'=>"https://site.com/my/link"
],
);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://onesignal.com/api/v1/notifications");
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
'Content-Type: application/json; charset=utf-8',
'Authorization: Basic XXXXXXXXX',
));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($fields));
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_exec($ch);
curl_close($ch);
⚠️ Следует учесть, что если ссылка будет не с вашего сайта, то она откроется в браузере.
Скрытие блоков сайта в приложении (Через стили)
При конвертации вашего сайта в мобильное приложение с помощью сервиса Converzilla, в содержимое сайта автоматически добавляются определенные стили и классы. Эти изменения предназначены для оптимизации отображения вашего сайта в мобильном приложении.
Автоматическое добавление стилей
При конвертации вашего сайта в мобильное приложение с помощью Converzilla, в содержимое сайта добавляются следующие CSS классы:
1. .converzilla-hide: Этот класс скрывает элементы, устанавливая их свойство display в значение `none`:
.converzilla-hide {
display: none !important;
}2. .converzilla-show: Этот класс отображает элементы, устанавливая их свойство display в значение `block`:
.converzilla-show {
display: block !important;
}Кроме того, в тег `<body>` добавляется класс `converzilla`, который позволяет вам вносить изменения в стили сайта, чтобы он отображался по-другому в мобильном приложении.
Пример использования
Для изменения стилей элементов вашего сайта, когда он отображается в мобильном приложении, вы можете использовать класс `converzilla`, добавленный к тегу `<body>`. Например:
body.converzilla .your-element {
background-color: #f0f0f0;
color: #333;
}Этот пример изменит фон и цвет текста элемента с классом `your-element` только при отображении в мобильном приложении.
Тестирование
Чтобы протестировать изменения в отображении вашего сайта при конвертации его в мобильное приложение с помощью Converzilla, вы можете использовать следующий JavaScript код. Этот код добавит необходимые стили и класс converzilla к тегу <body> на вашем сайте.
(function() {
// Функция для добавления стилей
function addConverzillaStyles() {
var styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.innerHTML = `
.converzilla-hide {
display: none !important;
}
.converzilla-show {
display: block !important;
}
`;
document.head.appendChild(styleElement);
}
// Функция для добавления класса к body
function addConverzillaClass() {
document.body.classList.add('converzilla');
}
// Проверка, если документ уже загружен
if (document.readyState === 'complete' || document.readyState === 'interactive') {
addConverzillaStyles();
addConverzillaClass();
} else {
// Если документ еще не загружен, добавляем слушатель события DOMContentLoaded
document.addEventListener('DOMContentLoaded', function() {
addConverzillaStyles();
addConverzillaClass();
});
}
})();Инструкции по использованию
• Откройте ваш сайт в браузере.
• Откройте инструменты разработчика (обычно это F12 или Ctrl+Shift+I).
• Перейдите на вкладку “Консоль”.
• Вставьте код выше в консоль и нажмите Enter.
Полезные советы
- Используйте специфичность: Убедитесь, что ваши стили достаточно специфичны, чтобы переопределить существующие стили на сайте.
- Тестируйте изменения: Всегда проверяйте, как ваш сайт выглядит в мобильном приложении, чтобы убедиться, что все стили применяются корректно.
Конвертация сайта в мобильное приложение с помощью Converzilla предоставляет мощные инструменты для управления отображением вашего сайта. Используя предоставленные классы и стили, вы можете легко адаптировать внешний вид вашего сайта для оптимального взаимодействия пользователей в мобильном приложении.
Настройка звука для push-уведомлений
Подготовка файлов
Вот основные из них:
Для обновления (добавления) или замены звуковых файлов требуется полное обновление приложения в магазинах приложений.
Настройка в OneSignal
Android
В Android 8+ были введены категории уведомлений, которые необходимо настроить для кастомизации звуков уведомлений. OneSignal будет использовать звук, установленный в канале уведомлений для всех версий Android.
В личном кабинете откройте приложения для которого выполняете настройку.
 |
 |
 |
 |
 |
 |
| Не добавляйте расширение файла при указании звукового ресурса. Например, `audio_1`, а не audio_1.mp3 | Нажмите на созданный канал, чтобы увидеть уникальный ID канала. |
При отправке push-сообщений используйте свойство `android_channel_id` API для создания уведомления. Звук, установленный в категории, будет работать для всех версий Android.
iOS
Используйте свойство ios_sound в API Create Notification, добавляйте расширение файла при указании звукового ресурса, например audio_1.wav