Come integrare le notifiche push nella tua PWA

Nel nostro tutorial di oggi, integreremo le notifiche push in una PWA utilizzando Firebase o, più specificamente, utilizzando la funzione di messaggistica cloud al suo interno che consente l'invio di messaggi tramite richieste HTTPS.

App Web progressive e notifiche push

Poiché l'app Web progressiva è quella di un movimento in continua evoluzione, non sorprende vedere che la tecnologia stessa è diventata alla pari (dal punto di vista delle funzioni) con la sua controparte dell'app nativa.

 Letture consigliate: PWA vs Native: quale ti si addice meglio?

I trigger di notifica offrono agli sviluppatori la possibilità di pianificare le notifiche, anche se il dispositivo dell'utente è in modalità aereo.

Jon Krafcik, Chrome Dev Summit 2019

Con tutti questi cambiamenti radicali in atto, sarebbe uno spreco non approfittarne per aumentare le entrate della tua PWA. E non è nemmeno qualcosa di eccessivamente complicato in quanto potresti facilmente impostare una tua funzione di notifica push usando questo tutorial.

 Letture consigliate: 9 caratteristiche indispensabili di un'app Web progressiva (PWA) per l'e-commerce

Come integrare le notifiche push nella tua PWA

Nel nostro tutorial di oggi, integreremo le notifiche push in una PWA utilizzando Firebase , in particolare la funzione di messaggistica cloud al suo interno che consente l'invio di messaggi tramite richieste HTTPS.

Prerequisiti

• Un account Firebase (poiché creerai un progetto all'interno di Firebase)
• Un'app Web progressiva. Per una dimostrazione semplificata, utilizzeremo un'app create-react che è una PWA di base che può essere creata utilizzando un comando

Passaggio 1 : crea una PWA di base

Dato che creeremo una PWA di base usando create-react-app, scarichiamo prima NodeJS. Al termine dell'installazione di NodeJS, apri il prompt dei comandi di NodeJS ed esegui i seguenti comandi.

Per creare una semplice app React nella directory specificata:

 npx create-react-app your-pwa-directory

Cambia la directory di lavoro corrente nell'app React appena creata:

 cd la tua-pwa-directory

Aggiungi la libreria JavaScript Firebase al progetto:

 npm install firebase --save 

Passaggio 2: crea il tuo push-notification.js

Il prossimo passo è creare il modulo che si occuperà di tutte le tue elaborazioni di notifica. In <your-pwa-directory>\src , crea un file denominato push-notification.js .

Per prima cosa, creiamo una funzione che inizializzi Firebase e passi le chiavi del tuo progetto. Puoi trovare le chiavi per il tuo progetto andando in Firebase > Panoramica del progetto → Impostazioni del progetto e fai clic su questa icona:

Questo ti indirizzerà a un'altra pagina che contiene l'SDK Firebase per la tua PWA:

Ora che abbiamo le chiavi per il nostro progetto, aggiungiamo il codice seguente nel tuo push-notification.js .

 importare firebase da 'firebase';
export const initializeFirebase = () => {
  firebase.initializeApp({
    apiKey: "XXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXX",
    databaseURL: "XXXXXXXXXXXXX",
    ID progetto: "XXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXX",
    messagingSenderId: "XXXXXXXXXXXXXXX",
    appId: "XXXXXXXXXXXXX"
  });
}

Con questo hai creato la funzione che si occupa di tutta l'elaborazione delle notifiche, ora dovrai importarla e chiamarla. Modifica il tuo index.js in questo modo:

 import React da 'react';
importa ReactDOM da 'react-dom';
importa './index.css';
importa App da './App';
import * as serviceWorkerRegistration da './serviceWorkerRegistration';
importa reportWebVitals da './reportWebVitals';
importare firebase da 'firebase';
import { initializeFirebase } da './push-notification';
ReactDOM.render(<App />, document.getElementById('root'));
initializeFirebase();

Passaggio 3: crea un addetto ai servizi

Service Workers è il nome della tecnologia alla base di un'app Web progressiva, che ne potenzia le funzionalità offline, le notifiche push e la memorizzazione nella cache delle risorse.

SimiCart, tutto ciò che devi sapere sulle app Web progressive

È necessario un addetto al servizio per la ricezione dell'evento onMessage e, di conseguenza, per consentire l'invio di notifiche al dispositivo dell'utente. Per impostazione predefinita, Firebase cerca automaticamente un file chiamato firebase-messaging-sw.js .

Aggiungiamo firebase-messaging-sw.js alla directory in cui vengono serviti i tuoi file. Poiché il nostro è un progetto create-react-app , questo firebase-messaging-sw.js andrà nella nostra cartella pubblica:

 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: "XXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXX",
    databaseURL: "XXXXXXXXXXXXX",
    ID progetto: "XXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXX",
    messagingSenderId: "XXXXXXXXXXXXXXX",
    appId: "XXXXXXXXXXXXX"
});
const messaging = firebase.messaging();

