Paano Magpapatupad ng Mga Push Notification sa React Gamit ang Firebase

Paano Magpapatupad ng Mga Push Notification sa React Gamit ang Firebase
Ang mga mambabasang tulad mo ay tumutulong sa pagsuporta sa MUO. Kapag bumili ka gamit ang mga link sa aming site, maaari kaming makakuha ng isang affiliate na komisyon. Magbasa pa.

Ang mga push notification ay nagbibigay-daan sa mga application na magpadala ng mga napapanahong update, alerto, o personalized na mensahe nang direkta sa mga device ng mga user, anuman ang kanilang aktibong paggamit ng application. Tinitiyak ng mga notification na ito ang tuluy-tuloy na pakikipag-ugnayan ng user at agarang koneksyon.





Sa kaso ng mga web application, kinukuha ng browser ang mga notification na ito sa simula at pagkatapos ay ipinapasa ang mga ito sa kaukulang application.



MAKEUSEOF VIDEO OF THE DAY MAG-SCROLL PARA MAGPATULOY SA NILALAMAN

Mag-set Up ng Firebase Project

Sundin ang mga hakbang sa ibaba para magsimula at mag-set up ng proyekto sa Firebase:





  1. Tumungo sa Firebase Developer Console , mag-sign in gamit ang iyong Google email address, at i-click ang Pumunta sa Console button upang mag-navigate sa page ng pangkalahatang-ideya ng console.
  2. Sa page ng pangkalahatang-ideya ng console, i-click ang Gumawa ng proyekto button upang lumikha ng bagong proyekto. Pagkatapos ay ibigay ang pangalan ng proyekto.
  3. Kapag matagumpay na nalikha ang proyekto, mag-navigate sa page ng pangkalahatang-ideya ng proyekto. Kailangan mong magrehistro ng application sa Firebase para makabuo ng mga API key. Upang magrehistro ng isang app, mag-click sa Web icon, ibigay ang pangalan ng app, at mag-click sa Magrehistro ng app pindutan.
  4. Kopyahin ang code ng configuration ng Firebase pagkatapos irehistro ang iyong React app.

I-configure ang Serbisyo ng Firebase Cloud Messaging (FCM).

Kapag nairehistro mo na ang iyong application sa Firebase, ang susunod na hakbang ay i-configure ang serbisyo ng Firebase Cloud Messaging (FCM).

  1. Mag-navigate sa Mga setting ng proyekto pahina.
  2. Susunod, mag-click sa Cloud Messaging tab sa Mga setting ng proyekto pahina. Gumagamit ang Firebase Cloud Messaging ng mga pares ng key ng Application Identity para kumonekta sa mga external na serbisyo ng push. Para sa kadahilanang ito, kailangan mong buuin ang iyong natatanging susi ng pagkakakilanlan.
  3. Sa Cloud Messaging mga setting, mag-navigate sa Web configuration seksyon, at mag-click sa Bumuo ng key pair button para buuin ang iyong natatanging key.

I-set Up ang React App

Una, gumawa ng React app . Kapag na-install, magpatuloy at i-install ang firebase at react-hot-toast mga package na gagamitin mo para ipatupad ang mga push notification sa React app.



 npm install firebase react-hot-toast