Segui Babbo Natale come PWA

Visualizza il sito

Riepilogo

Per le feste del 2016, Segui Babbo Natale è stato rapidamente aggiornato a un'app web progressiva offline, grazie in parte al nostro design esistente.

Risultati

• Babbo Natale è un'app web progressiva (PWA) che supporta l'aggiunta alla schermata Home (ATHS) e la modalità offline
• Il 10% delle sessioni idonee è iniziato tramite l'icona ATHS
• Il 75% degli utenti supportava in modo nativo gli elementi personalizzati e lo shadow DOM, due parti principali dei componenti web
• Punteggio Lighthouse di 81
• La modalità offline, tramite l'API Service Worker, è vincolata al caricamento lento solo per memorizzare nella cache le scene visitate e eseguirne l'upgrade automatico nelle nuove release

Contesto

Segui Babbo Natale è una tradizione delle feste qui a Google. Ogni anno, puoi celebrare questo Natale con giochi ed esperienze didattiche per tutto il mese di dicembre. E mentre Babbo Natale si concede una meritata pausa, gli elfi lavorano per rendere open source Segui Babbo Natale sia sul Web sia su Android.

Sul Web, Segui Babbo Natale è un grande sito interattivo con molte "scene" uniche, scritte con Polymer, che supporta i browser più moderni. La valutazione se il browser di un utente è "moderno" viene determinata attraverso il rilevamento delle funzionalità: Babbo Natale richiede Set e l'API Web Performance, tra le altre cose.

Nel 2016 abbiamo eseguito l'upgrade del motore di Segui Babbo Natale per supportare l'esperienza offline per la maggior parte delle scene. Sono escluse le scene supportate da video di YouTube o quelle relative al luogo in diretta di Babbo Natale, che ovviamente sono disponibili solo con un collegamento diretto con il Polo Nord. 📶☃️

Segui Babbo Natale su un dispositivo Android

sfide

Babbo Natale è caratterizzato da un design reattivo che funziona bene su telefoni, tablet e computer desktop. Il sito è ricco di contenuti multimediali di grande impatto, tra cui immagini stilizzate e audio a tema festivo. Tuttavia, una normale build di Segui Babbo Natale è di diverse centinaia di megabyte. per diversi motivi:

• Babbo Natale è supportato in oltre 35 lingue, per cui molte risorse devono essere duplicate.
• Le diverse piattaforme supportano contenuti multimediali diversi (ad es. mp3 e ogg).
• I file multimediali vengono talvolta forniti in diverse dimensioni e risoluzioni.

Anche gli elfi di Babbo Natale lavorano sodo per tutto il mese di dicembre, rilasciando spesso nuovi aggiornamenti fondamentali nel corso del mese. Ciò significa che gli asset già memorizzati nella cache dal browser di un utente potrebbero dover essere aggiornati in occasione di visite ripetute.

Queste sfide:

• Grandi risorse multimediali per "scene" diverse
• Modifiche rilasciate nel corso del mese

...comportano l'inidoneità di una strategia offline ingenua.

Babbo Natale, costruito con Polymer

Vale la pena fare un passo indietro e parlare del design generale di Babbo Natale prima di vedere come l'abbiamo aggiornato a una PWA offline.

Babbo Natale è un'applicazione a pagina singola, originariamente scritta in Polymer 0.5, e ora aggiornata a Polymer 1.7. Babbo Natale è costituito da un set di codice condiviso: il router, le risorse di navigazione condivise e così via. Inoltre, ha molte "scene" uniche.

È possibile accedere a ogni scena tramite un URL diverso (/village.html, /codelab.html e /boatload.html) ed è un componente web a sé stante. Quando un utente apre una scena, precarichiamo tutti i contenuti HTML richiesti e gli asset (immagini, audio, css, js) presenti in /scenes/[[sceneName]] nel repository Segui Babbo Natale. Nel frattempo, gli utenti visualizzano un preloader intuitivo che mostra i progressi.

Questo approccio significa che non dobbiamo caricare asset non necessari per le scene che l'utente non vede (ovvero una grande quantità di dati). Significa anche che dobbiamo mantenere un "manifest della cache" interno di tutti gli asset richiesti per ogni scena. Il manifest della cache è un file JSON che memorizza una mappatura dal nome file a un hash MD5 dei suoi contenuti.

Carica ciò che utilizzi