Se non hai ancora sentito parlare di PWA Service Worker, abbiamo un articolo esclusivo per farti imparare tutto su questa straordinaria tecnologia.

Passaggio 4: richiedere le autorizzazioni utente per inviare notifiche

È l'era della privacy e non vuoi infastidire i tuoi utenti inviando notifiche indesiderate e non autorizzate!

Per richiedere l'autorizzazione del tuo utente, aggiungi semplicemente questo al tuo push-notification.js :

 importare firebase da 'firebase';
 
export const initializeFirebase = () => {
  firebase.initializeApp({
    apiKey: "XXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXX",
    databaseURL: "XXXXXXXXXXXXX",
    ID progetto: "XXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXX",
    messagingSenderId: "XXXXXXXXXXXXXXX",
    appId: "XXXXXXXXXXXXX"
  });
}
 
export const askForPermissionToReceiveNotifications = async () => {
  Tentativo {
    const messaging = firebase.messaging();
    await messaging.requestPermission();
    const token = await messaging.getToken();
    console.log('Il tuo token è:', token);
    
    gettone di ritorno;
  } cattura (errore) {
    console.error(errore);
  }
}

E poiché questa funzione dovrà essere chiamata da qualche parte, quindi la aggiungeremo con un clic di un pulsante. Modifica il file app.js nella tua directory /src/ in questo modo:

 importa il logo da './logo.svg';
importa './App.css';
import { askForPermissionToReceiveNotifications } da './push-notification';

funzione App() {
  Restituzione (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Modifica <code>src/App.js</code> e salva per ricaricare.
        </p>
        <a
          className="collegamento app"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Impara a reagire
        </a>
		 <button onClick={askForPermissionToReceiveNotifications} >
          Fare clic per ricevere le notifiche
        </pulsante>
      </intestazione>
    </div>
  );
}

esporta l'app predefinita;

Ora iniziamo il nostro progetto e dovresti vedere un pulsante Fai clic per ricevere notifiche in questo modo:

Fai clic sul pulsante e dovresti vedere un popup che richiede il tuo permesso:

Clicca su Consenti e controlla la console del tuo browser. Dovresti vedere un messaggio che ti informa del tuo token:

Ora salva questo token da qualche altra parte perché ti servirà nel passaggio successivo.

Passaggio 5: invia notifiche push con Postman

Nei prossimi passaggi, utilizzeremo Postman per inviare notifiche utilizzando il servizio di messaggistica cloud di Firebase.

In Postman, crea una richiesta POST con le seguenti informazioni:

• URL di richiesta : https://fcm.googleapis.com/fcm/send

• Intestazioni : nelle intestazioni della tua richiesta POST, dovrai avere le seguenti chiavi:

Autorizzazione: chiave= SERVER_KEY

Tipo di contenuto : application/json

Note : SERVER_KEY si trova nella scheda Messaggistica cloud nelle impostazioni di Firebase

• Corpo : compila il corpo della tua richiesta POST con il seguente codice:

 {
    "notifica": {
        "title": "SimiCart",
        "body": "Test di notifica push",
        "click_action": "http://localhost:3000/",
        "icon": "https://i.imgur.com/5zO5cce.png"
    }
    "a": "USER_TOKEN"
}

Sostituisci USER_TOKEN con il token che hai ottenuto (facendo clic sul pulsante Fai clic per ricevere le notifiche ) nel passaggio 4. Non dimenticare di scegliere Tipo di corpo come grezzo e JSON .

Ora fai clic su Invia e dovresti vedere una notifica apparire nell'angolo in basso a destra:

Note : queste notifiche vengono visualizzate solo quando l'app è in background o ridotta a icona.

Congratulazioni! La tua PWA ora può inviare notifiche!

Conclusione

Ci auguriamo che dopo questa guida tu possa impostare con sicurezza una tua funzione di notifica push. Essendo una nuova tecnologia, Progressive Web Apps è sicuramente una cosa complicata per gli utenti non esperti di tecnologia, motivo per cui ci sono fornitori di soluzioni prontamente disponibili come SimiCart che possono prendersi cura di ogni tua esigenza con i nostri anni di esperienza nelle PWA.