Come implementare le notifiche push Web nella tua app Node / React

Le notifiche push sono ampiamente utilizzate sia nel browser che nelle app mobili. Non hai alcuna possibilità di non affrontarli come utente. Lo scopo di questo articolo è quello di fornire una piastra di comando per le notifiche push Web utilizzando tecnologie comuni: Node.js ed Express sul back-end e React.js (Crea app React) sul front-end.

Innanzitutto, descriviamo un ciclo di vita generalizzato delle notifiche push web:

  1. Un'app client installa un lavoratore del servizio. È uno script funzionante autonomamente nel tuo browser che assume sempre più funzioni negli ultimi anni. Pertanto, anche se la scheda con l'applicazione non è attualmente aperta, il tecnico dell'assistenza accetterà e mostrerà una notifica.
  2. Un utente riceve una richiesta per visualizzare le notifiche.
  3. Dopo aver ricevuto l'autorizzazione per visualizzare le notifiche, il browser consegna le credenziali e altre informazioni sul servizio all'app. Questi dati devono essere inviati al back-end e archiviati nel database.
  4. Utilizzando le credenziali precedentemente ricevute, il back-end invia una richiesta al fornitore di servizi, che a sua volta invia una notifica al lavoratore del servizio.
  5. Il lavoratore dell'assistenza riceve una notifica e la mostra.

Ora implementeremo tutti i componenti necessari. È possibile riprodurre i passaggi descritti di seguito o utilizzare la piastra della caldaia pronta, i collegamenti a cui sono riportati alla fine dell'articolo.

Il capitano stava cercando di capire il problema mentre ero via.

Passaggio 1: avviare l'applicazione Node.js e ottenere le chiavi VAPID.

Inizializziamo la nostra applicazione back-end con tutte le dipendenze necessarie con il comando:
filato aggiungere espresso dotenv body-parser cors web-push
Per proteggere un canale di trasmissione delle notifiche da interferenze esterne, vengono utilizzate le cosiddette chiavi VAPID. La chiave pubblica viene inviata a un servizio push al momento dell'abbonamento. In futuro l'app back-end utilizzerà queste chiavi come misura di autenticazione durante l'invio di una notifica tramite il servizio push. È possibile generare chiavi VAPID utilizzando il comando:
./node_modules/.bin/web-push generate-vapid-keys
Ora che abbiamo un paio di chiavi, passeremo alla creazione di un'applicazione client e passeremo attraverso l'intero scenario: dall'abbonamento all'invio di una notifica.

Passaggio 2: creazione di un'app React e un servizio di lavoro.

Come frontend utilizzeremo un'applicazione React, ovvero sarà CRA. Questo è un modo abbastanza popolare per creare applicazioni a pagina singola, quindi come illustrazione, l'ho preferito alla vaniglia JS. D'altra parte, la CRA ha alcune insidie ​​in termini di utilizzo di un lavoratore di servizio, che sarà discusso di seguito.

Quindi, inizializziamo la nostra applicazione nella nuova cartella web-push-front con il comando:
filato crea reattivo web app push-front
Puoi controllare l'app funzionando eseguendo il comando thread start e visitando http: // localhost: 3000 /

Per impostazione predefinita, CRA funziona in modo tale che l'addetto all'assistenza sia assente nella modalità di sviluppo e qualsiasi addetto all'assistenza installato in precedenza venga sostituito da un manichino.
Per cominciare, sostituisci in src / index.js la linea serviceWorker.unregister (); da serviceWorker.register () ;.

Successivamente, modifichiamo la funzione register () nel file src / serviceWorker.js rimuovendo la condizione:
process.env.NODE_ENV === 'produzione'
in modo che il lavoratore dell'assistenza venga caricato non solo in modalità prod.

Per impostazione predefinita, un file fittizio generato al volo viene fornito in modalità dev su http: // localhost: 3000 / service-worker.js. Per ovviare a questo, cambia il nome del file che viene dato in modalità dev a custom-sw.js.

const swFileName = process.env.NODE_ENV === 'produzione'
  ? 'service-worker.js'
  : 'custom-sw.js'
const swUrl = `$ {process.env.PUBLIC_URL} / $ {swFileName}`;

Ora creiamo un addetto all'assistenza nella cartella pubblica che ascolterà l'evento push e visualizzerà le notifiche.

Ora apri DevTools con l'opzione Aggiorna al ricaricamento abilitata o equivalente nel tuo browser preferito e ricarica la pagina. Di conseguenza, dovrebbe essere installato custom-sw.js.
Puoi verificarne il funzionamento inviando una notifica locale di prova con tale contenuto:
{"Body": "devbody", "title": "devtest"}

Passaggio 3: iscriviti alle notifiche.

Innanzitutto, creiamo un file .env, in cui compiliamo l'URL del nostro back-end e la chiave VAPID pubblica precedentemente generata.

Ora implementa l'intero script per iscriverti alle notifiche nel file src / subscription.js

