Come convertire WebApp come PWA con notifica push

Pubblicato: 2022-03-20

In questo articolo, vediamo come convertire un'applicazione Web o un sito Web in una PWA con una notifica push utilizzando Firebase Cloud Messaging.

Nel mondo moderno, la maggior parte delle applicazioni Web viene convertita in una PWA (Progressive Web App) perché fornisce funzionalità come supporto offline, notifica push e sincronizzazione in background. Le funzionalità PWA rendono la nostra applicazione Web più simile a un'app nativa e offrono un'esperienza utente ricca.

Ad esempio, grandi aziende come Twitter e Amazon hanno convertito la loro app Web in PWA per un maggiore coinvolgimento degli utenti.

Cos'è una PWA?

PWA = (app Web) + (alcune funzionalità dell'app native)

PWA è la tua stessa app Web (HTML+CSS+JS). Funziona allo stesso modo della tua app Web su tutti i browser come in precedenza. Ma può avere funzionalità native quando il tuo sito Web viene caricato su un browser moderno. Rende la tua app Web più potente di prima e la rende anche più scalabile perché siamo in grado di precaricare e memorizzare nella cache le risorse nel frontend, riducendo le richieste al tuo server di backend.

In che modo PWA è diverso dall'app Web

  • Installabile : la tua app Web può essere installata come un'app nativa
  • Progressivo : funziona come la tua app web ma con alcune funzionalità native
  • Esperienza app nativa : l'utente può utilizzare e navigare nell'app Web come un nativo, una volta installata.
  • Facilmente accessibile : a differenza della nostra app Web, non è necessario che i nostri utenti digitino indirizzi Web ogni volta che visitano. Una volta installato, può essere aperto con un solo tocco.
  • Caching dell'applicazione : prima di PWA, l'unico meccanismo di caching implementato dalla nostra app Web consiste nell'utilizzare la cache HTTP, disponibile solo per il browser. Ma con PWA possiamo memorizzare nella cache le cose utilizzando il codice lato client stesso che non è disponibile in un'app Web.
  • Pubblicazione su store (App/Play) : PWA può essere pubblicata su Google Play Store e IOS App Store.

La conversione della tua applicazione in PWA la renderà solo più potente.

Perché le aziende dovrebbero prendere in considerazione le PWA

Mentre la maggior parte dei nostri clienti ci raggiunge e chiede prima di sviluppare la soluzione di app Web e poi chiede app Android e iOS. Tutto ciò che faremo è creare la stessa funzionalità nell'app Web per l'app Android/IOS da un team separato che richiede più costi di sviluppo e più tempo per il mercato.

Ma alcuni clienti hanno un budget limitato o alcuni clienti potrebbero pensare che il time-to-market sia più importante per il loro prodotto.

La maggior parte dei requisiti del cliente può essere soddisfatta dalle stesse funzionalità PWA. Per loro, suggeriamo solo PWA e diamo loro un'idea per convertire la loro PWA come app Android utilizzando TWA se vogliono distribuirla nel Playstore.

Se la tua esigenza ha davvero bisogno di funzionalità dell'applicazione native che non possono essere soddisfatte da PWA. I clienti possono sviluppare entrambe le applicazioni come desiderano. Ma anche in quello scenario. Possono distribuire la PWA nel Play Store fino al completamento dello sviluppo di Android.

Esempio: Titan Eyeplus

Inizialmente, hanno sviluppato un'app PWA e l'hanno distribuita nel Play Store utilizzando TWA (Trusted Web Activity). Una volta completato lo sviluppo dell'applicazione Android. Hanno distribuito la loro vera applicazione Android nel Play Store. Hanno raggiunto sia il time-to-market utilizzando PWA che il costo dello sviluppo.

Funzionalità PWA

PWA offre alle nostre applicazioni Web funzionalità native simili a quelle di un'app.

Le caratteristiche principali sono:

  • Installabile: un'applicazione Web installata come un'app nativa.
  • Memorizzazione nella cache: la memorizzazione nella cache dell'applicazione è possibile, il che fornisce supporto offline alla nostra applicazione.
  • Notifiche push: le notifiche push possono essere inviate dal nostro server per coinvolgere i nostri utenti nel nostro sito web.
  • Geofencing: l'applicazione può essere notificata da un evento ogni volta che la posizione del dispositivo cambia.
  • Richiesta di pagamento: abilita il pagamento nella tua applicazione con un'esperienza utente eccezionale come un'app nativa.

E molte altre funzionalità in arrivo in futuro.

Altre caratteristiche sono:

  • Scorciatoie: URL facilmente accessibili aggiunti nel file manifest.
  • API Web Share: consente alla tua applicazione di ricevere dati condivisi da altre applicazioni.
  • API badge: per mostrare il conteggio delle notifiche nella tua PWA installata.
  • API Periodic Background Sync: salva i dati dell'utente fino a quando non è connesso alla rete.
  • Selettore contatti: utilizzato per selezionare i contatti dal cellulare dell'utente.
  • Selettore file: utilizzato per accedere al file sul sistema locale/mobile

Vantaggio della PWA rispetto all'applicazione nativa

L'app nativa funziona meglio di PWA e ha più funzionalità di PWA. Tuttavia, presenta alcuni vantaggi rispetto all'app nativa.

  • PWA funziona su multipiattaforma come Android, IOS, Desktop.
  • Riduce i costi di sviluppo.
  • Facile implementazione delle funzionalità rispetto a un'app nativa.
  • Facilmente individuabile perché PWA (sito web) è SEO-friendly
  • Sicuro perché funziona solo su HTTPS

Svantaggi di PWA rispetto all'app nativa

  • Sono disponibili funzionalità limitate rispetto a un'app nativa.
  • Le funzionalità PWA non sono garantite per supportare tutti i dispositivi.
  • Il marchio di PWA è basso perché non è disponibile nell'App Store o nel Play Store.

Puoi distribuire la tua PWA come app Android nel Play Store utilizzando Android Trusted Web Activity (TWA). Aiuterà il tuo marchio.

Cose necessarie per convertire l'app Web in PWA

Per la conversione di qualsiasi app Web o sito Web in PWA.

  • Service-Worker: il cuore di qualsiasi app PWA per la memorizzazione nella cache, Pushes Notification, un proxy per le nostre richieste.
  • File manifest: contiene dettagli sulla tua applicazione web. Scaricava la nostra applicazione come un'app nativa nella schermata iniziale.
  • Logo dell'app: immagine di alta qualità 512 x 512 px per l'icona dell'app. Logo dell'app necessario per PWA nella schermata iniziale, nella schermata iniziale, ecc. Quindi dobbiamo creare un set di immagini con rapporto 1:1 per la nostra APP utilizzando qualsiasi strumento.
  • Design reattivo: l'app Web dovrebbe essere reattiva per funzionare su schermi di dimensioni diverse.

Cos'è il Service Worker:

Un service worker (script lato client) è un proxy tra la tua Web APP e il lato esterno, che fornisce notifiche push per la nostra Web App e supporta la memorizzazione nella cache.

Service Worker viene eseguito indipendentemente dal javascript principale. Quindi non ha accesso all'API DOM. Può accedere solo all'API IndexedDB, all'API Fetch, all'API di archiviazione cache. Ma può comunicare con il thread principale con un messaggio.

Servizio fornito dal lavoratore del servizio:

  • Intercettazione delle richieste HTTP dal tuo dominio di origine.
  • Ricevi notifiche push dal tuo server.
  • Disponibilità offline della nostra applicazione

L'operatore del servizio controlla la tua applicazione e può manipolare le tue richieste, ma viene eseguito in modo indipendente. Quindi, per questo motivo, il dominio di origine deve essere abilitato con HTTPS per evitare un attacco man-in-the-middle.

Cos'è il file manifest

Un file manifest (manifest.json) contiene dettagli sulla nostra app PWA da comunicare al browser.

  • nome: nome dell'applicazione
  • short_name: nome breve per la nostra applicazione. Se previsto
  • sia con il nome della proprietà che con lo short_name, il browser prenderà short_name.
  • description: Descrizione per descrivere la nostra applicazione.
  • start_url: per specificare la home page dell'applicazione quando è stata lanciata la nostra PWA.
  • icone: set di immagini per PWA per la schermata Home, ecc.
  • background_color: per impostare il colore di sfondo della schermata iniziale nella nostra applicazione PWA.
  • display: per personalizzare l'interfaccia utente del browser da visualizzare nella nostra app PWA.
  • theme_color: colore del tema dell'app PWA.
  • ambito: ambito URL della nostra applicazione da considerare per PWA. Il valore predefinito è la posizione del file manifest che si trova.
  • scorciatoie: collegamenti rapidi per la nostra applicazione PWA.

Converti l'app Web in PWA

A scopo dimostrativo, ho creato una struttura di cartelle del sito Web Geekflare con file statici.

  • index.html – home page
  • articoli/
    • index.html – pagina degli articoli
  • autori/
    • index.html – pagina autori
  • Strumenti/
    • index.html – pagina degli strumenti
  • offerte/
    • index.html – pagina delle offerte

Se disponi già di un sito Web o di un'app Web, prova a convertirlo in PWA seguendo i passaggi seguenti.

Crea immagini richieste per PWA

Innanzitutto, prendi il logo della tua app e ritaglialo in un rapporto 1:1 in 5 diverse dimensioni. Ho usato https://tools.crawlink.com/tools/pwa-icon-generator/ per ottenere rapidamente diverse dimensioni dell'immagine. Quindi puoi usarlo anche tu.

Crea un file manifest

In secondo luogo, crea un file manifest.json per la tua applicazione Web con i dettagli dell'app. Per la demo, ho creato un file manifest per il sito Web Geekflare.

 {
	"nome": "Geekflare",
	"short_name": "Geekflare",
	"description": "Geekflare produce articoli finanziari e tecnologici di alta qualità, crea strumenti e API per aiutare le aziende e le persone a crescere.",
	"start_url": "/",
	"icone": [{
		"src": "assets/icon/icon-128x128.png",
		"misure": "128x128",
		"tipo": "immagine/png"
	}, {
		"src": "assets/icon/icon-152x152.png",
		"misure": "152x152",
		"tipo": "immagine/png"
	}, {
		"src": "assets/icon/icon-192x192.png",
		"misure": "192x192",
		"tipo": "immagine/png"
	}, {
		"src": "assets/icon/icon-384x384.png",
		"misure": "384x384",
		"tipo": "immagine/png"
	}, {
		"src": "assets/icon/icon-512x512.png",
		"misure": "512x512",
		"tipo": "immagine/png"
	}],
	"colore_sfondo": "#EDF2F4",
	"display": "autonomo",
	"theme_color": "#B20422",
	"scopo": "/",
	"scorciatoie": [{
			"nome": "Articoli",
			"short_name": "Articoli",
			"description": "1595 articoli su sicurezza, amministratore di sistema, marketing digitale, cloud computing, sviluppo e molti altri argomenti.",
			"url": "/articoli",
			"icone": [{
				"src": "/assets/icon/icon-152x152.png",
				"misure": "152x152"
			}]
		},
		{
			"nome": "Autori",
			"short_name": "Autori",
			"description": "Geekflare - Autori",
			"url": "/autori",
			"icone": [{
				"src": "/assets/icon/icon-152x152.png",
				"misure": "152x152"
			}]
		},
		{
			"nome": "Strumenti",
			"short_name": "Strumenti",
			"description": "Geekflare - Strumenti",
			"url": "/strumenti",
			"icone": [{
				"src": "/assets/icon/icon-152x152.png",
				"misure": "152x152"
			}]
		},
		{
			"nome": "Offerte",
			"short_name": "Offerte",
			"description": "Geekflare - Offerte",
			"url": "/offerte",
			"icone": [{
				"src": "/assets/icon/icon-152x152.png",
				"misure": "152x152"
			}]
		}
	]
}

Registrati Service-worker

creare un file di script register-service-worker.js e service-worker.js nella cartella principale.

Il primo, register-service-worker.js è il file javascript che verrà eseguito sul thread principale che può accedere all'API DOM. Ma service-worker.js è uno script di service worker che viene eseguito indipendentemente dal thread principale e anche la sua durata è breve. Viene eseguito ogni volta che gli eventi chiamano i lavoratori del servizio ed è in esecuzione fino al termine del processo.

Controllando il file javascript del thread principale è possibile verificare se il service worker è registrato in esso. in caso contrario, è possibile registrare lo script di service worker (service-worker.js).

incolla lo snippet seguente in register-service-worker.js:

 if ('serviceWorker' nel navigatore) {
    window.addEventListener('carica', funzione() {
        navigator.serviceWorker.register('/service-worker.js');
    });
}

Incolla lo snippet seguente in service-worker.js

 self.addEventListener('install', (event) => { // evento durante l'installazione del service worker
    console.log( 'installa', evento);
    self.skipWaiting();
});

self.addEventListener('activate', (event) => { // evento quando il lavoratore del servizio è stato attivato
    console.log('attiva', evento);
    restituisce self.clients.claim();
});

self.addEventListener('fetch', function(event) { // Intercettatore di richieste HTTP
    event.respondWith(fetch(event.request)); // invia tutte le richieste http senza alcuna logica cache
    /*event.respondWith(
        caches.match(event.request).then(function(risposta) {
            risposta di ritorno || recupero (richiesta di evento);
        })
    );*/ // memorizza nella cache la nuova richiesta. se già nella cache serve con la cache.
});

Non ci siamo concentrati su come abilitare la cache per il supporto offline. Parliamo solo di come convertire le app Web in PWA.

Aggiungi file manifest e script nel tag all head della tua pagina HTML.

 <link rel="manifest" href="/manifest.json">
<script src="/register-service-worker.js"></script>

Aggiorna la pagina dopo averla aggiunta. Ora puoi installare la tua applicazione come di seguito su Chrome mobile.

Installazione PWA in Android Chrome

Nella schermata iniziale, l'app viene aggiunta.

Collegamento pWA in cromo

Se stai usando WordPress. Prova a utilizzare il plug-in del convertitore PWA esistente. Per vueJS o reactJS puoi seguire il metodo sopra o utilizzare i moduli PWA npm esistenti per accelerare lo sviluppo. Poiché i moduli PWA npm sono già abilitati con la memorizzazione nella cache di supporto offline, ecc.

Abilita notifica push

Le notifiche push Web vengono inviate al browser per consentire ai nostri utenti di interagire/interagire più spesso con la nostra applicazione. Possiamo abilitarlo usando

  • API di notifica: viene utilizzata per configurare il modo in cui la nostra notifica push deve essere mostrata all'utente.
  • Push API: viene utilizzata per ricevere messaggi di notifica inviati dal nostro server al browser.

Il primo passaggio per abilitare la notifica push nella nostra applicazione è controllare l'API di notifica e ottenere l'autorizzazione dall'utente per mostrare una notifica. Per quello copia e incolla lo snippet qui sotto nel tuo register-service-worker.js.

 if ('Notifica' nella finestra && Notification.permission != 'concesso') {
    console.log('Chiedi il permesso all'utente')
    Notification.requestPermission(status => {  
        console.log('Stato:'+stato)
        displayNotification('Notifica abilitata');
    });
}


const displayNotifica = notificationTitle => {
    console.log('visualizza notifica')
    if (Notifica.autorizzazione == 'concesso') {
        navigator.serviceWorker.getRegistration().then(reg => {
            console.log(reg)
            opzioni cost = {
                    body: 'Grazie per aver consentito la notifica push!',
                    icona: '/assets/icons/icon-512x512.png',
                    vibrare: [100, 50, 100],
                    dati: {
                      dateOfArrival: Date.now(),
                      chiave primaria: 0
                    }
                  };
    
            reg.showNotification(notificationTitle, opzioni);
        });
    }
};

Se tutto è andato per il verso giusto. Riceverai una notifica dall'applicazione.

pwa-notification-api-permesso
notifica-pwa-api-visualizzazione-notifica

"Notifica" nella finestra ci dirà che l'API di notifica è supportata in quel browser. Notification.permission dirà che l'utente è stato autorizzato a mostrare la notifica. Se l'utente ha autorizzato la nostra applicazione, il valore sarà 'concesso'. se l'utente ha rifiutato il valore sarà 'bloccato'.

Abilita Firebase Cloud Messaging e crea abbonamento

Ora inizia la parte vera. Per inviare le notifiche dal tuo server all'utente, abbiamo bisogno di un endpoint/abbonamento univoco per ogni utente. Per questo, utilizzeremo la messaggistica cloud di Firebase.

Come primo passo, crea un account firebase visitando questo link https://firebase.google.com/ e premi inizia.

  1. Crea un nuovo progetto con un nome e premi continua. Lo creerò con il nome Geekflare.
  2. Nel passaggio successivo, Google Analytics è abilitato per impostazione predefinita. Puoi attivare/disattivare che non ne abbiamo bisogno ora e premere continua. Puoi abilitarlo in un secondo momento nella tua console Firebase, se necessario.
  3. Una volta creato il progetto, apparirà come di seguito.
Console Firebase

Quindi vai alle impostazioni del progetto e fai clic su messaggistica cloud e genera chiavi.

generazione di chiavi di messaggistica cloud di firebase

Dai passaggi precedenti, hai 3 chiavi.

  • chiave del server del progetto
  • Chiave privata dei certificati push Web
  • Certificati push Web a chiave pubblica

Ora incolla lo snippet seguente in register-service-worker.js:

 const updateSubscriptionOnYourServer = abbonamento => {
    console.log('Scrivi qui il tuo codice ajax per salvare l'abbonamento utente nel tuo DB', abbonamento);
    // scrivi il tuo metodo di richiesta ajax usando fetch, jquery, axios per salvare l'abbonamento nel tuo server per un uso successivo.
};

const SubscribeUser = asincrono () => {
    const swRegistration = attendi navigator.serviceWorker.getRegistration();
    const applicationServerPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY'; // incolla la chiave pubblica del certificato webpush
    const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
    swRegistration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey
    })
    .then((abbonamento) => {
        console.log('L'utente è appena iscritto:', sottoscrizione);
        updateSubscriptionOnServer(abbonamento);
    })
    .catch((err) => {
        if (Notifica.autorizzazione === 'negato') {
          console.warn('Autorizzazione per le notifiche negata')
        } altro {
          console.error('Impossibile sottoscrivere l'utente: ', err)
        }
    });
};
const urlB64ToUint8Array = (base64String) => {
    const padding = '='.repeat((4 - base64String.length % 4) % 4)
    const base64 = (base64String + imbottitura)
        .replace(/\-/g, '+')
        .replace(/_/g, '/')

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

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

const checkSubscription = async () => {
    const swRegistration = attendi navigator.serviceWorker.getRegistration();
    swRegistration.pushManager.getSubscription()
    .then(abbonamento => {
        se (!!abbonamento) {
            console.log('L'utente è già iscritto.');
            updateSubscriptionOnYourServer(abbonamento);
        } altro {
            console.log('L'utente NON è iscritto. Sottoscrivi l'utente di recente');
            sottoscriviUtente();
        }
    });
};

checkSubscription();

Incolla lo snippet seguente in service-worker.js.

 self.addEventListener('push', (evento) => {
  const json = JSON.parse(event.data.text())
  console.log('Push Data', event.data.text())
  self.registration.showNotification(json.header, json.options)
});

Ora tutto pronto nel front-end. Utilizzando l'abbonamento puoi inviare notifiche push ai tuoi utenti quando vuoi fino a quando non sono stati negati i servizi push.

Push dal backend node.js

È possibile utilizzare il modulo web-push npm per renderlo più semplice.

Frammento di esempio per inviare una notifica push dal server nodeJS.

 const webPush = require('web-push');
    // pushSubscription non è altro che un abbonamento che hai inviato dal tuo front-end per salvarlo nel DB
    const pushSubscription = {"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uwMcg","keys":{"auth":"qX6AMD5JWbu41cFWE3Lk68w"","p25dh :"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}};
    //la chiave pubblica dei tuoi certificati web
    const vapidPublicKey = 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY';
    //la chiave privata dei tuoi certificati web
    const vapidPrivateKey = 'chiave privata del certificato web';

    var payload = JSON.stringify({
      "opzioni": {
        "body": "Test delle notifiche push PWA dal backend",
        "badge": "/assets/icon/icon-152x152.png",
        "icon": "/assets/icon/icon-152x152.png",
        "vibrare": [100, 50, 100],
        "dati": {
          "id": "458",
        },
        "Azioni": [{
          "azione": "vista",
          "titolo": "Visualizza"
        }, {
          "azione": "chiudere",
          "titolo": "Chiudi"
        }]
      },
      "header": "Notifica da Geekflare-PWA Demo"
    });

    var opzioni = {
      vapidDettagli: {
        oggetto: 'mailto:[email protected]',
        publicKey: vapidPublicKey,
        privateKey: vapidPrivateKey
      },
      TTL: 60
    };

    webPush.sendNotification(
      pushSubscription,
      carico utile,
      opzioni
    ).quindi(dati => {
      return res.json({status: true, message: 'Notifica inviata'});
    }).catch(err => {
      return res.json({status: false, message: err });
    });

Il codice sopra invierà una notifica push all'abbonamento. Verrà attivato l'evento push nell'operatore di servizio.

Push dal backend PHP

Per il back-end PHP puoi usare il pacchetto compositore web-push-php. Controlla il codice di esempio per inviare notifiche push di seguito.

 <?php if ( !defined('BASEPATH')) exit('Nessun accesso diretto allo script consentito');

richiedono __DIR__.'/../vendor/autoload.php';
utilizzare Minishlink\WebPush\WebPush;
usa Minishlink\WebPush\Abbonamento;

// Abbonamento memorizzato nel DB
$subsrciptionJson = '{"endpoint":"https://updates.push.services.mozilla.com/wpush/v2/gAAAAABh2…E0mTFsHtUqaye8UCoLBq8sHCgo2IC7UaafhjGmVCG_SCdhZ9Z88uGj-uwMcg","keys":{"auth":"qX66AMD5JWbu41cFWE3Lk8w","p26dhdh ":"BLxHw0IMtBMzOHnXgPxxMgSYXxwzJPxpgR8KmAbMMe1-eOudcIcUTVw0QvrC5gWOhZs-yzDa4yKooqSnM3rnx7Y"}}';
$ dati di carico = matrice (
'opzioni' => array (
                'body' => 'Test di notifica push PWA dal back-end',
                'badge' => '/assets/icon/icon-152x152.png',
                'icon' => '/assets/icon/icon-152x152.png',
                'vibrare' => 
                Vettore (
                  0 => 100,
                  1 => 50,
                  2 => 100,
                ),
                'dati' => 
                Vettore (
                  'id' => '458',
                ),
                'azioni' => 
                Vettore (
                  0 => 
                  Vettore (
                    'azione' => 'visualizza',
                    'titolo' => 'Visualizza',
                  ),
                  1 => 
                  Vettore (
                    'azione' => 'chiudi',
                    'titolo' => 'Chiudi',
                  ),
                ),
),
'header' => 'Notifica da Geekflare-PWA Demo',
);

// aut
$ autorizzazione = [
    'GCM' => 'chiave privata del tuo progetto', // deprecato e facoltativo, è qui solo per motivi di compatibilità
    'VAPIDO' => [
        'subject' => 'mailto:[email protected]', // può essere un mailto: o l'indirizzo del tuo sito web
        'publicKey' => 'BOcTIipY07N4Y63Y-9r7NMoJHofmCzn3Pu9g-LMsgIMGH4HVr42_LW9ia0lMr68TsTLKS3UcdkE3IcC52hJDYsY', // (consigliato) chiave pubblica non compressa P-256 codificata nell'URL Base64
        'privateKey' => 'la tua chiave privata del certificato web', // (consigliato) infatti il ​​moltiplicatore segreto della chiave privata codificata in Base64-URL
    ],
];

$webPush = nuovo WebPush($auth);

$subsrciptionData = json_decode($subsrciptionJson,true);


// webpush 6.0
$webPush->sendOneNotification(
  Abbonamento::create($subsrciptionData),
  json_encode($payloadData) // opzionale (valore predefinito null)
);

Conclusione

Spero che questo ti dia un'idea sulla conversione delle applicazioni Web in PWA. Puoi controllare il codice sorgente di questo articolo qui e dimostrarlo qui. Ho testato la notifica push inviandola dal back-end anche con l'aiuto del codice di esempio.