Программистам

Инструкции по настройке сайта для работы в Converzilla

Скрытие блоков сайта в приложении (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-уведомлений

Подготовка файлов

Подготовьте набор звуковых файлов которые вы будете использовать для push-уведомлений.
Для использования кастомных звуков в уведомлениях на Android существуют определённые требования.
Вот основные из них:
Поддерживаемые форматы: для Android - `mp3`, для iOS - `wav`.
Имя файла: должно быть написано маленькими буквами и без пробелов. Например, файл должен называться как `audio_1.mp3` или `notification_sound.wav`.
Длительность: Нет строгих ограничений на длительность звукового файла, но рекомендуется, чтобы файл был коротким (например, 2-5 секунд), так как уведомления обычно не требуют долгих звуков.
Каналы: Рекомендуется использовать моно
Громкость: Звуковые файлы не должны быть слишком громкими. 
Передайте архив с аудио-файлами для настройки и создании новых сборок мобильного приложения.

Для обновления (добавления) или замены звуковых файлов требуется полное обновление приложения в магазинах приложений.


Настройка в OneSignal

Android

В Android 8+ были введены категории уведомлений, которые необходимо настроить для кастомизации звуков уведомлений. OneSignal будет использовать звук, установленный в канале уведомлений для всех версий Android.

В личном кабинете откройте приложения для которого выполняете настройку.

Снимок экрана 2024-09-17 в 17.34.16.png Снимок экрана 2024-09-17 в 17.34.48.png
Снимок экрана 2024-09-17 в 17.35.19.png Снимок экрана 2024-09-17 в 17.35.35.png
Снимок экрана 2024-09-17 в 17.36.44.png Снимок экрана 2024-09-17 в 17.37.30.png
Не добавляйте расширение файла при указании звукового ресурса. Например, `audio_1`, а не audio_1.mp3 Нажмите на созданный канал, чтобы увидеть уникальный ID канала.

При отправке push-сообщений используйте свойство `android_channel_id` API для создания уведомления. Звук, установленный в категории, будет работать для всех версий Android.

iOS

Используйте свойство ios_sound в API Create Notification, добавляйте расширение файла при указании звукового ресурса, например audio_1.wav