Usa web push

Nelle estensioni puoi utilizzare qualsiasi provider push per inviare notifiche push e messaggi. Un push dall'API Push verrà elaborato dal tuo service worker non appena viene ricevuto. Se il service worker è stato sospeso, un push lo riattiva. La procedura per utilizzarla nelle estensioni è esattamente la stessa che si userebbe sul web aperto.

Ottenere l'autorizzazione per utilizzare l'API Push

Quando registri un server push su un normale sito web, all'utente viene mostrato un prompt per l'autorizzazione da concedere o negare. Con le estensioni, questa richiesta non verrà visualizzata. 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 comporterà un errore immediato, lo stesso risultato che si ottiene se l'utente ha negato l'autorizzazione. Inoltre, tieni presente che l'autorizzazione notifications comporterà la visualizzazione di un avviso di autorizzazione al momento dell'installazione. Chrome disattiverà anche l'estensione per tutte le installazioni esistenti finché l'utente non approva la nuova richiesta di autorizzazione. Per scoprire di più su come gestire questo problema, consulta la guida agli avvisi sulle autorizzazioni.

Fornitori e servizi push

Dopo aver aggiunto l'autorizzazione a manifest.json, dovrai configurare la connessione tra il backend e l'estensione. Questa connessione puoi essere considerata in due parti: il provider push e il servizio push. Un fornitore è l'SDK che utilizzi per inviare il messaggio al servizio push. Esistono molte opzioni diverse e qualsiasi provider di push può essere utilizzato per l'API Push (anche se potrebbe non offrire un SDK che semplifichi l'integrazione). Dovrai fare esperimenti con l'SDK del tuo provider per vedere cosa è possibile. Un servizio push è il servizio a cui è registrato il dispositivo dell'utente finale, in modo che possa ricevere avvisi su qualsiasi messaggio push inviato da un fornitore push. Si tratta di qualcosa su cui non hai alcun controllo, 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 canale.

Hosting autonomo di un provider push

Qualsiasi fornitore di push può funzionare, ma non tutti offrono un SDK che funzioni nei service worker. Dovrai rivolgerti al tuo fornitore se hai problemi a eseguire il servizio. 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 con codifica 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 quanto segue è tutto ciò che serve.

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 PushSubscription, un oggetto che contiene i metadati del server push. Poiché utilizzi web-push-codelab.glitch.me, questo valore deve essere copiato nella parte della pagina Sottoscrizione push.

Una volta ottenuto PushSubscription, puoi registrare un ascoltatore 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()}"`);
});

Una volta configurato l'ascoltatore, puoi inviare un messaggio su web-push-codelab.glitch.me e i messaggi verranno registrati nella console del servizio worker.

Poiché si tratta di uno standard web aperto, è disponibile molta documentazione su come implementare Web Push, anche sul blog di Chrome. Per una versione completa dell'esempio qui illustrato, ce n'è una disponibile nel nostro repository di esempio sulle estensioni.

Push silenzioso

Puoi ricevere una notifica push nella tua estensione Manifest V3 da quando Manifest V3 è stato introdotto in Chrome 88. Tuttavia, è sempre stato necessario che la notifica mostrasse un qualche tipo di richiesta visibile all'utente, come una notifica web. Ciò la rendeva molto meno utile se volevi inviare comandi o aggiornamenti dei dati alla tua estensione senza disturbare l'utente con informazioni non necessarie. A partire da Chrome 121, le estensioni possono impostare userVisibleOnly su false. Ora puoi inviare ai tuoi utenti notifiche push silenziose non rivolte agli utenti. Per utilizzarlo, imposta userVisibleOnly su false quando chiami pushManager.subscribe.

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