Analizziamolo in dettaglio. La funzione principale iscrivitiUser () è progettata per gestire le massime situazioni possibili: mancanza di supporto per le notifiche push da parte di un browser, divieto di visualizzare le notifiche da parte di un utente, ecc. L'abbonamento stesso viene creato chiamando registration.pushManager.subscribe () dove passa la nostra chiave VAPID pubblica. Prima che debba essere convertito, utilizzeremo l'implementazione della funzione urlBase64ToUint8Array () dal tutorial di Google. In caso di abbonamento riuscito o di abbonamento esistente, riceviamo le credenziali. Ogni browser implementa la consegna di notifiche push attraverso il suo servizio. Usando Google Chrome come esempio, le credenziali risultanti saranno simili:

{
  endpoint: 'https://fcm.googleapis.com/fcm/send/chhjHsBv3DU:APA91bGJCZnXCfkGeAa2nlo5n3fkP4aNw1J7Y34s9neghg0KowAKJcUqIbm97TuuASOD8VD4CpWNpVrKaX3E1f-rwLaINlKOCwGUFCUtZG9qpYNBT3edlEF0mznLK3gJN3rp7XwJAc2y',
  scadenza: null,
  chiavi: {
    p256dh: 'BBe1YEEq3YuUwYxekAYug5xdjTg18IUkvdTLjRjshN4lnbytK-b7_3iAbYEpgjsFRvboIPsc3h_3wWM8TCRisSc',
    auth: 'uQq5Eyjzvwv66ddqwXa1PA'
  }
}

Successivamente, invia questo oggetto al back-end con una tipica richiesta POST con la chiamata di sendSubscription ().
Infine, importa la funzione iscrivitiUser () da Subscription.js a index.js e aggiungi la sua chiamata alla fine del file.

Passaggio 4: ottenere le credenziali sul lato back-end e inviare una notifica.

È tempo di dare vita al modello dell'applicazione Node.
Per cominciare, creiamo un file .env, in cui specifichiamo una coppia di chiavi VAPID e il tuo indirizzo di contatto come mittente delle notifiche.

Successivamente, per semplicità implementiamo tutta la logica dell'app back-end in un singolo file index.js.

Cose che accadono lì:

  1. Inizializza il framework Express.
  2. Usa env-config.
  3. Disabilita la politica di sicurezza CORS. Fai attenzione e sintonizza consapevolmente questo nella produzione.
  4. Applica il parser per il corpo.
  5. Il modulo push web è inizializzato con chiavi VAPID e un indirizzo di contatto.
  6. Un endpoint GET di prova per verificare che il server funzioni.
  7. Un endpoint che accetta una richiesta con credenziali. In un'app reale devono essere salvati in un database. Nel nostro esempio li usiamo per inviare immediatamente una notifica.

Quindi, avviamo il server con il comando node index.js e andiamo su http: // localhost: 9000 per assicurarci che funzioni.
Ora entrambe le applicazioni sono pronte e puoi riaprire la parte client e vedere un popup che richiede il permesso di notifica. Se sei d'accordo, puoi vedere come una richiesta con credenziali viene inviata al back-end e dopo l'arrivo di una notifica push. Congratulazioni!

Passaggio aggiuntivo: Aspetta, per quanto riguarda la modalità di produzione?

In questo caso, Crea React App compila i file nella cartella di compilazione e un lavoratore di servizio predefinito che vi si trova contiene elementi utili per le app moderne. Se decidiamo di mantenerli e aggiungiamo semplicemente la nostra funzionalità push, è necessario modificare il processo di compilazione. C'è Cofanetto utilizzato per la costruzione del lavoratore dell'assistenza in CRA. E non esiste un modo integrato per modificarlo anche se il tuo scopo è solo quello di aggiungere un codice personalizzato. Considero questo pacchetto come il modo più conveniente per farlo se non sei pronto ad immergerti attivamente nella ricerca della configurazione di Workbox nel contesto di CRA.

Innanzitutto, aggiungi una nuova depenendecy:
filato aggiungere cra-append-sw
Dopo, abbiamo bisogno di estendere lo script di build in package.json aggiungendo lì un nuovo comando che viene eseguito dopo il processo principale in modo che la riga completa sia simile a:
Reazione-script build && cra-append-sw --skip-compile ./public/custom-sw.js

Di conseguenza, il contenuto di custom-sw.js verrà aggiunto alla fine del file build / service-worker.js.

Infine, consigli generali sulla strategia di visualizzazione di una richiesta di abbonamento. Se un utente rifiuta tale richiesta, non avrai una seconda possibilità di offrire un abbonamento fino a quando l'utente annulla il divieto nelle impostazioni del browser (e è improbabile che lo desideri). Quindi usa questa opportunità saggiamente selezionando il momento giusto: questo non è sicuramente il caso in cui l'utente accede al tuo sito per la prima volta. Se vuoi essere in grado di infastidire un utente molte volte, prima mostra un dialogo personalizzato con l'offerta di abbonamento. E solo se un utente è d'accordo, mostra quello vero.

Se qualcosa va storto, puoi verificare con la piastra della caldaia:
App nodo: https://github.com/seladir/demo-webpush-node
App React: https://github.com/seladir/demo-webpush-react