Questo modello consente di risparmiare larghezza di banda, fornendo solo le risorse necessarie per le scene visitate da un utente, invece di precaricare contemporaneamente l'intero sito. Segui Babbo Natale sfrutta la capacità di Polymer di eseguire l'upgrade degli elementi personalizzati in fase di runtime, anziché durante il caricamento. Considera il seguente snippet:

<lazy-pages id="lazypages" selected-item="&#123;{selectedScene}}" ... >
    <dorf-scene id="village" route="village" icon="1f384" permanent
        mode$="[[mode]]"
        path$="scenes/dorf/dorf-scene_[[language]].html"
        class="santa-scene" allow-page-scrolling></dorf-scene>

    <boatload-scene route="boatload" icon="26f5"
        path$="scenes/boatload/boatload-scene_[[language]].html"
        loading-bg-color="#8fd7f7"
        loading-src="scenes/boatload/img/loading.svg"
        logo="scenes/boatload/img/logo.svg"
        class="santa-scene"></boatload-scene>

Segui Babbo Natale effettua le seguenti operazioni per caricare una scena, ad esempio boatload-scene:

1. Tutti gli elementi delle scene (incluso <boatload-scene>) sono inizialmente sconosciuti e vengono tutti trattati come HTMLUnknownElement con alcuni attributi aggiuntivi.
2. Quando la scena selezionata viene modificata, l'elemento <lazy-pages> riceve una notifica.
3. L'elemento <lazy-pages> risolve l'elemento della scena e l'attributo path, caricando l'importazione HTML scenes/boatload/boatload-scene_en.html. Contiene l'elemento Polymer e i relativi elementi dipendenti.
4. Viene mostrato il preloader.
5. Una volta caricata ed eseguita l'importazione HTML, viene eseguito in modo trasparente l'upgrade di <boatload-scene> a un elemento Polymer reale, pieno di brindisi per le feste. 🎄🎉

Questo approccio presenta delle sfide. Ad esempio, non vogliamo includere componenti web duplicati. Se due scene utilizzano un elemento comune, ad esempio paper-button, lo rimuoviamo come parte del processo di compilazione e lo includiamo nel codice condiviso da Babbo Natale.

Design offline

Segui Babbo Natale è già suddiviso in modo ordinato in scene grazie a Polymer e lazy-pages; inoltre, ogni scena ha la propria directory. Abbiamo progettato il service worker di Segui Babbo Natale, l'elemento fondamentale che consente l'accesso offline nel browser di un utente, per tenere conto del codice condiviso e della distinzione "scena".

Qual è la teoria alla base di Service Worker? Quando un utente di un browser supportato carica il tuo sito, il codice HTML del frontend può richiedere l'installazione del service worker. Per Segui Babbo Natale, il service worker risiede a /sw.js. Questo attiva un evento install che pre-memorizzazione nella cache di tutto il codice condiviso di Babbo Natale, in modo da non dover recuperare nulla durante l'esecuzione.

Una volta installato, Service Worker è in grado di intercettare tutte le richieste HTTP. Per Segui Babbo Natale, il flusso decisionale semplificato ha il seguente aspetto:

1. La richiesta è già memorizzata nella cache?
   • Bene. Restituisci la risposta memorizzata nella cache.
2. La richiesta corrisponde a una directory di scene, come "stage/imbarcazione/carico/barca-scene_en.html"?
   • Eseguire una richiesta di rete e archiviare il risultato nella cache prima di restituirlo all'utente.
3. In caso contrario, esegui una normale richiesta di rete.

Il flusso e l'evento install consentono a Segui Babbo Natale di caricarsi, anche mentre l'utente è offline. Tuttavia, saranno disponibili solo le scene caricate in precedenza da un utente. È l'ideale per rigiocare una partita e battere il tuo miglior punteggio.

Gli osservatori attenti potrebbero notare che la nostra strategia di memorizzazione nella cache non consente modifiche ai contenuti. Una volta memorizzato nella cache del browser di un utente, un file non verrà mai modificato. Ne riparleremo più avanti.

Lo faremo in diretta

Come abbiamo accennato, gli elfi di Babbo Natale lavorano sodo per tutto il mese di dicembre e spesso devono rilasciare nuovi aggiornamenti nel corso del mese. Quando viene realizzata una versione di Segui Babbo Natale, viene assegnata un'etichetta univoca, ad esempio v20161204112055, il timestamp della pubblicazione (11:20:55 del 4 dicembre 2016).

