Drukkennisgewings in React Native

Blog

Skep React Native-stootkennisgewings | Tutoriaal

Leer hoe om stootkennisgewings te skep en te stuur in React Native met @Alex Merced.



00:15 Wat is stootkennisgewings?
03:05 Drukkennisgewings in React Native
05:17 Die opstel van die projek
07:18 Kry en berg stootkennisgewingtokens
12:52 Hantering van ontvangde kennisgewings
14:40 Stuur toetskennisgewings


Hoe om stootkennisgewings in React Native te skep en te stuur

Hier is hoekom stootkennisgewings gewild is vir besighede en gebruikers en hoe om dit in React Native-toepassings te stuur.



Stootkennisgewings - boodskappe van toepassings wat gestuur word aan gebruikers wat die toepassing geïnstalleer het - het 'n belangrike aspek geword om in ag te neem wanneer toepassings vir besighede en gebruikers gebou word.

Dit is soortgelyk aan SMS-boodskappe, maar dit kos niks om te stuur nie. Gevolglik verkies baie besighede nou stootkennisgewings om inligting en waarskuwings uit te stuur aan gebruikers wat hul toepassings geïnstalleer het. In hierdie artikel gaan ons kyk na stootkennisgewings in Reageer inheems .



Wat is stootkennisgewings?

Stootkennisgewings is boodskappe of waarskuwings wat gestuur word deur die vervaardigers van 'n toepassing wat die gebruiker geïnstalleer het. Daar is twee hooftipes kennisgewings, naamlik voorgrond- en agtergrondkennisgewings.

'n Voorgrondkennisgewing is 'n kennisgewingtipe wat die gebruiker kry wanneer die toepassing tans oop en loop, terwyl agtergrondkennisgewings gestuur word of die toepassing tans oop is of nie.

Stootkennisgewings is om 'n aantal redes gewild in die wêreld van mobiele toepassings, insluitend:

  • Dit stel firmas in staat om produkte en aanbiedinge teen 'n verlaagde koste te adverteer
  • Hulle verbeter die algehele gebruikerservaring
  • Hulle help om transaksiekwitansies vinniger te stuur
  • Hulle word gebruik om meer gebruikers om te skakel

Stootkennisgewingsargitektuur in React Native

Stootkennisgewings in React Native APN FCM

Stootkennisgewingsargitektuur in React Native

As dit kom by stootkennisgewings in React Native, is daar drie maniere om stootkennisgewings op te stel:

  • Apple Push Notification Service (APN)
  • Expo Push Kennisgewing diens
  • Firebase Cloud Messaging (FCM)

APN'e word deur Apple as 'n wolkdiens gebruik vir iOS-kennisgewings, en jy sal jou toepassing moet registreer om toegang tot een te kry. Een van die voordele van APN is dat dit jou toelaat om kennisgewings aan die gebruiker te stuur sonder om hul onderskeie IP-adresse te ken.

FCM word deur Google verskaf en kan in jou backend-stelsel geïnkorporeer word of onafhanklik gebruik word. Met APN'e en 'n FCM kry die ontwikkelaar slegs die toesteltoken van die toestelle af, terwyl hierdie wolkdienste daarop fokus om stootboodskappe na die gebruikerstoestel te stuur.

Expo Push Notification dienste word verskaf deur Ekspo en React Native, wat gratis werk en vir Expo-bestuurde React Native-toepassings soos die een wat ons vir hierdie tutoriaal gaan gebruik.

Om stootkennisgewings in 'n React Native-toepassing te gebruik, moet ons eers die toepassing registreer om 'n stootkennisgewingtoken te kry. Hierdie teken is 'n lang string wat elke toestel uniek identifiseer. Dan sal ons die teken in 'n databasis op die bediener stoor, 'n kennisgewing stuur en die ontvangde kennisgewings hanteer wat ons gestuur het.

Stel jou projek op

Voordat ons te diep induik, gaan ons stootkennisgewings by 'n projek voeg wat reeds geïnisialiseer is. Hierdie projek is 'n e-handel React Native toepassing vir die verkoop van gebruikte items. Om dit plaaslik te inisialiseer, voer die volgende opdrag in jou terminaal uit:

|_+_|

Vervolgens installeer ons die afhanklikhede wat nodig is vir die projek en begin ons bediener:

gare installeer gare begin

Dit inisialiseer 'n React Native-projek waarop gekyk kan word Android Studio met behulp van 'n emulator of op jou eie toestel met Expo. Vervolgens kry ons 'n stootkennisgewingteken van React Native Expo.

hoe om tokens op 'n trustportefeulje te verkoop

Kry tans 'n stootkennisgewingtoken

Om stootkennisgewings in 'n React Native-toepassing te gebruik, moet ons eers die toepassing registreer om 'n stootkennisgewingtoken te kry. Hier sal ons die kennisgewings-API in Expo gebruik.

Om dit te doen, kom ons |_+_| in die |_+_| gids en die |_+_| komponent. Hier gaan ons 'n teken van Expo aflei. Kom ons kry die |_+_| en |_+_| funksies van Expo hieronder:

|_+_|

Die bogenoemde funksies help ons om gebruikerstoestemmings te versoek om 'n stootkennisgewing te stuur. Nou sal ons 'n async-funksie in die |_+_| skryf komponent wat 'n teken van React Native Expo sal versoek:

|_+_|

