Segui Babbo Natale come PWA

Visualizza il sito

Riepilogo

Segui Babbo Natale è stato rapidamente aggiornato a un'app web progressiva offline per le festività del 2016. grazie in parte alla progettazione delle nostre scene esistenti.

Risultati

• Babbo Natale è un'app web progressiva (PWA) che supporta la funzionalità Aggiungi a schermata Home (ATHS) e 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 fondamentali dei componenti web
• Punteggio Lighthouse di 81
• L'accesso offline, tramite l'API Service Worker, è legato al caricamento lento che permette di memorizzare nella cache solo le scene visitate e di eseguirne l'upgrade automatico nelle nuove release.

Sfondo

Segui Babbo Natale è una tradizione festiva per Google. Ogni anno, puoi festeggiare questo periodo con giochi ed esperienze didattiche per tutto il mese di dicembre. Mentre Babbo Natale prende una meritata pausa, gli elfi si impegnano a rilasciare Segui Babbo Natale open source, sia sul web sia per Android.

Sul web, Segui Babbo Natale è un grande sito interattivo con molte "scene" uniche, scritte utilizzando Polymer: supporta la maggior parte dei browser moderni. La valutazione del livello di "moderno" del browser di un utente viene determinato tramite il rilevamento delle caratteristiche: Babbo Natale richiede Set e API Web Performance, tra cui altri.

Nel 2016 abbiamo eseguito l'upgrade del motore di Segui Babbo Natale in modo da supportare un'esperienza offline per la maggior parte scene di gioco. Sono escluse le scene supportate da video di YouTube o quelle che riguardano la posizione dal vivo di Babbo Natale, ovviamente è disponibile solo con un collegamento diretto con il Polo Nord! 📶☃️

Sfide

Babbo Natale ha un design reattivo che funziona bene su telefoni, tablet e computer. Il sito entusiasma con ottimi contenuti multimediali, tra cui immagini stilizzate e audio a tema festivo. Tuttavia, una normale costruzione di Segui Babbo Natale ha diverse centinaia di megabyte! I motivi sono diversi:

• Babbo Natale è supportato in oltre 35 lingue, quindi molte risorse devono essere duplicate.
• Il supporto di contenuti multimediali varia a seconda della piattaforma (ad es. mp3 oppure ogg).
• A volte i file multimediali vengono forniti con dimensioni e risoluzioni diverse.

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

Queste sfide:

• Risorse multimediali di grandi dimensioni per "scene" diverse
• Modifiche rilasciate nel corso del mese

...comportano l'inadeguatezza di una strategia offline ingenua.

Babbo Natale, costruito con Polymer

Vale la pena fare un passo indietro e parlare del progetto generale di Babbo Natale prima di scoprire come ha eseguito l'upgrade 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 è composto da un insieme condiviso di codice: il router, le risorse di navigazione condivise e così via. Ha anche molte "scene" uniche.