Per questa release con etichetta, generiamo un hash MD5 per ogni file e lo memorizziamo nel nostro "manifest della cache". Su un disco a stato solido moderno, questa operazione aggiunge solo pochi secondi al processo di compilazione.

Il deployment di ogni release viene eseguito in un percorso univoco sul server di memorizzazione nella cache statico di Google. Ciò significa che le release meno recenti non vengono mai rimosse. Ciò significa che dopo una nuova release, tutti gli asset avranno un URL diverso, anche se non sono cambiati, e tutto ciò che è stato memorizzato nella cache dal browser o dal service worker sarà inutile, a meno che non eseguiamo ulteriore lavoro.

Implementiamo anche una nuova versione di quelle che chiamiamo risorse "di produzione", l'HTML dell'indice di Babbo Natale e il service worker, che si trova su https://santatracker.google.com/. La versione precedente verrà sovrascritta.

Ogni volta che Segui Babbo Natale viene caricato, il browser verifica la presenza di un service worker aggiornato e lo recupera, se disponibile. Nel nostro caso, ogni release genera un codice diverso in byte. Il browser lo vede come un upgrade ed esegue un nuovo evento install.

A questo punto, il browser dell'utente visualizza il nuovo "manifest della cache". Questo valore verrà confrontato con la cache esistente dell'utente e, se gli asset hanno un hash MD5 diverso, li eliminiamo dalla cache e chiediamo al browser di recuperarli. Tuttavia, nella maggior parte dei casi, i contenuti memorizzati nella cache sono sostanzialmente gli stessi o presentano solo differenze minime.

In Segui Babbo Natale, l'upgrade del service worker comporta il ricaricamento immediato del browser dell'utente.

Nota: questa è una strategia aggressiva e potrebbe interferire con un utente che sta giocando. Scegli una strategia di ricaricamento adatta alle tue esperienze.

Esperienza di navigazione offline

Naturalmente, abbiamo dovuto anche apportare alcune modifiche all'interfaccia utente per supportare l'esperienza offline e semplificare la comprensione per gli utenti che potrebbero non aspettarsi che un sito web funzioni offline.

Un piccolo banner ti informa quando navighi offline. Tutte le scene non memorizzate nella cache sono "bloccate" e non cliccabili. In questo modo gli utenti non potranno accedere a contenuti che non sono disponibili.

Segui Babbo Natale invia regolarmente richieste all'API di Babbo Natale. Se queste richieste non vanno a buon fine o si verifica un timeout, presupponiamo che l'utente sia offline. Utilizziamo questa API anziché la proprietà navigator.onLine integrata nel browser: ci informa solo se l'utente è online. Questo processo è anche noto come Lie-Fi.

La connessione internazionale

Anche se la maggior parte dei nostri utenti è in inglese (seguito da giapponese, portoghese, spagnolo e francese), Babbo Natale viene realizzato e rilasciato in oltre 35 lingue diverse.

Quando un utente carica Segui Babbo Natale, utilizziamo la lingua del browser e altri suggerimenti per scegliere la lingua da utilizzare. La maggior parte degli utenti non sovrascrive mai questa lingua. Tuttavia, se un utente sceglie una nuova lingua tramite il nostro selettore, consideriamo questa situazione come se fosse disponibile un upgrade, proprio come nel caso precedente, quando è disponibile una nuova versione di Segui Babbo Natale.

In altri termini, la versione corrente di Segui Babbo Natale ai fini del service worker è in realtà una tupla di (build,language).

Aggiungi alla schermata Home

Poiché Babbo Natale lavora offline e fornisce un service worker, agli utenti idonei viene richiesto di installare l'app nella loro schermata Home. Nel 2016, circa il 10% dei caricamenti idonei proveniva dall'icona della schermata Home.

Conclusione

Siamo riusciti a convertire rapidamente Segui Babbo Natale in una PWA offline, creando un'esperienza affidabile e coinvolgente, grazie al design delle scene esistenti, reso più semplice dall'uso esistente di Polymer e dei componenti web. Sfrutta inoltre il nostro sistema di build per eseguire upgrade efficienti, annullando solo gli asset modificati.

Sebbene Babbo Natale sia in gran parte una soluzione personalizzata, molti dei suoi principi sono disponibili nella pagina App Toolbox di Polymer Project. Ti consigliamo di dare un'occhiata se stai creando una nuova PWA da zero oppure se stai cercando un approccio indipendente dal framework, prova la libreria della casella di lavoro.