Cum să integrați notificările push în PWA dvs

În tutorialul nostru de astăzi, vom integra notificările push într-un PWA folosind Firebase sau, mai precis, folosind funcția Cloud Messaging din cadrul acestuia, care permite trimiterea de mesaje folosind solicitări HTTPS.

Aplicații web progresive și notificări push

Deoarece Progressive Web App este cea a unei mișcări în continuă schimbare, nu este deloc surprinzător să vezi că tehnologia în sine a devenit la egalitate (din punct de vedere funcțional) cu omologul său nativ al aplicației.

 Lectură recomandată: PWA vs Native: Care ți se potrivește mai bine?

Declanșatoarele de notificare oferă dezvoltatorilor posibilitatea de a programa notificări, chiar dacă dispozitivul utilizatorului este în modul avion.

Jon Krafcik, Chrome Dev Summit 2019

Cu toate aceste schimbări radicale în vigoare, ar fi o risipă să nu profitați de ele pentru a genera și mai multe venituri pentru PWA. Și nici măcar nu este ceva prea complicat, deoarece ați putea configura cu ușurință o funcție de notificare push proprie folosind acest tutorial.

 Lectură recomandată: 9 caracteristici obligatorii ale unei aplicații web progresive (PWA) pentru comerțul electronic

Cum să integrați notificările push în PWA

În tutorialul nostru de astăzi, vom integra notificările push într-un PWA folosind Firebase , în special caracteristica Cloud Messaging din cadrul acestuia, care permite trimiterea de mesaje folosind solicitări HTTPS.

Cerințe preliminare

• Un cont Firebase (deoarece veți crea un proiect în Firebase)
• O aplicație web progresivă. Pentru o demonstrație simplificată, vom folosi o aplicație create-react-care este o PWA de bază care poate fi creată folosind o comandă

Pasul 1 : Creați un PWA de bază

Deoarece vom crea un PWA de bază folosind create-react-app, să descarcăm mai întâi NodeJS. După ce ați terminat de instalat NodeJS, deschideți NodeJS Command Prompt și rulați următoarele comenzi.

Pentru a crea o aplicație React simplă în directorul specificat:

 npx create-react-app directorul-pwa-tau

Schimbați directorul de lucru actual în aplicația React nou creată:

 cd-ți-pwa-directorul

Adăugați biblioteca JavaScript Firebase la proiect:

 npm instalează firebase --save 

Pasul 2: creați-vă push-notification.js

Următorul pas este să creați modulul care va fi responsabil de toate procesările de notificare. În <your-pwa-directory>\src , creați un fișier numit push-notification.js .

Mai întâi, să creăm o funcție care inițializează Firebase și transmite cheile proiectului. Puteți găsi cheile pentru proiectul dvs. accesând Firebase > Prezentare generală a proiectului → Setări proiect și faceți clic pe această pictogramă:

Aceasta vă va direcționa către o altă pagină care conține SDK-ul Firebase pentru PWA:

Acum că avem cheile pentru proiectul nostru, să adăugăm următorul cod în push-notification.js .

 import firebase din 'firebase';
export const initializeFirebase = () => {
  firebase.initializeApp({
    apiKey: „XXXXXXXXXXXXX”,
    authDomain: „XXXXXXXXXXXXX”,
    databaseURL: „XXXXXXXXXXXXX”,
    projectId: „XXXXXXXXXXXXX”,
    StorageBucket: „XXXXXXXXXXXXX”,
    messagingSenderId: „XXXXXXXXXXXXX”,
    appId: „XXXXXXXXXXXXX”
  });
}

Cu aceasta ați creat funcția responsabilă cu toate procesarea notificărilor, acum va trebui să o importați și să o apelați. Editați-vă index.js astfel:

 import React din 'react';
import ReactDOM din 'react-dom';
import './index.css';
importați aplicația din „./App”;
import * ca serviceWorkerRegistration din './serviceWorkerRegistration';
import reportWebVitals din „./reportWebVitals”;
import firebase din 'firebase';
import { initializeFirebase } din './push-notification';
ReactDOM.render(<App />, document.getElementById('root'));
initializeFirebase();

Pasul 3: Creați un lucrător de service

Service Workers este numele tehnologiei din spatele unei aplicații web progresive, care îi alimentează capacitatea offline, notificările push și stocarea în cache a resurselor.

SimiCart, tot ce trebuie să știți despre aplicațiile web progresive

Un lucrător de service este necesar pentru a primi evenimentul onMessage și, în consecință, pentru a permite trimiterea notificărilor către dispozitivul utilizatorului. În mod implicit, Firebase caută automat un fișier numit firebase-messaging-sw.js .

Să adăugăm firebase-messaging-sw.js în directorul în care sunt difuzate fișierele dvs. Deoarece al nostru este un proiect create-react-app , acest firebase-messaging-sw.js va fi trimis în folderul nostru public:

 importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js');
