Se sei un responsabile tecnico o un analista di marketing digitale interessato a fornire un'esperienza web moderna alla tua applicazione web Adobe Experience Manager (AEM) e stai cercando le opzioni a tua disposizione, sei arrivato all'articolo giusto. Parleremo di cosa sono le app web progressive (PWA) e di cosa serve per crearne una in AEM sfruttando la libreria WorkBox tramite la configurazione, senza programmazione.
Perché usare la PWA?
Le app web progressive sfruttano le potenzialità del web moderno. Sono installabili sul tuo dispositivo, si caricano rapidamente e le visite successive vengono caricate all'istante. Rispondono rapidamente agli input. Funzionano bene su una connessione inaffidabile o quando sono offline. Le PWA usano API moderne per offrire un'esperienza coinvolgente simile a un'app, con una UI a schermo intero facoltativa, l'aggiornamento in background e l'accesso offline ai dati.
Per migliorare un'app web in un'app web progressiva, è necessario aggiungere due elementi:
- 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 un'altra configurazione che descrive l'aspetto e il comportamento dell'applicazione.
- Un service worker: uno script che fornisce servizi in background che arricchiscono la tua 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 browser esegue in modo indipendente mentre interagisci con la tua applicazione web. Un service worker attivo fornisce servizi come la memorizzazione nella cache intelligente utilizzando l'API Cache, l'aggiornamento dei dati tramite l'API Background Sync e l'integrazione con le notifiche push. Un service worker con la giusta strategia di memorizzazione nella cache offre esperienze utente stabili e affidabili in vari scenari, restituendo istantaneamente le risorse pre-memorizzate nella cache, archiviando i dati nella cache e aggiornando le risorse quando è connesso al web.
I Service worker possono essere difficili da scrivere da zero. Workbox è stato creato per semplificare questa attività. 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 e così via) vengono richiesti dalla rete o dalla cache, consentendo anche di restituire i contenuti memorizzati nella cache quando sono offline. Con Workbox, puoi configurare e gestire rapidamente entrambe le cose, 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 la creazione di siti web, app mobile, moduli e segnaletica digitale. Semplifica la gestione delle risorse e dei contenuti di marketing.
Sebbene AEM fornisca una ricca libreria per la creazione di applicazioni web, fino a oggi è stato difficile creare una PWA aggiungendo un service worker e un manifest.
Adobe Experience Manager Sites è lo strumento di creazione dell'interfaccia utente che fa parte di Adobe Experience Manager. Se utilizzati con Adobe Experience Manager come servizio cloud, AEM Sites semplifica la conversione di qualsiasi sito web AEM o applicazione a pagina singola esistente in un'app web progressiva installabile offline, con la sola configurazione e nessuna programmazione. Utilizza Workbox per offrire le best practice per le app web progressive e astrae le complessità della scrittura di manifest boilerplate e dei service worker.
AEM supporta la localizzazione dei contenuti, il che significa che puoi avere branding diversi e persino contenuti offline diversi per le diverse impostazioni internazionali. A questo scopo, crea configurazioni di PWA diverse per ogni language master.
Introduzione alla configurazione PWA su AEM
Accedi ad Adobe Experience Manager come servizio cloud e seleziona qualsiasi pagina o lingua master di Adobe Experience Manager, quindi fai clic sulle proprietà. Dovresti vedere una scheda chiamata App web progressiva. Nota: se non vedi questa scheda, contatta Adobe per abilitare questa funzionalità. Puoi configurare l'installazione e l'aspetto delle tue app web progressive con pochi clic.
Se hai completato i tutorial per AEM Sites, probabilmente avrai già visitato il sito di WKND in passato. Questo articolo utilizza la demo di WKND come punto di partenza. Al termine, avrai aggiornato WKND da app web a PWA utilizzando WorkBox.
Configurare il manifest
Il manifest dell'app web è un file JSON contenente le 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 accesso della PWA. Quando un utente tocca l'icona PWA sul proprio smartphone, accederà all'URL di avvio. La modalità di visualizzazione consente di configurare se l'app è un'esperienza con finestre o a schermo intero. 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 quando viene avviata l'applicazione. L'icona è l'immagine che viene visualizzata nella schermata Home o nel riquadro a scomparsa delle applicazioni quando l'applicazione è installata sul dispositivo. La configurazione mostrata nell'immagine genera il codice JSON manifest 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 con l'applicazione anziché alla pagina predefinita in cui verrebbe presentato un utente nuovo o non autenticato. Ciò offre agli utenti delle PWA un'esperienza più fluida e simile a un'app.
AEM sa che le varie impostazioni internazionali possono avere un aspetto diverso. Puoi configurare proprietà, colori e icone differenti per impostazioni internazionali o lingue diverse e 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 e controllare per visualizzare DevTools e visualizzare il manifest nel riquadro Applicazioni.
Configura il service worker
È possibile configurare i contenuti da memorizzare nella cache e la strategia di memorizzazione nella cache da utilizzare.
Se utilizzi dei 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 nella rete o nella cache con un fallback di rete. Puoi quindi scegliere le risorse da pre-memorizzare nella cache quando viene installato il service worker. I lavoratori del servizio delle applicazioni AEM implementano una strategia di cache calda, che consente di offrire agli utenti un'esperienza ottimale anche se specifichi un percorso mancante o non funzionante.
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 del client. Puoi impostare facilmente le librerie lato client per l'utilizzo offline specificandole 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 è praticamente tutto ciò che devi fare per rendere installabile la tua applicazione. Una volta installata, l'icona dell'applicazione verrà visualizzata nella schermata Home del dispositivo mobile proprio come un'app della piattaforma. Facendo clic sull'icona accederai al sito del browser.
Tieni presente che puoi modificare i tuoi contenuti o queste impostazioni in qualsiasi momento. Quando pubblichi le modifiche, il service worker viene aggiornato a livello del client dal browser e all'utente viene mostrato un messaggio che informa 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 degli strumenti e delle applicazioni per sviluppatori del browser per visualizzare i dettagli del service worker.
Puoi espandere lo spazio di archiviazione della cache per visualizzare i contenuti memorizzati localmente:
I risultati
È il momento di esaminare i risultati del tuo duro lavoro. Con la sola configurazione e senza programmazione hai migliorato il tuo sito AEM trasformandolo in 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 offrono un'esperienza simile a quella delle app per il tuo sito web, in quanto sfruttano la natura aperta e multipiattaforma del web a un costo inferiore di sviluppo e manutenzione, garantendo al contempo il controllo sulla distribuzione. Questo migliora il coinvolgimento, la fidelizzazione e, soprattutto, i tassi di conversione sono più elevati. AEM, insieme a Workbox, semplifica il miglioramento del tuo sito esistente in una PWA con la sola configurazione e senza programmazione.
Riferimenti
- Tutorial WKND
- Service worker
- API Cache
- File manifest dell'applicazione web
- Supporto delle icone adattive nelle PWA con icone mascherabili
- Scopri di più sui siti di Adobe Experience Manager
- Scopri di più su Workbox:
- Strategie di memorizzazione nella cache della casella di lavoro:
- Scopri di più sulle app web progressive