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

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

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

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

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

Този урок изисква някои основни познания за React Native (Expo). Използвам Expo CLI, за да генерирам своя проект и NodeJS версия 14.16. Допълнителна реакция

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

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

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

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

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

Конфигурация на Google Android FCM

Време е да конфигурирате приложението си за Android с помощта на ключ на Firebase Server. Всички приложения за Android изискват този ключ и идентификатора на сървъра, за да изпращат насочени известия. Ако нямате API ключовете на Firebase Server, разгледайте нашата документация, за да научите „как да генерирате API ключ на Firebase сървър“.

Сега изберете вашия целеви SDK. Ще ви преведем през стъпките, за да получите първия си потребител и да изпратите първото си тестово известие по-късно в това ръководство.

В следващия екран, който се появява, ще видите своя идентификатор на приложение — копирайте този идентификатор на приложение, защото ще го използвате във вашето приложение Expo. НЕ кликвайте, за да Проверка на абонираните потребители или Готово още.

Част 2: Настройте Push Notification в React Native Expo

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

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

Приложение Expo:

expo init onesignal-rn-expo

Когато бъдете попитани, изберете някоя от опциите под Управляван работен поток. В моя случай избрах първата опция, която е празна.

cd onesignal-rn-expo
expo start

За допълнителни насоки вижте официалната документация на Expo относно „как да създадете ново приложение Expo“.

Инсталирайте приставката OneSignal Expo

Вътре в папката на вашия проект отворете вашия терминал и изпълнете следната команда, за да инсталирате пакета OneSignal Expo Plugin.

expo install onesignal-expo-plugin

След като инсталирате плъгина signal-expo-plugin, инсталирайте сега плъгина react-native-onesignal, като изпълните следната команда.

yarn add react-native-onesignal

Въпреки че onesignal-expo-plugin дефинира react-native-onesignal като зависимост и се поставя в node_module, това ще гарантира, че основните части ще бъдат изградени.

Ако сте забравили да изпълните следната команда, след като сте изградили своя проект, можете да поправите това, като изпълните expo prebuild — clean. Това трябва да изтрие android и ios и да направи чиста собствена компилация, след което да изпълни yarn add react-native-onesignal.

Конфигурирайте приставката

Във файла app.json/app.config.js добавете приставката към масива от приставки:

App.json

{
    "plugins": [
    	[
    		"onesignal-expo-plugin",
    		{
            	"mode": "development",
            	"devTeam": "91SW8A37CR"
            }
    	]
    ]
}

or

App.config.js

export default {
...
    plugins: [
        [
            "onesignal-expo-plugin",
            {
                mode: process.env.NODE_ENV || "development",
                devTeam: "91SW8A37CR"
            }
        ]
    ]
};

Опции на плъгина:

  • mode: използва се за конфигуриране на правото на „APNs среда“.
  • "development"
  • "production"
  • devTeam: *по избор* — използва се за конфигуриране на Apple Team ID. Можете да намерите вашия Apple Team ID, като стартирате expo credentials:manager.

Пример:

{
    "extra": {
    	"oneSignalAppId": "<YOUR APP ID HERE>"
	}
}

След това можете да получите достъп до стойността, която да предадете на функцията setAppId:

import OneSignal from 'react-native-onesignal';
import Constants from "expo-constants";
OneSignal.setAppId(Constants.manifest.extra.oneSignalAppId);

Като алтернатива, прехвърлете OneSignal App ID директно на функцията:

OneSignal.setAppId("YOUR-ONESIGNAL-APP-ID");

Стартирайте и изградете своето приложение

expo prebuild
# Build your native iOS project
$ expo run:ios
# Build your native Android project
expo run:android

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

Препоръчвам ви да стартирате приложението на действително устройство с Android, за да тествате известията. За да направите това, ще трябва да свържете устройството си с Android и да активирате режим за разработчици.

След като сте се свързали с устройството и сте активирали режима за програмист, стартирайте приложението на вашето устройство, като изберете вашето устройство като целево устройство. В моя пример стартирам приложението на Google Pixel 5.

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

За да завършите процеса на настройка, върнете се към таблото за управление на OneSignal до точката, от която сте спрели преди това. Щракнете върху _ Проверка на абонатите потребители _ и ще се появи зелено съобщение като това на изображението по-долу.

Кликнете върху бутона _ Готово _.

Изпратете първото си известие

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

Забележка: Известията са активирани на устройства с Android по подразбиране, ако сте деактивирали своите известия, уверете се, че сте ги активирали отново.

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

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

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

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

За да научите повече за приставката OneSignal Expo, посетете нашата «Документация за Push SDK за React Native (Expo).

Свържете се с нашата общност за разработчици

За да останете в течение с най-новите продуктови актуализации и иновации, следвайте Twitter на OneSignal Developers и се присъединете към нашия Discord сървър. Научете повече за общността на разработчиците на OneSignal и как да поддържате връзка, като следвате връзката по-долу.

›› Научете повече за общността на разработчиците на OneSignal

Добави файл

Актуализирайте тайната същност Отказ