firebase.initializeApp({
    apiKey: „XXXXXXXXXXXXX”,
    authDomain: „XXXXXXXXXXXXX”,
    databaseURL: „XXXXXXXXXXXXX”,
    projectId: „XXXXXXXXXXXXX”,
    StorageBucket: „XXXXXXXXXXXXX”,
    messagingSenderId: „XXXXXXXXXXXXX”,
    appId: „XXXXXXXXXXXXX”
});
const mesaging = firebase.messaging();

Dacă nu ați auzit încă despre PWA Service Worker, avem un articol exclusiv pentru a afla totul despre această tehnologie uimitoare.

Pasul 4: Solicitați permisiunea utilizatorului pentru a trimite notificări

Este epoca confidențialității și nu vrei să-ți enervezi utilizatorii trimițând notificări nedorite și neautorizate!

Pentru a solicita permisiunea utilizatorului dvs., adăugați pur și simplu acest lucru la push-notification.js :

 import firebase din 'firebase';
 
export const initializeFirebase = () => {
  firebase.initializeApp({
    apiKey: „XXXXXXXXXXXXX”,
    authDomain: „XXXXXXXXXXXXX”,
    databaseURL: „XXXXXXXXXXXXX”,
    projectId: „XXXXXXXXXXXXX”,
    StorageBucket: „XXXXXXXXXXXXX”,
    messagingSenderId: „XXXXXXXXXXXXX”,
    appId: „XXXXXXXXXXXXX”
  });
}
 
export const askForPermissionToReceiveNotifications = asincron () => {
  încerca {
    const mesaging = firebase.messaging();
    așteaptă mesaje.requestPermission();
    const token = await messaging.getToken();
    console.log('Jetonul tău este:', token);
    
    jeton de returnare;
  } captură (eroare) {
    console.error(eroare);
  }
}

Și deoarece această funcție va trebui apelată de undeva, așa că o vom adăuga la un clic pe un buton. Editați fișierul app.js din directorul dvs. /src/ astfel:

 importați sigla din „./logo.svg”;
import './App.css';
import { askForPermissionToReceiveNotifications } din './push-notification';

function App() {
  întoarcere (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Editați <code>src/App.js</code> și salvați pentru a reîncărca.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Învață Reacționează
        </a>
		 <button onClick={askForPermissionToReceiveNotifications} >
          Faceți clic pentru a primi notificări
        </button>
      </header>
    </div>
  );
}

exportați aplicația implicită;

Acum haideți să începem proiectul nostru și ar trebui să vedeți un buton Faceți clic pentru a primi notificări astfel:

Faceți clic pe butonul și ar trebui să vedeți o fereastră pop-up care vă cere permisiunea:

Faceți clic pe Permite și verificați consola browserului dvs. Ar trebui să vedeți un mesaj care vă anunță despre simbolul dvs.:

Acum salvați acest simbol în altă parte, deoarece veți avea nevoie de el în pasul următor.

Pasul 5: Trimiteți notificări push cu Postman

În următorii pași, vom folosi Postman pentru a trimite notificări folosind serviciul de mesagerie în cloud al Firebase.

În Postman, creați o solicitare POST cu următoarele informații:

• Adresa URL a solicitării : https://fcm.googleapis.com/fcm/send

• Anteturi : în anteturile solicitării dvs. POST, va trebui să aveți următoarele chei:

Autorizare: cheie= SERVER_KEY

Tip de conținut : aplicație/json

Note : SERVER_KEY poate fi găsit în fila Cloud Messaging din setările Firebase

• Corp : completați corpul solicitării dvs. POST cu următorul cod:

 {
    „notificare”: {
        "title": "SimiCart",
        "body": "Testează notificarea push",
        "click_action": "http://localhost:3000/",
        „pictogramă”: „https://i.imgur.com/5zO5cce.png”
    }
    „to”: „USER_TOKEN”
}

Înlocuiți USER_TOKEN cu simbolul pe care l-ați obținut (făcând clic pe butonul Faceți clic pentru a primi notificări ) la Pasul 4. Nu uitați să alegeți Tipul corpului ca brut și JSON .

Acum faceți clic pe Trimiteți și ar trebui să vedeți o notificare care apare în colțul din dreapta jos:

Note : Aceste notificări apar numai când aplicația este în fundal sau minimizată.

Felicitări! PWA dvs. poate trimite acum notificări!

Concluzie

Sperăm că, după acest ghid, acum puteți configura cu încredere o funcție de notificare push proprie. Fiind o tehnologie nouă, Progressive Web Apps este cu siguranță un lucru complicat pentru utilizatorii care nu cunosc tehnologie, motiv pentru care există furnizori de soluții ușor disponibili, cum ar fi SimiCart, care se pot ocupa de fiecare nevoie cu anii noștri de experiență în PWA.