In die kode hierbo gebruik ons ​​die |_+_| module wat ons onlangs geïnstalleer het om die gebruiker se toestemming vir kennisgewings te kry. Die funksie wag om die toestemmingsvoorwerp te ontvang. Vervolgens kyk ons ​​of die toestemming verleen is, en as dit nie is nie, keer ons dadelik terug.

Om die teken te kry, wag ons op 'n oproep na |_+_| funksies om die Expo-stootkennisgewingstoken te kry en die token vir eers op die konsole aan te teken. Om moontlike foute op te spoor, draai ons die kode in 'n |_+_| blok.

Om die bogenoemde funksie vir ons toepassing te noem, gaan ons die |_+_| gebruik haak van |_+_|:

|_+_|

In die kode hierbo het ons die |_+_| geslaag haak wat ons vanaf |_+_| ingevoer het en het 'n funksie |_+_| geslaag om seker te maak dit word net een keer genoem. Ons het ook die leë draadjies bygevoeg sodat wanneer dit op 'n toestel gekyk word, die Expo-druktoken vertoon sal word.

Berg 'n stootkennisgewingtoken in 'n projek

Om 'n stootkennisgewing vanaf ons bediener te stoor en te gebruik, moet ons ons toepassinggebruikerskoppelvlak op 'n manier opstel dat dit nuwe gebruikers en toestelle kan registreer. Om dit te bereik, kom ons gaan na ons |_+_| gids in ons projek en maak 'n nuwe lêer oop wat ons sal noem |_+_|. Doen dan die volgende:

|_+_|

In die kode hierbo voer ons eers die kliëntmodule in, wat ook in die |_+_| is gids.

Ons definieer 'n funksie |_+_| wat 'n |_+_| neem. Nou sal ons 'n kliënt of nuwe gebruiker na die |_+_| plaas dit is op die agterkant |_+_|. In die liggaam van die versoek gaan ons 'n voorwerp |_+_| byvoeg wat op |_+_| gestel is. Dan sal ons as 'n verstekvoorwerp uitvoer met 'n |_+_| metode.

Volgende keer ons terug na die |_+_| komponent, en in plaas daarvan om ons teken op die konsole aan te teken, sal ons dit na die bediener stuur.

|_+_|

Nou stuur ons die nuwe gebruiker om 'n teken en die gebruikerinligting te kry.

Stuur toetskennisgewings

Om toetskennisgewings in React Native met Expo te stuur, gaan eers na die ekspo-kennisgewings dokumentasie en vul die vereiste vorm in. Om egter te verseker dat jy jou kennisgewings ontvang, sal jy die volgende moet skryf wanneer jy die |_+_| In die vorm:

|_+_|

Dit laat React Native weet om die kennisgewing te stuur wanneer die toepassing op die voorgrond is.

Stuur kennisgewings op die bediener

Om stootkennisgewings na die bediener te stuur, moet ons een van die SDK's gebruik wat deur Expo verskaf word. As jy die dokumentasie , verskaf dit aan ons inligting oor hoe om stootkennisgewings op die bediener in baie tale te implementeer.

In hierdie tutoriaal sal ek met 'n NodeJS-bediener werk. Hier is 'n skakel na die bediener wat ek vir hierdie tutoriaal gebruik het. Ons sal die |_+_| besoek gids in die bediener en sluit die |_+_| SDK daarop. Om dit te doen, doen ons eers die volgende:

|_+_|

Volgende installeer ons die |_+_| pakkette met behulp van die opdrag:

|_+_|

Dan begin ons ons ontwikkelingsbediener met:

|_+_|

Gaan nou na die |_+_| lêer en voeg die |_+_| SDK na die pakkette.

|_+_|

Vervolgens sal ons 'n funksie skryf wat ons stootkennisgewings sal ontvang - beide die druktekens en die boodskap wat ons aan die gebruiker wil stuur. Dan sal ons 'n nuwe stuk-metode skep om die stootkennisgewings te hanteer.

|_+_|

Kom ons bepaal vervolgens hoe om kennisgewings wat ons ontvang het te hanteer.

Hanteer ontvangde kennisgewings in React Native

Om ontvangde kennisgewings te hanteer, moet ons eers 'n gebeurtenisluisteraar hê wat elke keer as die gebruiker op 'n kennisgewing gebel word, gebel sal word. Kom ons voeg 'n gebeurtenisluisteraar by ons |_+_| funksie wat die kennisgewingvoorwerp inneem:

|_+_|

Vervolgens sal ons kennisgewings stuur deur die |_+_| op ons blaaier (ons behoort die kennisgewings op ons blaaier te kan sien). Nou sal ons die kennisgewings moet sien wat gestuur is deur die luisteraars in te stel om die kennisgewings te ontvang:

|_+_|

Hier sê ons as die kennisgewingluisteraar 'n nuwe kennisgewing kry, moet dit dit aan die gebruiker vertoon.

Afsluiting

In hierdie artikel het ons gesien hoekom stootkennisgewings gewild is en hier om in die toepassingswêreld te bly, en ons het geleer hoe om stootkennisgewings in React Native-toepassings te stuur deur kennisgewingtokens by te voeg, dit vanaf die bediener te stuur en dit te vertoon op gebruikerstoestelle.

Jy kan meer lees in die Ekspo dokumentasie en Reageer inheemse dokumente.

www.youtube.com

Drukkennisgewings in React Native

Leer hoe om stootkennisgewings in React Native te skep en te stuur. Leer hoe om stootkennisgewings in React Native-toepassings te stuur deur kennisgewingtokens by te voeg, dit vanaf die bediener te stuur en dit op gebruikerstoestelle te vertoon.