Notifiche Push Web, Spiegate

Notifiche push web

Notifiche Push Web: Cosa Sono e Come Funzionano | We.Inc

Cosa sono le notifiche push sul web, le tre API del browser che le rendono possibili, la regola della schermata Home su iPhone e una demo dei permessi da provare nel tuo browser.

Una notifica push è un breve messaggio che un sito o un'app invia al tuo dispositivo, e che appare anche quando il sito è chiuso. Sul web servono tre funzionalità del browser: un service worker che gira in background, la Push API per ricevere il messaggio e la Notifications API per mostrarlo, una volta che il visitatore ha dato il consenso.

I componenti del web push

Componente
Cosa fa

Service worker
Uno script che il browser conserva per il tuo sito e che può attivarsi quando arriva un messaggio

Push API
Iscrive il browser e riceve i messaggi inviati dal tuo server

Notifications API
Chiede il permesso e disegna la notifica sullo schermo

Il tuo server
Memorizza ogni iscrizione e invia i messaggi tramite il servizio push del browser

Il push è il modo in cui un negozio avvisa un cliente che l'ordine è stato spedito, o un sito di prenotazioni ricorda a qualcuno l'appuntamento di domani, senza email. Fatto bene è gradito; chiesto troppo presto viene bloccato per sempre. La demo qui sotto mostra gli stati del permesso usando solo una notifica locale.

Il tuo sito registra un service worker, uno script in background, su una pagina HTTPS.
Quando il visitatore tocca un pulsante come Avvisami, chiami Notification.requestPermission().
Se acconsente, il service worker chiama pushManager.subscribe() con la chiave pubblica del tuo server e ottiene un'iscrizione.
Salvi quell'iscrizione sul tuo server. In seguito il server le invia un messaggio, il service worker riceve un evento push e mostra una notifica.

Chiedi dopo un chiaro momento di interesse, come l'invio di un ordine, non al primo caricamento della pagina.
Mostra prima una tua piccola domanda; richiama la richiesta del browser solo se rispondono di sì. Un blocco del browser è difficile da annullare per i visitatori.
Di' cosa invierai e con quale frequenza, poi rispetta l'impegno.
Usa un tag così un nuovo aggiornamento sostituisce il precedente invece di accumularsi.
Offri un modo per disattivare le notifiche dentro il tuo sito, non solo nelle impostazioni del browser.

Domande frequenti

Le notifiche push web funzionano su iPhone?

Sì, da iOS e iPadOS 16.4, per le web app aggiunte alla schermata Home. WebKit dice che un'app di questo tipo può chiedere il permesso, e la richiesta deve partire da un'azione diretta dell'utente, come il tocco di un pulsante.

Il sito deve essere aperto per ricevere un push?

No. MDN descrive la Push API come ciò che permette a una web app di ricevere messaggi che sia o meno in primo piano, o anche solo caricata. È il service worker a gestire il messaggio.

Quali sono i tre stati del permesso?

granted (il visitatore l'ha consentito), denied (l'ha bloccato) e default (non ha deciso). Nello stato default il browser si comporta come se fosse denied.

Mi serve HTTPS?

Sì. MDN indica che la richiesta di permesso per le notifiche è disponibile solo in contesti sicuri, e dice che anche i service worker sono disponibili solo in contesti sicuri (http://localhost vale mentre sviluppi).

Cos'è userVisibleOnly?

Un'opzione di pushManager.subscribe() che promette che ogni push produrrà qualcosa di visibile per l'utente. MDN osserva che Chrome ed Edge rifiutano l'iscrizione se non è impostata su true.

Push, messaggi in app ed email

Il push raggiunge l'area notifiche del dispositivo, il che lo rende adatto a cose urgenti e personali: una consegna oggi, un tavolo pronto, un problema con un pagamento.
Tutto ciò che è lungo, o che una persona deve ritrovare più tardi, va nell'email. Una promozione ogni giorno non va assolutamente nel push.

Il permesso è un'occasione unica

Dopo che un visitatore blocca le notifiche, il permesso risulta denied e l'esempio stesso di MDN smette semplicemente di chiedere; riattivarlo spetta al visitatore, nelle impostazioni del sito del browser. Ecco perché è comune una richiesta morbida, un tuo banner prima della richiesta vera.
MDN osserva anche che Chrome e Firefox non consentono più la richiesta di permesso da un iframe cross-origin, quindi chiedi dalla tua pagina principale.

Il codice, passo dopo passo

Nella pagina: chiedi, poi iscrivi

Viene eseguito solo quando il visitatore tocca il tuo pulsante. La chiave pubblica proviene dalla coppia di chiavi VAPID del tuo server.

In sw.js: mostra il messaggio

Il service worker si attiva a un evento push e deve mostrare una notifica per quell'evento.

Prova il flusso dei permessi

Questo controlla cosa supporta il tuo browser e ti permette di mostrarti una notifica locale. Nessuna iscrizione viene creata e nessun server è coinvolto.

Cosa supporta questo browser

Funzionalità
Disponibile qui

Notifications API

Service worker

Push API (PushManager)

Pagina sicura (HTTPS)

Sì

Permesso per le notifiche in questo momento:

Non ancora richiesto (default)

Consentito (granted)

Bloccato (denied)

Non supportato in questo browser

Chiedi il permesso

Mostra una notifica di prova

Il tuo ordine è pronto

Questo è un test locale dalla guida di we.inc. Nessun server l'ha inviato.

Inviata al tuo sistema. Se non è apparso nulla, controlla le impostazioni delle notifiche del dispositivo.

Questo browser non ha voluto mostrare una notifica della pagina. Su molti telefoni le notifiche passano solo tramite un service worker.

Hai bloccato le notifiche per questo sito. Solo tu puoi annullarlo, dalle impostazioni del sito accanto alla barra degli indirizzi.

Vuoi un messaggio quando il tuo ordine viene spedito?

Inviamo solo aggiornamenti sulla spedizione. Puoi disattivarli quando vuoi.

Sì, avvisami

Non ora

Non è stata mostrata alcuna richiesta del browser, quindi puoi chiedere di nuovo più tardi senza essere bloccato.

Notifiche Push Web, Spiegate