Ogni scena è accessibile tramite un URL diverso (/village.html, /codelab.html e /boatload.html ed è il proprio componente web. Quando un utente apre una scena, precaricamo tutto il codice HTML e gli asset richiesti (immagini, audio, CSS, js) disponibili sotto /scenes/[[sceneName]] nel repository di Segui Babbo Natale. Nel frattempo, gli utenti vedono un preloader intuitivo che mostra i progressi.

In questo modo, non dobbiamo caricare asset non necessari per le scene che l'utente non vede. (che è una grande quantità di dati). Significa anche che dobbiamo conservare un "manifest della cache" interno di tutte le risorse richieste ogni scena. Il manifest della cache è un file JSON in cui viene memorizzato un mapping da un 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, anziché rispetto al precaricamento dell'intero sito. Segui Babbo Natale sfrutta la capacità di Polymer di aggiornare elementi personalizzati in fase di runtime, il tempo di 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 procede nel seguente modo per caricare una scena, ad esempio: boatload-scene:

1. Tutti gli elementi della scena (incluso <boatload-scene>) sono inizialmente sconosciuti e vengono tutti trattati come HTMLUnknownElement con alcuni attributi aggiuntivi.
2. Quando la scena selezionata viene modificata, viene inviata una notifica all'elemento <lazy-pages>.
3. L'elemento <lazy-pages> risolve l'elemento e l'attributo path della scena, caricando il codice HTML importa scenes/boatload/boatload-scene_en.html. Contiene l'elemento Polymer e i suoi elementi dipendenti.
4. Viene mostrato il preloader semplice.
5. Dopo che l'importazione HTML è stata caricata ed eseguita, viene eseguito l'upgrade di <boatload-scene> in modo trasparente vero elemento Polymer, pieno di allegria natalizia. 🎄🎉

Questo approccio presenta alcune sfide. Ad esempio, non vogliamo includere componenti web duplicati. Se due scene utilizzano un elemento comune, ad esempio paper-button, lo rimuoviamo come parte della nostra build e includerla nel codice condiviso di Babbo Natale.

Progettazione offline

Segui Babbo Natale è già stato ben suddiviso in diverse scene grazie a Polymer e lazy-pages. più ogni ha una propria directory. Abbiamo progettato il service worker di Segui Babbo Natale, l'elemento fondamentale che consente la modalità offline che funziona nel browser dell'utente, confrontando il codice condiviso con lo "scena" la distinzione.

Qual è la teoria alla base dei service worker? Quando un utente su un browser supportato carica il tuo sito, viene restituito l'errore l'HTML frontend può richiedere l'installazione del service worker. Per Segui Babbo Natale, l'addetto ai servizi si trova all'indirizzo /sw.js. Viene attivato un evento install che prememorizzerà nella cache tutto il codice condiviso di Babbo Natale, quindi non c'è bisogno di inserire nulla recuperate in fase di esecuzione.

Una volta installato, il 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à stata memorizzata nella cache?
   • Bene. Restituisce la risposta memorizzata nella cache.
2. La richiesta corrisponde a una directory di scene, come "stories/booload/boatload-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.

La nostra procedura e l'evento install consentono di caricare Segui Babbo Natale anche quando l'utente è offline. Tuttavia, saranno disponibili solo le scene caricate in precedenza da un utente. È l'ideale per ripetere una partita e battere il tuo miglior punteggio.

Gli osservatori più appassionati potrebbero notare che la nostra strategia di memorizzazione nella cache non consente modifiche ai contenuti. Una volta che un file viene memorizzato nella cache nel browser di un utente, non può essere modificato. Ne riparleremo più avanti.

Lo faremo in tempo reale

Come abbiamo detto, gli elfi di Babbo Natale lavorano duramente per tutto il mese di dicembre e spesso devono nuovi aggiornamenti nel corso del mese. Quando viene realizzata un'uscita di Segui Babbo Natale, viene assegnata un'etichetta unica, ad esempio v20161204112055, timestamp del rilascio (11:20:55 del 4 dicembre 2016).

Per questa release etichettata, generiamo un hash MD5 di ogni file e lo memorizziamo nella nostra "manifest del container". 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 precedenti non vengono mai rimosse. Ciò significa che dopo una nuova release, tutti gli asset avranno un URL diverso, anche se non lo hanno fatto. modifiche; qualsiasi cosa memorizzata nella cache dal browser o dal service worker sarà inutile, a meno che non di lavoro extra.

Eseguiamo anche il deployment di una nuova versione di quella che chiamiamo risorse: l'indice HTML e il servizio di Babbo Natale worker, disponibili su https://santatracker.google.com/. Questa versione sovrascriverà la versione precedente.

Ogni volta che Segui Babbo Natale si carica, il browser controlla se è disponibile un service worker aggiornato e lo recupera, se disponibili. Nel nostro caso, ogni release genera un codice byte-diverso. Il browser considera questo passaggio come un upgrade ed esegue un nuovo evento install.

A questo punto, i browser di un utente esamineranno il nuovo "manifest della cache". Questo viene confrontato con la cache esistente dell'utente e, se gli asset hanno un hash MD5 diverso, cancellarle dalla cache e chiedere al browser di recuperarle di nuovo. Tuttavia, nella maggior parte dei casi, i contenuti memorizzati nella cache sono sostanzialmente gli stessi o presentano solo piccole differenze.

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

Esperienza di navigazione offline

Ovviamente, abbiamo dovuto anche apportare alcune modifiche alla UI per supportare un'esperienza offline e apportare semplifica la comprensione per gli utenti che potrebbero non aspettarsi che un sito web possa funzionare offline.

Un piccolo banner ti indica che stai navigando offline. Tutte le scene non memorizzate nella cache vengono "bloccate" e non cliccabile. In questo modo, gli utenti non possono 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 scadono, supponiamo che l'utente sia offline. Utilizziamo questa API anziché la funzionalità navigator.onLine integrata nel browser proprietà: viene utilizzato solo ci comunica se l'utente è online. (note anche come Lie-Fi).

Il legame internazionale

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

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

In altre parole, l'attuale versione di Segui Babbo Natale per gli scopi del service worker è in realtà una tupla di (build,language).

Aggiungi alla schermata Home

Poiché Babbo Natale funziona offline e fornisce un service worker, agli utenti idonei viene chiesto di installare alla 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, dando vita a una piattaforma grazie alla progettazione delle scene già esistenti, resa semplice dall'uso esistente di Polymer e componenti web. Sfrutta inoltre il nostro sistema di compilazione per eseguire upgrade efficienti, invalidando solo gli asset modificati.

Sebbene Babbo Natale sia in gran parte una soluzione personalizzata, molti dei suoi principi si possono trovare nel documento Strumenti per app del progetto. Ti consigliamo di verificarla se stai creando una nuova PWA da zero o se stai cercando una e indipendente dal framework, prova Libreria di Workbox.