Usa web push

Nelle estensioni puoi utilizzare qualsiasi provider di push per inviare notifiche push e messaggi. Una notifica push dell'API Push verrà elaborata dal service worker non appena viene ricevuta. Se il service worker è stato sospeso, una notifica push lo riattiverà. La procedura per utilizzarlo nelle estensioni è esattamente la stessa che useresti sul web aperto.

Ottenere l'autorizzazione per utilizzare l'API Push

Quando registri un server push su un normale sito web, all'utente viene mostrata una richiesta di autorizzazione per concederla o negarla. Con le estensioni, il prompt non verrà mostrato. Per utilizzare l'API Push nella tua estensione, devi impostare l'autorizzazione notifications nel file manifest.json.

  {
    "manifest_version": 3,
    ...
    "permissions": ["notifications"]

Se non disponi di questa autorizzazione, qualsiasi interazione con registration.pushManager genererà un errore immediato, lo stesso risultato che si otterrebbe se l'utente avesse negato l'autorizzazione. Inoltre, tieni presente che l'autorizzazione notifications causerà la visualizzazione di un avviso relativo alle autorizzazioni durante l'installazione. Chrome disattiverà anche l'estensione per tutte le installazioni esistenti finché l'utente non approverà la nuova richiesta di autorizzazione. Puoi scoprire di più su come gestire questo problema nella guida all'avviso relativo alle autorizzazioni.

Fornitori di push e servizi push

Dopo aver aggiunto l'autorizzazione al file manifest.json, devi configurare la connessione tra il backend e l'estensione. Questa connessione può essere suddivisa in due parti: il provider push e il servizio push. Un provider è l'SDK che utilizzi per inviare il messaggio al servizio Push. Esistono molte opzioni diverse e qualsiasi fornitore di push può funzionare per l'API Push (anche se potrebbe non offrire un SDK che semplifichi l'integrazione). Dovrai sperimentare con l'SDK del tuo fornitore per vedere cosa è possibile fare. Un servizio push è quello a cui è registrato il dispositivo dell'utente finale, in modo che possa ricevere una notifica di qualsiasi messaggio push inviato da un fornitore di servizi push. Non hai alcun controllo su questo aspetto, in quanto è codificato nei singoli browser. Per Chrome, Firebase Cloud Messaging è il servizio push. Tutti i messaggi inviati a un utente di Chrome verranno instradati tramite questo servizio.

Hosting autonomo di un provider push

Può funzionare qualsiasi fornitore di push, ma non tutti offrono un SDK che funzioni nei service worker. Se hai problemi con l'installazione, dovrai consultare il tuo fornitore. Tuttavia, non è necessario utilizzare un provider pubblico. Utilizzando librerie come web-push, puoi ospitare il tuo backend.

Puoi testare questa libreria utilizzando web-push-codelab.glitch.me. In particolare, dovrai copiare la chiave pubblica VAPID del server push per generare l'iscrizione push nel browser. Questa chiave pubblica è in realtà un valore binario codificato in base64 che dovrà essere decodificato e convertito in un Uint8Array per essere registrato nel Push Manager del browser. Esistono librerie disponibili per eseguire questa logica, ma è sufficiente quanto segue.

function urlB64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');

  const rawData = atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

Il valore fornito viene passato a Push Manager

const SERVER_PUBLIC_KEY = '_INSERT_VALUE_HERE_';
const applicationServerKey = urlB64ToUint8Array(SERVER_PUBLIC_KEY);

async function subscribe() {
  try {
    let subscription = await self.registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey
    });

    console.log(`Subscribed: ${JSON.stringify(subscription,0,2)}`);

    return subscription
  } catch (error) {
    console.error('Subscribe error: ', error);
  }
}

const subscription = await subscribe();

La funzione subscribe restituisce un oggetto PushSubscription, che contiene i metadati del server push. Poiché utilizzi web-push-codelab.glitch.me, questo valore deve essere copiato nella sezione Push Subscription della pagina.

Una volta ottenuta la PushSubscription, puoi registrare un listener per i messaggi push nel service worker della nostra estensione.

self.addEventListener('push', function (event) {
  console.log(`Push had this data/text: "${event.data.text()}"`);
});

Con il listener in posizione, puoi inviare un messaggio su web-push-codelab.glitch.me e i messaggi verranno registrati nella console del service worker.

Poiché si tratta di uno standard web aperto, esiste molta documentazione su come implementare le notifiche push web, incluso il blog di Chrome. Per una versione completa dell'esempio trattato qui, consulta il nostro repository di esempio delle estensioni.

Notifica push silenziosa

Puoi ricevere una notifica push nella tua estensione Manifest v3 da quando Manifest v3 è stato introdotto in Chrome 88. Tuttavia, è sempre stato richiesto che la notifica mostrasse una sorta di prompt visibile all'utente, come una notifica web. Ciò rendeva molto meno utile l'invio di comandi o aggiornamenti dei dati all'estensione senza disturbare l'utente con informazioni non necessarie. A partire da Chrome 121, le estensioni possono impostare userVisibleOnly su false. Ora puoi inviare notifiche push silenziose e non visibili agli utenti. Per utilizzare questa opzione, imposta userVisibleOnly su false quando chiami pushManager.subscribe.

let subscription = await self.registration.pushManager.subscribe({
  userVisibleOnly: false,
  applicationServerKey
});