Usa web push

Nelle estensioni puoi utilizzare qualsiasi provider di servizi push per inviare notifiche e messaggi push. Un push dall'API Push verrà elaborato dal service worker non appena viene ricevuto. Se il service worker è stato sospeso, il pulsante Push lo riattiva. La procedura per utilizzarla 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, i prompt non vengono mostrati. Per utilizzare l'API Push nell'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 se l'utente nega l'autorizzazione. Inoltre, tieni presente che l'autorizzazione notifications comporterà la visualizzazione di un avviso di autorizzazione al momento dell'installazione. Chrome disattiverà inoltre l'estensione per eventuali installazioni esistenti finché l'utente non approverà la nuova richiesta di autorizzazione. Puoi scoprire di più su come gestire questa situazione nella guida agli avvisi relativi alle autorizzazioni.

Provider 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 e il servizio Push. Un provider è l'SDK utilizzato da te per inviare il messaggio al servizio Push. Esistono molte opzioni diverse e qualsiasi provider di push può funzionare per l'API Push (anche se potrebbe non offrire un SDK che semplifichi l'integrazione). Dovrai fare delle prove con l'SDK del tuo provider per vedere cosa è possibile. Un servizio push è il dispositivo con cui è registrato il dispositivo dell'utente finale, pertanto può essere avvisato di qualsiasi messaggio push inviato da un provider push. Questo è un elemento su cui non hai alcun controllo, perché è impostato come hardcoded nei singoli browser. Per Chrome, Firebase Cloud Messaging è il servizio push. I messaggi inviati a un utente Chrome verranno indirizzati tramite questo.

Hosting autonomo di un provider push

Qualsiasi provider di servizi push può funzionare, tuttavia non tutti offrono un SDK compatibile con i service worker. Dovrai consultare il tuo provider in caso di problemi con l'esecuzione. Non è necessario utilizzare un provider pubblico. Usa librerie come web-push per 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 la sottoscrizione Push nel browser. Questa chiave pubblica è in realtà un valore binario codificato in base64 che dovrà essere decodificato e convertito in un Uint8Array per poter essere registrato con il 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 trasferito a Gestore push

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 sezione relativa all'abbonamento push della pagina.

Una volta ottenuto PushSubscription, sei pronto per 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()}"`);
});

Dopo aver impostato il listener, 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 Web Push, anche sul blog di Chrome. Per una versione completa dell'esempio qui trattato, è disponibile una versione disponibile nel nostro repository di esempio di estensioni.

Spinta silenziosa

Hai potuto ricevere una notifica push nell'estensione Manifest v3 da quando Manifest v3 è stato introdotto in Chrome 88. Tuttavia, c'è sempre stato il requisito che prevedeva che la notifica mostrasse un qualche tipo di prompt visibile all'utente, come una notifica web. Ciò rendeva molto meno utile l'esecuzione di push di comandi o aggiornamenti di dati per l'estensione senza disturbare l'utente con informazioni superflue. A partire da Chrome 121, le estensioni possono impostare userVisibleOnly su false. Ora puoi inviare ai tuoi utenti notifiche push silenziose e non rivolte agli utenti. Per usarla, imposta userVisibleOnly su false quando chiami pushManager.subscribe.

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