Push известията са полезен инструмент за ангажиране и задържане на потребителите. В този урок ще ви покажем как да се интегрирате безплатно с OneSignal, за да използвате насочени известия във вашето приложение ReactJS.

OneSignal и Push API на вашия браузър

Push API на браузъра дава възможност на уеб приложенията да получават съобщения от сървър, независимо дали уеб приложението е на преден план или в момента е заредено в потребителски агент. Това ви позволява да доставяте асинхронни известия и актуализации на потребители, които се включат, което води до по-добра ангажираност с навременно ново съдържание.

Този урок ще обхване как да интегрирате насочени известия на OneSignal във вашето приложение, като използвате нашия типичен процес на настройка. Част първа от това ръководство обхваща процеса на настройка на OneSignal. Част втора от това ръководство обхваща как да се интегрирате с ReactJS, като използвате метод за основна настройка. Част трета обхваща разширен метод за настройка, който можете да приложите след завършване на основната настройка. Разширената настройка ще отключи още повече възможности за персонализиране на съобщения и автоматизация за вашия уебсайт или приложение.

Преглед на ръководството

Този урок изисква някои основни познания за React. Използвам Create React App, за да генерирам своя проект и NodeJS версия 14.16.

Допълнителни ресурси за настройка на ReactJS:

  • „Настройка за бърза реакция“
  • „Разширена настройка на React“

Създаване на вашето приложение React

Във вашия терминал изпълнете следните команди, за да създадете нов проект на React с помощта на Create React App:

npx create-react-app react-onesignal
cd react-onesignal
npm start

За официалната документация за Create React App, щракнете тук .

Част 1: Настройте своя акаунт в OneSignal

За да започнете, влезте във вашия акаунт в OneSignal или създайте безплатен акаунт. След това щракнете върху синия бутон, озаглавен Ново приложение/уебсайт, за да конфигурирате акаунта си в OneSignal, за да пасне на вашето приложение или уебсайт.

Въведете името на вашето приложение или уебсайт. Изберете _ Web Push _ като ваша платформа.

Щракнете върху синия бутон, озаглавен Напред: Конфигуриране на вашата платформа.

Уеб конфигурация

Под Избор на интеграция изберете опцията Типичен сайт.

В раздела Настройка на сайта въведете избраната от вас уеб конфигурация. В моя случай конфигурацията изглежда така:

Забележете, че за целите на тестването въвеждам моя URL адрес на локален хост (http://localhost:3000). Ако правите същото, не забравяйте да щракнете върху опцията ЛОКАЛНО ТЕСТВАНЕ. Това ще гарантира, че HTTP localhost ще се третира като HTTPS за тестване.

Под Настройка на подканата за разрешение ще видите три вертикални сини точки под заглавката Действия в най-дясната страна на екрана. Кликнете върху сините точки и изберете Редактиране от падащото меню.

Ще се отвори прозорец с конфигурацията на нашата подкана за слайд с насочено известие. Потвърдете, че автоматичната подкана е активирана (превключена надясно).

Под Показване на кога можете да промените второто увеличение, за да промените колко дълго подканата за слайд ще се забави, след като потребител посети вашата страница. Можете да го оставите така, както е, или можете да намалите секундите, така че вашата подкана да се появи по-рано. След като въведете избраното от вас увеличение на забавянето, щракнете върху сивия бутон Готово, разположен в долния десен ъгъл на прозореца.

След като щракнете върху Готово, превъртете надолу до долната част на страницата и щракнете върху Запазване, за да запазите избраните от вас автоматични подкани.

Ще бъдете пренасочени към друга страница с важна стъпка: Изтегляне на SDK файловете. Щракнете върху ИЗТЕГЛЯНЕ НА ONESIGNAL SDK ФАЙЛОВЕ и ги запазете на вашия компютър, за да ги изтеглите по-късно.

Под секцията, озаглавена Добавяне на код към сайта, ще видите сив бутон, който ви позволява да копирате кодовия фрагмент. Щракнете върху сивия бутон COPY CODE.

Част 2: Настройка на бързи насочени известия в ReactJS

В папката на вашия проект ReactJS отидете до публичната папка и отворете файла index.html. Вътре в HTML тага head поставете кода, който преди това сте копирали от страницата на OneSignal.

Сега намерете SDK файловете, които сте изтеглили на вашия компютър, и ги вмъкнете в папката src на вашето приложение ReactJS.

Разрешаване на уеб насочени известия

Стартирайте приложението ReactJS и посетете уебсайта си. След избрания от вас интервал на забавяне трябва да видите следната подкана:

Щракнете върху синия бутон Разрешаване, за да активирате насочените известия във вашия браузър.

Изпращайте уеб насочени известия

Време е да изпратите първото си уеб насочено известие! За да направите това, влезте в акаунта си в OneSignal и отворете раздела Табло за управление. На страницата на таблото щракнете върху синия бутон с надпис New Push.

Ще бъдете пренасочени към нов прозорец, който ще ви позволи да персонализирате своето насочено известие. Под Аудитория се уверете, че е избрано Изпращане до абонирани потребители. След това създайте своето съобщение, като добавите заглавие, съдържание и изображение. Тъй като това е първото известие, което вашите абонати ще получат, можете да изберете да създадете просто приветствено съобщение, за да потвърдите, че са се абонирали и да подсилите стойността, която известията ще предоставят.

Под секцията График за доставка изберете Незабавно и Изпрати до всички едновременно, за да изпратите до всичките си настоящи уеб абонати за push. Ако току-що сте приключили с настройката на вашия акаунт в OneSignal, има вероятност да сте първият и единствен абонат. Ако вашето приложение или уебсайт са силно посещавани и други потребители вече са избрали да получават насочени известия, може да искате да изберете Изпращане до конкретен(и) сегмент(и), за да тествате съобщението си върху конкретна аудитория. Когато сте готови да изпратите съобщението си, щракнете върху синия бутон Преглед и Изпрати в долната част на екрана.

Ще се появи малък изскачащ прозорец, за да прегледате съобщението си. След като сте доволни, щракнете върху синия бутон Изпращане на съобщение. Трябва да получите уеб насочено известие на вашето устройство! 🚀

Част 3: Разширена настройка на насочени известия в ReactJS

Ако искате възможността да използвате OneSignal в цялото си приложение ReactJS, изпълнете тези разширени стъпки за настройка на насочени известия, след като завършите настройката на бързите насочени известия.

Във вашия файл index.html премахнете следния код:

<script>
window.OneSignal = window.OneSignal || [];
OneSignal.push(function() {
  OneSignal.init({
    appId: "YOUR-APP-ID",
  });
});
</script>

Уверете се, че запазвате CDN връзката.

Във вашия файл App.js ще въведете следните редове код:

window.OneSignal = window.OneSignal || [];
const OneSignal = window.OneSignal;

Кодът по-горе ще накара обекта window да разбере свойството OneSignal. Това ще ви позволи да имате достъп до свойствата на OneSignal SDK, след като SDK се зареди във вашето уеб приложение.

В същия файл ще създадем useEffect. Тази кука ще има кода за инициализация, необходим за задействане на OneSignal. Не забравяйте да добавите масива на зависимостите [] към вашата кука useEffect. Методът init() от OneSignal може да бъде извикан само веднъж и масивът на зависимостите ще ни помогне да избегнем задействането на useEffect многократно, задействайки метода init().

useEffect(() => {
 OneSignal.push(() => {
   OneSignal.init({
     appId: "YOUR-APP-ID"
   })
 });
},[]);

Сега можете да продължите да разширявате своя код, за да използвате различни функции на OneSignal SDK във вашето приложение ReactJS, като предавате променливата OneSignal на различни компоненти. Можете също така да използвате настройка на персонализиран код, за да промените конфигурациите на подканата във вашето ReactJS приложение, без да използвате таблото за управление на OneSignal. За да научите повече за нашия Web Push SDK, посетете нашата уеб Push SDK документация.