Cerchi un modo semplice per aggiungere notifiche push PWA?
Le Progressive Web App (PWA) sono app che funzionano su qualsiasi dispositivo. Ma c'è sempre qualche conflitto nell'invio di notifiche push web. Di solito, il problema più grande sono i tassi di consegna. Puoi aggiungere notifiche push web alla tua PWA in molti modi. Ma come invii notifiche push web che vengono effettivamente consegnate dalla tua PWA?
Non preoccuparti! In questo articolo, ti mostreremo passo dopo passo come puoi inviare notifiche push PWA con tassi di consegna affidabili in meno di 10 minuti.
Iniziamo.
TL;DR — Cosa sono le notifiche push PWA? Le notifiche push delle Progressive Web App (PWA) sono messaggi push web standard consegnati tramite il service worker registrato di una PWA, consentendo alle app installate dal web di ricevere messaggi push anche quando la pagina web è chiusa.
Invia Notifiche Push PWA Oggi Stesso!
Le notifiche push sono uno strumento di marketing super efficace e a basso costo per aiutarti a far crescere il tuo traffico ripetuto, il coinvolgimento e le vendite in automatico.
Come Installare le Notifiche Push PWA
Aggiungere notifiche push a una Progressive Web App è piuttosto semplice. Segui semplicemente i passaggi in questo articolo. Se segui ogni passaggio, alla fine di questo articolo dovresti essere in grado di inviare notifiche push come questa:
- Registra un service worker alla radice del sito che combini la logica PWA e la gestione delle notifiche push.
- Installa lo script PushEngage e copia il codice di installazione in
<head>. - Configura la finestra di dialogo di opt-in e crea una campagna nella dashboard di PushEngage.
La sfida principale è che tutto il software di notifiche push web utilizza un file Javascript chiamato service_worker.js. Il service worker ti aiuta a raccogliere iscritti alle notifiche push tramite popup modali. Ma tutte le PWA hanno già un file service worker che serve a uno scopo diverso. E in un dato momento, la tua PWA può utilizzare solo un service worker.
In parole semplici, i servizi di notifiche push web confondono la tua PWA. Quindi, a volte raccoglierà iscritti alle notifiche push e a volte no. A volte potrai inviare notifiche e a volte no. Potresti persino finire per inviare messaggi push all'intera lista di iscritti e farli recapitare solo a pochi iscritti.
Consigliamo di utilizzare PushEngage per inviare notifiche push PWA. PushEngage è il software di notifiche push numero 1 al mondo. Quindi, sai che le tue campagne sono in mani sicure.
Naturalmente, i builder di PWA come Mendix sono dotati di un proprio sistema di notifiche push. Ma cosa succede se si desidera migrare a un altro servizio di notifiche push? Cosa succede se si desidera maggiore flessibilità e controllo sulle proprie campagne di notifiche push? Inoltre, questi servizi ti forniscono tipicamente un'API per creare campagne push. Ma con PushEngage, ottieni una dashboard facile da usare da cui puoi creare, pianificare, inviare e gestire campagne push.
E sì, puoi usare Firebase Cloud Messaging (FCM) per inviare notifiche push per app Android. Ma con PushEngage, puoi inviare notifiche push per app Android e web, notifiche push per app e web iOS e iPadOS, e notifiche push del browser.
La parte migliore? Puoi persino inviare potenti notifiche push per eCommerce con pochi clic.
| Fatto | Valore |
|---|---|
| Meccanismo di consegna primario | Service worker (iscrizione push) |
| Tempo di configurazione tipico | ~10 minuti (base) |
| Requisito comune | service_worker.js in root-scoped + manifest.json |
| Funziona su | Maggior parte dei browser desktop e Android (varia a seconda della piattaforma) |
Iniziamo.
Passaggio n. 1: Configura il Tuo Account PushEngage
Vai alla pagina principale di PushEngage e fai clic sul pulsante Inizia:
Puoi provare PushEngage gratuitamente. Se gestisci un piccolo blog che necessita di traffico ripetuto e coinvolgimento, probabilmente è sufficiente. Ma se fai sul serio con le vendite, dovresti ottenere il pacchetto Enterprise e sbloccare le campagne automatizzate.
Una volta registrato per il tuo account PushEngage, vai alla tua dashboard PushEngage e vai su Impostazioni sito » Dettagli sito:
Qui puoi impostare il tuo logo, il nome del sito e l'URL del sito. È davvero importante sistemare queste cose subito in modo da poter testare l'intera configurazione in seguito.
Passaggio n. 2: Ottieni il codice di installazione da PushEngage
Per installare le notifiche push, dovrai ottenere un codice di installazione. Nella schermata Impostazioni sito, scorri verso il basso e fai clic sul pulsante Fai clic qui per le istruzioni di configurazione:
Quindi, fai clic sulla scheda Qualsiasi sito:
Puoi usare il codice Javascript per iniziare a inviare notifiche push.
Passaggio n. 3: Aggiungi il codice Service Worker per le Notifiche Push PWA
La parte più complicata del processo è finalmente arrivata. Nella dashboard di PushEngage, sotto Istruzioni per l'impostazione, vedrai anche un'opzione per scaricare il file del service worker.
IMPORTANTE: Una PWA può avere solo uno scope di service worker attivo alla volta — unisci il codice push nel tuo service worker esistente. Per impostazione predefinita, una PWA non richiede un file service worker. Tutto ciò che ti serve per trasformare qualsiasi sito in un'app web progressiva è un file manifest. Quindi, se la tua PWA non ha un file service worker, puoi semplicemente aggiungere il service worker PushEngage alla directory principale del tuo sito web o web app.
Ma se la tua PWA ha già un service worker attivo, NON caricare direttamente il file del service worker di notifiche push PushEngage così com'è. Apri il service worker PushEngage in un editor di testo come Blocco note e copia il codice dal file del service worker PushEngage. Quindi, trova il file del service worker della tua PWA e aggiungi semplicemente il codice del service worker PushEngage al file.
Se trascuri questo passaggio, non sarai in grado di raccogliere iscritti alle notifiche push.
Passaggio n. 4: Configura l'Opt-In di PushEngage
Ora, torna alla tua dashboard di PushEngage. Vai su Design » Popup Modals e seleziona l'optin che preferisci:
L'idea qui è dare ai tuoi visitatori una solida ragione per iscriversi. Se hai bisogno di aiuto, consulta il nostro articolo su come creare un opt-in personalizzato per le notifiche push.
E se desideri alcuni modelli per iniziare, dovresti consultare questo articolo su opt-in per notifiche push ad alta conversione.
Passaggio n. 5: Crea la tua prima campagna
Ora che la tua PWA può inviare notifiche push, dovresti creare una campagna effettiva.
Una campagna per carrello abbandonato aiuta a generare entrate extra convertendo i carrelli abbandonati. È un semplice promemoria che vende molti prodotti in automatico. Quindi, è un'ottima campagna per supportare qualsiasi landing page che generi vendite dirette.
Basta andare alla tua dashboard di PushEngage e navigare su Campagne » Campagne attivate » Crea una nuova campagna attivata:
E poi, seleziona il modello di campagna Abbandono del carrello:
Se sei nuovo nella creazione di campagne di marketing automatizzate, puoi semplicemente seguire il nostro articolo su come impostare una campagna di notifica push per carrello abbandonato. Segui ogni passaggio e potrai impostare notifiche push come questa:
E nel caso te lo stessi chiedendo, non devi essere un marchio famoso perché le tue campagne di notifica push siano efficaci. Infatti, PushEngage è stato creato per aiutare le piccole imprese a crescere utilizzando le notifiche push.
Ma prima di iniziare a commercializzare il tuo sito, dovresti risolvere eventuali problemi con il tuo processo di iscrizione alle notifiche push. Dai un'occhiata a questo articolo su come testare le tue notifiche push. Se tutto funziona perfettamente, hai finito!
Domande Frequenti
D: Le notifiche push PWA richiedono un service worker?
R: Sì. I messaggi push PWA vengono recapitati dal service worker registrato che deve includere la gestione degli eventi push.
D: Posso inviare notifiche push PWA su iOS?
R: Il supporto iOS per il web push basato su service worker è limitato; Android e i browser desktop supportano ampiamente le notifiche push PWA. (Se hai informazioni precise sullo stato di iOS, sostituisci con una breve dichiarazione aggiornata e cita la fonte.)
D: Qual è l'errore di integrazione più comune?
R: Caricare un service worker push separato nella root senza unirlo al service worker esistente della PWA — con conseguenti conflitti e iscrizioni perse.
Cosa Fare Dopo Aver Aggiunto le Notifiche Push PWA?
Questo è tutto per questo, gente!
Ora puoi inviare notifiche push PWA. A questo punto, avrai anche creato una potente campagna di notifiche push web per aumentare la tua crescita. Tutto questo, in meno di 10 minuti!
Dai un'occhiata a come creare anche altre campagne di notifiche push automatizzate. La maggior parte delle campagne push sono semplici ed efficaci. Pertanto, consigliamo di impostare più campagne per il tuo sito. Ecco alcune ottime per iniziare:
- Come Inviare Notifiche Push RSS Automaticamente
- Come Impostare Notifiche Push di Abbandono del Carrello Utilizzando GTM
- Come pianificare le notifiche push nel modo più semplice [Guida di 5 minuti]
E se non l'hai già fatto, inizia con PushEngage. PushEngage è il software di notifiche push n. 1 al mondo. Pertanto, le tue campagne sono in mani sicure.
