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 come non appena lo ricevi. Se il Service worker è stato sospeso, per riattivarla. La procedura per utilizzarla nelle estensioni è esattamente la stessa 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 messaggio una richiesta di autorizzazione per concederla o negarla. Con le estensioni, il prompt non verrà come mostrato nell'immagine. Per utilizzare l'API Push nella tua estensione, devi impostare il metodo 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 di se l'utente nega l'autorizzazione. Inoltre, tieni presente che L'autorizzazione notifications causerà un avviso di autorizzazione da mostrare al momento dell'installazione. Chrome disattiverà l'estensione anche per qualsiasi le installazioni esistenti finché l'utente non approva la nuova richiesta di autorizzazione. Puoi scopri di più su come gestire questa situazione nel guida agli avvisi relativi alle autorizzazioni.

Fornitori di servizi push e servizi push

Dopo aver aggiunto l'autorizzazione al file manifest.json, dovrai e configurare la connessione tra il backend e l'estensione. Questo collegamento può essere suddiviso in due parti: il provider push e il servizio push. R 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 il modello push API (anche se potrebbero non offrire un SDK che ne semplifica l'integrazione). Tu dovrai fare esperimenti con l'SDK del tuo provider per vedere cosa è possibile. Una spinta è il servizio con cui è registrato il dispositivo dell'utente finale, che può quindi essere avvisato a qualsiasi messaggio push inviato da un provider push. È un aspetto che non hai perché è codificato nei singoli browser. Per Chrome, Firebase Cloud Messaging è il servizio push. Eventuali messaggi inviati a Chrome a cui l'utente verrà indirizzato.

Hosting autonomo di un provider push

Qualsiasi provider push può funzionare, ma non tutti i provider offrono un SDK che funziona nei Service worker. In caso di problemi, dovrai rivolgerti al tuo fornitore per eseguirlo. Tuttavia, non è necessario utilizzare un provider pubblico. Utilizzo come web-push, puoi ospitare il tuo backend.

Puoi provare questa libreria utilizzando web-push-codelab.glitch.me. Nello specifico, dovrai copia la chiave pubblica VAPID del server push per generare il push abbonamento nel browser. Questa chiave pubblica è di fatto un modello base64 valore binario codificato che dovrà essere decodificato e convertito in un Uint8Array per registrarti al servizio Push del browser . Esistono librerie per eseguire questa logica, 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 contenente i metadati del server push. Poiché stai utilizzando web-push-codelab.glitch.me, questo valore deve essere copiato in nella sezione "Push Subscription" della pagina.

Una volta ottenuta la funzionalità 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 attivo, puoi inviare un messaggio su web-push-codelab.glitch.me e per i messaggi verrà eseguito l'accesso dalla 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 un completa dell'esempio qui illustrato, ce n'è una disponibile nel nostro repository di esempio di estensioni.

Spinta silenziosa

Hai ricevuto una notifica push nell'estensione Manifest v3 da quando Manifest v3 è stato introdotto in Chrome 88. Tuttavia, c'era sempre stato il requisito secondo cui la notifica mostrava una sorta di prompt visibile all'utente, come le Notifiche web. Questo rende l'analisi molto meno utile vuoi inviare comandi push o aggiornamenti dei dati all'estensione senza infastidire il informazioni non necessarie all'utente. A partire da Chrome 121, le estensioni possono impostare userVisibleOnly su false. Ora puoi inviare notifiche push silenziose e non rivolte agli utenti. Per utilizzarla, imposta userVisibleOnly su false quando chiami pushManager.subscribe.

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