Nota: Non è disponibile alcuna documentazione legacy per questo elemento, pertanto viene visualizzata la documentazione corrente.
Apple ha rilasciato iOS e iPadOS 16.4, che supporta le notifiche push web per le app web aggiunte alla schermata Home su dispositivi iPhone e iPad. In questa guida, ti aiuteremo a configurare il tuo sito web per inviare notifiche agli utenti iPhone e iPad che visitano il tuo sito web.
Sblocca una portata illimitata sui dispositivi iOS. Non perdere lo slancio.
Configurati oggi stesso e fai tornare i visitatori del tuo sito prima che ti dimentichino. Inizia gratis, invia in modo più intelligente e cresci con un piano adatto al tuo sito.
Le notifiche push web sono disponibili per il browser Safari, Google Chrome e Edge su iPhone e iPad con iOS e iPadOS 16.4. iOS richiede all'utente di aggiungere il tuo sito web alla schermata Home e quindi di aprire l'app web toccando la sua icona. L'app web si apre come qualsiasi altra app nativa su iOS o iPadOS invece di aprirsi in un browser. Gli utenti possono concedere l'autorizzazione a ricevere notifiche push e quindi gestire tali autorizzazioni nelle Impostazioni notifiche proprio come qualsiasi altra app su iPhone e iPad.
Prima di iniziare
Sono necessarie alcune cose per far funzionare le campagne push web sui dispositivi iOS.
- La tua app web deve fornire un file Web Application Manifest (manifest.json) con il suo membro 'display' impostato su 'standalone' o 'fullscreen'.
- Gli utenti devono avere iOS o iPadOS 16.4 o versioni successive.
- L'utente deve installare l'app web sulla propria schermata Home toccando il pulsante Condividi per aprire il menu Condividi, quindi toccando "Aggiungi alla schermata Home".
- È richiesto un gesto dell'utente, come un clic o un tocco su un pulsante, per mostrare il prompt di autorizzazione nativo e consentire l'autorizzazione a ricevere notifiche push.
Se il tuo sito web è già una Progressive Web App (PWA), non è necessario apportare aggiornamenti aggiuntivi per prepararsi alle notifiche push web iOS/iPadOS. Se non sei sicuro che il tuo sito web sia una PWA, verifica con il tuo team di sviluppo o utilizza Lighthouse in Chrome DevTools.
Configurazione del tuo sito web per le notifiche push web iOS e iPadOS
Segui i passaggi per abilitare e inviare notifiche push a Safari su iPhone e iPad:
- 1. Aggiungi un file Web App Manifest al tuo sito web.
- 2. Integra PushEngage sul tuo sito web.
- 3. Distribuisci e testa il manifest del tuo sito web.
- 4. Testa la finestra modale di dialogo di iscrizione e il prompt di autorizzazione.
1. Aggiungi un file Web App Manifest al tuo sito web
Il manifest dell'app web è un file JSON che fornisce al browser informazioni sulla tua Progressive Web App (PWA) e su come dovrebbe apparire e comportarsi quando è installata sul desktop o sul dispositivo mobile dell'utente. Contiene metadati come il nome della tua app web, la descrizione, le icone, la combinazione di colori e l'URL che dovrebbe essere aperto all'avvio dell'app.
Puoi usare qualsiasi strumento online per generare rapidamente un file manifest. Il file manifest può avere qualsiasi nome ma è comunemente chiamato manifest.json e dovrebbe essere caricato nella directory principale del tuo sito web. Se hai bisogno di aiuto per aggiungere codice al tuo sito WordPress, prova il plugin WPCode.
Un manifest tipico assomiglia a questo:
{
"name": "PushEngage",
"short_name": "PushEngage",
"start_url": "/",
"display": "standalone",
"theme_color": "#3b43ff",
"background_color": "#ffffff",
"icons": [
{
"src": "icon/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "img/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "img/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Nota: Il valore del membro display nel manifest deve essere impostato su standalone o fullscreen.
Dopo aver creato il file manifest, fai riferimento al manifest nella pagina HTML del tuo sito web utilizzando un tag <link> nella sezione <head> della pagina.
Per esempio:
<link rel="manifest" href="/manifest.json">
2. Integra PushEngage sul tuo sito web
Il passo successivo è integrare PushEngage sul tuo sito web per gestire la registrazione e l'installazione del Service Worker sulla pagina.
Se non hai completato l'installazione, qui trovi la guida all'installazione di PushEngage. Se sei un utente WordPress, puoi usare il Plugin WordPress PushEngage, che gestirà la registrazione del service worker.
Puoi seguire i passaggi menzionati qui se hai già il tuo service worker e devi unirlo al service worker di PushEngage.
3. Distribuisci e testa il manifest del tuo sito web
Una volta caricato il manifest e integrato PushEngage, il passo successivo è testare la tua web app per assicurarti che il manifest della tua web app sia stato implementato correttamente. Puoi testare il tuo sito web su vari dispositivi e browser aggiungendolo alla schermata principale.
Segui questi passaggi:
- 1. Apri il sito web nel browser Safari su iOS 16.4 o versioni successive
- 2. Fai clic sul pulsante "Condividi" per aprire il menu di condivisione.
- 3. Fai clic sull'opzione "Aggiungi alla schermata Home".
- 4. Salva l'app nella tua schermata Home.
Se il tuo sito web è stato configurato correttamente per le web push, aprirà la web app come qualsiasi altra app su iOS o iPadOS invece di aprirsi in un browser e fungere semplicemente da collegamento.
Dovresti informare il tuo utente mostrando un banner sullo schermo dell'app, invitando l'utente ad aggiungere la tua app alla schermata Home del suo dispositivo iOS e a iscriversi alle notifiche web push.
4. Testa la finestra di dialogo di iscrizione
Una web app nella schermata Home su iOS e iPadOS richiede un'interazione diretta dell'utente, come toccare un pulsante sulla pagina per visualizzare la finestra di dialogo di iscrizione per l'autorizzazione. Segui questi passaggi per verificare che il prompt di autorizzazione funzioni:
- 1. Apri la web app toccando l'icona dell'app dalla schermata Home sul tuo dispositivo.
- 2. Attendi che la finestra di dialogo di iscrizione PushEngage appaia sulla pagina.
- 3. Fai clic sul pulsante "Consenti" nella modale del Popup PushEngage per visualizzare il prompt di autorizzazione.
- 4. Fai clic sul pulsante "Consenti" nel prompt di autorizzazione.
Nota: La finestra di dialogo di iscrizione apparirà solo se il tuo sito web è HTTPS e l'app è stata avviata dalla schermata Home. Puoi personalizzare il design e il comportamento della finestra di dialogo di iscrizione dalla dashboard di PushEngage.
Invia una campagna Web Push agli utenti iOS e iPadOS
Una volta completati i passaggi precedenti richiesti per le notifiche push web su iOS e iPadOS, puoi iniziare a inviare una notifica push utilizzando la dashboard di PushEngage.
Le notifiche push web su iOS funzionano in modo simile ad altre app native. Le notifiche push web vengono visualizzate sullo schermo come una notifica di avviso, nel centro notifiche e anche sulla schermata di blocco. Gli utenti possono anche gestire le proprie preferenze di notifica dalle Impostazioni di iOS. Una volta fatto clic sulla notifica, verrai indirizzato alla pagina di destinazione desiderata all'interno dell'app web.
La struttura di una notifica push web su iOS
Le notifiche push web di Safari su iOS non supportano attualmente contenuti multimediali avanzati, GIF animate o video. Una volta aggiunte queste funzionalità, le abiliteremo anche noi. Segui le linee guida qui sotto per creare le tue notifiche per gli utenti iOS.
Le notifiche push web su iOS e iPadOS includono i seguenti elementi:
- 1. Icona – L'icona specificata nel file manifest. Non può essere modificata per singoli messaggi.
- 2. Titolo – Il titolo è limitato a 30-40 caratteri, dopodiché viene troncato.
- 3. Nome app – Il nome dell'app è specificato nel file manifest e non può essere modificato per singoli messaggi.
- 4. Messaggio – Il testo è limitato a 120-150 caratteri, dopodiché viene troncato.
- 5. Timestamp – Questo mostra quanto tempo fa la notifica è stata consegnata al dispositivo.
Questo è tutto ciò che ti serve per iniziare a raccogliere iscritti e inviare campagne ai tuoi utenti iPhone e iPad.
Se riscontri problemi, contattaci facendo clic qui. Il nostro team di supporto sarà in grado di aiutarti.
