Se sei un responsabile tecnico o un analista di marketing digitale interessato a offrire un'esperienza web moderna alla tua applicazione web Adobe Experience Manager (AEM) e stai cercando le opzioni a tua disposizione per farlo, sei nell'articolo giusto. Vedremo cosa sono le app web progressive (PWA) e cosa serve per creare una PWA in AEM sfruttando la libreria di WorkBox attraverso la configurazione, senza programmazione.
Perché usare PWA?
Le app web progressive sfruttano ciò che può fare il web moderno. Sono installabili sul dispositivo, vengono caricate rapidamente e le visite successive vengono caricate istantaneamente. Rispondono rapidamente agli input. Funzionano bene con una connessione inaffidabile o offline. Le PWA utilizzano API moderne per fornire un'esperienza coinvolgente, simile a quella delle app, con UI a schermo intero facoltativa, aggiornamento in background e accesso offline ai dati.
Per migliorare un'app web in un'app web progressiva è necessario aggiungere due artefatti:
- Un file manifest dell'app web: un file di configurazione JSON che definisce l'URL del punto di ingresso dell'app, l'icona utilizzata per rappresentare la PWA e altre configurazioni che descrivono l'aspetto e il comportamento dell'applicazione.
- Un service worker: uno script che fornisce servizi in background che arricchiscono la PWA definendo le risorse utilizzate dalla PWA e le strategie per accedervi.
Che cos'è un service worker?
Essenzialmente, un service worker è semplicemente uno script che il tuo browser esegue in modo indipendente mentre interagisci con l'applicazione web. Un service worker attivo fornisce servizi come la memorizzazione nella cache intelligente utilizzando l'API Cache, mantenendo i dati aggiornati mediante l'API Background Sync e integrando con le notifiche push. Un service worker con la giusta strategia di memorizzazione nella cache fornisce esperienze utente stabili e affidabili per vari scenari, restituendo istantaneamente risorse pre-memorizzate nella cache, memorizzando i dati nella cache e aggiornando le risorse quando si è connessi al web.
I Service worker possono essere difficili da scrivere da zero. Workbox è stato creato per semplificare le cose. Workbox è un insieme di librerie che ti aiuta a scrivere e gestire i service worker e la memorizzazione nella cache con l'API Cache Storage. I service worker e l'API Cache Storage, se utilizzati insieme, controllano il modo in cui gli asset (HTML, CSS, JS, immagini, ecc.) vengono richiesti dalla rete o dalla cache, consentendoti persino di restituire i contenuti memorizzati nella cache quando sei offline. Con Workbox, puoi configurare e gestire rapidamente entrambe le operazioni e altro ancora, con un codice pronto per la produzione.
Eseguire l'upgrade di un sito AEM a una PWA
Adobe Experience Manager (AEM) è una soluzione completa di gestione dei contenuti per creare siti web, app mobile, moduli e segnaletica digitale. Semplifica la gestione dei contenuti e delle risorse di marketing.
Sebbene AEM fornisca una ricca libreria per la creazione di applicazioni web, finora è stato difficile creare una PWA aggiungendo un service worker e un manifest.
Adobe Experience Manager Sites è lo strumento per la creazione di UI che fa parte di Adobe Experience Manager. Se utilizzato con Adobe Experience Manager come servizio cloud, AEM Sites semplifica la conversione di qualsiasi sito web o applicazione a pagina singola AEM esistente in un'app web progressiva installabile offline, con la sola configurazione e senza programmazione. Utilizza Workbox per fornire le best practice per le app web progressive ed elimina le complessità della scrittura di manifest boilerplate e dei service worker.
AEM supporta la localizzazione dei contenuti, il che significa che puoi avere branding e contenuti offline diversi per le diverse impostazioni internazionali. Per farlo, crea configurazioni PWA diverse per ogni padrone di una lingua.
Introduzione alla configurazione PWA su AEM
Accedi ad Adobe Experience Manager come servizio Cloud e seleziona qualsiasi pagina di Adobe Experience Manager Sites o master della lingua e fai clic sulle proprietà. Dovresti vedere una scheda denominata App web progressiva. Nota: se non la vedi, contatta Adobe per attivare questa funzionalità. Puoi configurare l'installazione e l'aspetto delle tue app web progressive con pochi clic.
Se hai completato tutorial di AEM Sites, probabilmente hai già visto il sito WKND in precedenza. Questo articolo utilizza la demo WKND come punto di partenza. Al termine, avrai aggiornato WKND da un'app web a una PWA utilizzando WorkBox.
Configura il manifest
Il manifest dell'app web è un file JSON che contiene proprietà che descrivono l'aspetto e il comportamento di una PWA. Adobe Experience Manager Sites fornisce un'interfaccia utente intuitiva per configurare le proprietà.
L'URL iniziale è il punto di ingresso della PWA. Quando un utente tocca l'icona di una PWA sullo smartphone, accederà all'URL di avvio. La modalità di visualizzazione consente di configurare l'esperienza dell'app a schermo intero o a finestra. Puoi anche specificare l'orientamento dello schermo dell'applicazione. Il colore del tema è il colore della finestra e della barra degli strumenti, mentre il colore di sfondo è il colore della schermata iniziale all'avvio dell'applicazione. L'icona è l'immagine che viene visualizzata nella schermata Home del dispositivo o nel riquadro a scomparsa delle applicazioni quando l'applicazione è installata sul dispositivo. La configurazione mostrata nell'immagine genera il file manifest JSON mostrato di seguito.
{
"name": "WKND Adventures and Travel",
"short_name": "WKND Adventures and Travel",
"start_url": "/content/wknd/us/en.html",
"display": "standalone",
"theme_color": "#FFDC00",
"background_color": "#FF851B",
"orientation": "any",
"icons": [
{
"src": "/content/dam/wknd/pwa-logo.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any maskable"
}
]
}
L'URL iniziale può essere diverso dalla pagina di destinazione predefinita per il tuo dominio. Se modifichi il parametro start_url, puoi indirizzare gli utenti direttamente all'esperienza dell'applicazione anziché alla pagina predefinita che verrebbe mostrata a un utente non autenticato o nuovo. Ciò offre agli utenti di PWA un'esperienza più fluida e simile a quella delle app.
AEM sa che le varie impostazioni internazionali possono avere un aspetto diverso. Puoi configurare proprietà, icone e colori diversi per impostazioni internazionali o lingue diverse, quindi sincronizzare la configurazione con le pagine collegate.
Una volta eseguito l'accesso alla PWA sul browser, puoi fare clic con il tasto destro del mouse ed esaminare per aprire DevTools e visualizzare il manifest nel riquadro Applicazioni.
configura il service worker
Puoi configurare i contenuti da memorizzare nella cache e la strategia di memorizzazione nella cache da utilizzare.
Se utilizzi i service worker, potresti avere familiarità con le strategie di memorizzazione nella cache. Le strategie di memorizzazione nella cache specificano quali risorse memorizzare nella cache e se cercarle prima nella cache, prima la rete o nella cache con un fallback di rete. Puoi quindi scegliere le risorse da pre-memorizzare nella cache al momento dell'installazione del service worker. I worker di servizio delle applicazioni AEM implementano una strategia di cache "warm cache", il che significa che l'esperienza utente non avrà interruzioni anche se specifichi un percorso mancante o interrotto.
In AEM, il termine "clientlibs" si riferisce alle librerie lato client: la combinazione di risorse JavaScript, CSS e statiche correlate che sono state aggiunte al tuo progetto e che vengono pubblicate e utilizzate dal browser web client. Puoi impostare facilmente le librerie lato client per l'utilizzo offline specificando queste librerie nell'interfaccia utente.
Puoi anche includere risorse di terze parti come i caratteri. Questa configurazione della cache offline fornisce informazioni di configurazione a un service worker generato per l'applicazione che utilizza internamente la casella di lavoro. Questo è tutto per rendere installabile la tua applicazione. Una volta installata, l'icona dell'applicazione verrà visualizzata sulla schermata Home del tuo dispositivo mobile proprio come un'app della piattaforma. Fai clic sull'icona per accedere al nuovo sito.
Tieni presente che puoi modificare i tuoi contenuti o queste impostazioni in qualsiasi momento. Quando pubblichi le modifiche, il service worker verrà aggiornato sul client dal browser e un messaggio mostrerà all'utente che è disponibile una versione più recente della PWA. L'utente può fare clic sul messaggio per ricaricare l'applicazione e ricevere gli ultimi aggiornamenti. Puoi aprire il riquadro delle applicazioni e degli strumenti per sviluppatori del browser per visualizzare i dettagli del service worker.
Puoi espandere lo spazio di archiviazione della cache per visualizzare i contenuti memorizzati nella cache localmente:
I risultati
È il momento di guardare i risultati del tuo duro lavoro. Con la sola configurazione e senza programmazione hai appena migliorato il tuo sito AEM fino a diventare un'app web progressiva.
Gli strumenti per sviluppatori di Chrome offrono un controllo faro che ti consente di verificare la conformità della tua applicazione web e della tua configurazione agli standard delle app web progressive.
Conclusione
Le app web progressive forniscono un'esperienza simile a quella delle app per il tuo sito web, che utilizza la natura aperta e multipiattaforma del web a un costo di sviluppo e manutenzione inferiore, fornendo al contempo il controllo sulla distribuzione. Ciò migliora il coinvolgimento, la fidelizzazione e, soprattutto, aumenta i tassi di conversione. AEM in combinazione con Workbox consente di migliorare facilmente il tuo sito esistente in una PWA, con la sola configurazione e senza programmazione.
Riferimenti
- Tutorial di WKND
- Service worker
- API Cache
- Manifest dell'applicazione web
- Supporto adattivo delle icone nelle PWA con icone mascherabili
- Scopri di più sui siti Adobe Experience Manager
- Scopri di più su Workbox:
- Strategie di memorizzazione nella cache del riquadro di lavoro:
- Scopri di più sulle app web progressive