Auf den Spuren des Weihnachtsmanns als PWA

Zur Website

Zusammenfassung

„Auf den Spuren des Weihnachtsmanns“ wurde für die Festtagssaison 2016 schnell auf eine progressive Offline-Web-App umgestellt. zum Teil dem bestehenden Szenendesign zu verdanken ist.

Ergebnisse

• Der Weihnachtsmann ist eine progressive Web-App (PWA), die die Funktion „Zum Startbildschirm hinzufügen“ und „Offline“ unterstützt.
• 10% der Sitzungen begannen über das ATHS-Symbol
• 75% der Nutzer haben benutzerdefinierte Elemente und Shadow DOM, zwei Kernbestandteile von Webkomponenten, nativ unterstützt.
• Lighthouse-Wert von 81
• Offline über die Service Worker API ist mit Lazy Loading verbunden, um nur besuchte Szenen im Cache zu speichern und sie bei neuen Releases im Hintergrund zu aktualisieren.

Hintergrund

Auf den Spuren des Weihnachtsmanns ist Weihnachtstradition hier bei Google. Jedes Jahr kannst du die Festtage mit Spielen und lehrreichen Erlebnissen im Dezember feiern. Während der Weihnachtsmann eine wohlverdiente Pause einlegt, arbeiten die Elfen daran, "Auf den Spuren des Weihnachtsmanns" freizuschalten. Open Source, sowohl im Web als auch für Android

"Auf den Spuren des Weihnachtsmanns" im Web ist eine große, interaktive Website mit vielen einzigartigen "Szenen", die mithilfe von Polymer, das die meisten modernen Browser unterstützt. Die Bewertung, ob der Browser eines Nutzers „modern“ ist wird durch die Funktionserkennung ermittelt: Der Weihnachtsmann braucht Set und die Web Performance API unter andere.

2016 haben wir das Modul hinter „Auf den Spuren des Weihnachtsmanns“ aktualisiert, damit die meisten Nutzer auch offline Szenen. Hiervon ausgenommen sind Szenen aus YouTube-Videos oder Szenen, die den Live-Standort des Weihnachtsmanns zeigen. ist natürlich nur mit direkter Verbindung zum Nordpol verfügbar! 📶☃️

</ph> <ph type="x-smartling-placeholder">

Herausforderungen

Der Weihnachtsmann verwendet ein responsives Design, das auf Smartphones, Tablets und Desktop-Computern gut funktioniert. Die Website begeistert mit Multimedia-Inhalten, darunter stilisierte Bilder und Audioinhalte mit Weihnachtsmotiven. Eine reguläre Version von „Auf den Spuren des Weihnachtsmanns“ ist allerdings mehrere hundert Megabyte groß. Das hat mehrere Gründe:

• Der Weihnachtsmann wird in über 35 Sprachen unterstützt, sodass viele Objekte dupliziert werden müssen.
• Die Medienunterstützung variiert je nach Plattform (z.B. MP3 und OGG).
• Multimediadateien werden manchmal in verschiedenen Größen und Auflösungen bereitgestellt.

Auch die Wichtel des Weihnachtsmanns arbeiten den ganzen Dezember über fleißig und veröffentlichen oft neue, wichtige Updates. im Lauf des Monats. Das bedeutet, dass Assets, die bereits im Browser eines Nutzers im Cache gespeichert sind, bei wiederholten Besuchen möglicherweise aktualisiert werden müssen.

Diese Herausforderungen:

• Große Multimedia-Ressourcen für verschiedene "Szenen"
• Im Laufe des Monats veröffentlichte Änderungen

... und führen dazu, dass eine naive Offlinestrategie nicht für sie geeignet ist.

Mit Polymer gebauter Weihnachtsmann

Bevor wir uns genauer mit dem Design des Weihnachtsmanns beschäftigen, auf eine Offline-PWA aktualisiert.

Santa ist eine einseitige App, die ursprünglich in Polymer 0.5 geschrieben und jetzt auf Polymer aktualisiert wurde. 1.7 Der Weihnachtsmann besteht aus einem gemeinsamen Code-Element, dem Router, gemeinsam genutzten Navigationselementen usw. Außerdem gibt es viele einzigartige „Szenen“.

Auf jede Szene kann über eine andere URL zugegriffen werden: /village.html, /codelab.html und /boatload.html – und stellt eine eigene Webkomponente dar. Wenn ein Nutzer eine Szene öffnet, laden wir alle erforderlichen HTML-Elemente und Assets (Bilder, Audio-, CSS- und JS-Dateien) vorab. die unter /scenes/[[sceneName]] im Repository „Auf den Spuren des Weihnachtsmanns“ vorhanden sind. In diesem Fall wird den Nutzern ein nutzerfreundlicher Preloader angezeigt, der den Fortschritt anzeigt.

So müssen keine unnötigen Assets für Szenen geladen werden, die der Nutzer nicht sieht (was eine Menge Daten sind). Es bedeutet auch, dass wir ein internes „Cache-Manifest“ aufbewahren müssen. aller Assets, die für in jeder Szene. Das Cache-Manifest ist eine JSON-Datei mit einer Zuordnung von einem Dateinamen zu einem MD5-Hash zu verstehen.

Apps laden

Dieses Modell spart Bandbreite und stellt nur Ressourcen bereit, die für die vom Nutzer besuchten Szenen benötigt werden, als die gesamte Website auf einmal vorab zu laden. „Auf den Spuren des Weihnachtsmanns“ nutzt die Fähigkeit von Polymer, benutzerdefinierte Elemente zur Laufzeit zu aktualisieren, Ladezeit. Sehen Sie sich das folgende Snippet an:

<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>

Zum Laden einer Szene, z.B. boatload-scene:

1. Alle Szenenelemente (einschließlich <boatload-scene>) sind anfangs unbekannt und werden alle wie HTMLUnknownElement mit einigen zusätzlichen Attributen.
2. Wenn die ausgewählte Szene geändert wird, wird das <lazy-pages>-Element benachrichtigt.
3. Das <lazy-pages>-Element löst das Element und das path-Attribut der Szene auf und lädt den HTML-Code scenes/boatload/boatload-scene_en.html importieren. Enthält das Polymer-Element und seine abhängigen Elemente.
4. Der nutzerfreundliche Preloader wird angezeigt.
5. Sobald der HTML-Import geladen und ausgeführt wurde, wird <boatload-scene> transparent auf einen echtes Polymer-Element voller Weihnachtsstimmung 🎄🎉

Dieser Ansatz birgt auch Herausforderungen. Wir möchten beispielsweise keine doppelten Webkomponenten einbeziehen. Wenn zwei Szenen ein gemeinsames Element verwenden, z.B. paper-button, wir entfernen sie im Rahmen des Builds. und füge ihn stattdessen in den Code des Weihnachtsmanns ein.

Offline-Design

„Auf den Spuren des Weihnachtsmanns“ ist dank Polymer und lazy-pages bereits ordentlich in Szenen unterteilt. zuzüglich Szene hat ihr eigenes Verzeichnis. Wir haben den Service Worker des Weihnachtsmanns entwickelt. zwischen dem freigegebenen Code und der Szene Unterscheidung.

Was ist die Theorie hinter dem Service Worker? Lädt ein Nutzer Ihre Website mit einem unterstützten Browser, Front-End-HTML kann die Installation des Service Workers anfordern. Für "Auf den Spuren des Weihnachtsmanns" lebt der Service Worker in /sw.js. Dadurch wird ein install-Ereignis ausgelöst, bei dem der gesamte Code des Weihnachtsmanns vorab im Cache gespeichert wird. zur Laufzeit abgerufen werden.

Der Service Worker kann nach der Installation alle HTTP-Anfragen abfangen. Der vereinfachte Entscheidungsprozess für "Auf den Spuren des Weihnachtsmanns" sieht so aus:

1. Wurde die Anfrage bereits im Cache gespeichert?
   • Sehr gut! Gibt die im Cache gespeicherte Antwort zurück.
2. Stimmt die Anfrage mit einem Szenenverzeichnis wie "scene/boatload/boatload-scene_en.html" überein?
   • Führt eine Netzwerkanfrage aus und speichert das Ergebnis im Cache, bevor es an den Nutzer zurückgegeben wird.
3. Andernfalls senden Sie eine normale Netzwerkanfrage.

Mithilfe unseres Flows und install-Ereignisses kann „Auf den Spuren des Weihnachtsmanns“ geladen werden, auch wenn der Nutzer offline ist. Es sind jedoch nur die Szenen verfügbar, die ein Nutzer zuvor geladen hat. Das ist perfekt, um ein Spiel noch einmal zu spielen und deinen Highscore zu knacken.

Keen-Beobachter stellen möglicherweise fest, dass unsere Caching-Strategie keine Änderungen an Inhalten zulässt. Sobald eine Datei im Browser eines Nutzers zwischengespeichert wurde, wird sie nie mehr geändert. Aber darauf kommen wir später noch zurück.

Live-Version

Wie bereits erwähnt, arbeiten die Wichtel des Weihnachtsmanns den ganzen Dezember über fleißig und müssen oft im Laufe des Monats immer wieder aktualisiert. Die Veröffentlichung von "Auf den Spuren des Weihnachtsmanns" erhält eine eindeutige Bezeichnung, z.B. v20161204112055, die Zeitstempel der Veröffentlichung (11:20:55 am 4. Dezember 2016).

Für diesen gekennzeichneten Release generieren wir einen MD5-Hash-Wert jeder Datei und speichern diesen in unserem Cache Manifest". Auf einem modernen SSD-Laufwerk verlängert sich der Build-Prozess nur um wenige Sekunden.

Jeder Release wird unter einem eindeutigen Pfad auf dem statischen Caching-Server von Google bereitgestellt. Ältere Releases werden also nie entfernt. Das bedeutet, dass alle Assets nach einer Neuveröffentlichung eine andere URL haben, auch wenn sie keine Änderungen vornehmen. Alles, was im Browser oder Service Worker im Cache gespeichert ist, ist nutzlos, es sei denn, wir Zusatzaufwand.

Wir stellen auch eine neue Version des sogenannten „prod“ bereit, Ressourcen: HTML-Code und Dienst des Weihnachtsmanns die sich auf https://santatracker.google.com/ befinden. Dadurch wird die alte Version überschrieben.

Beim Laden von "Auf den Spuren des Weihnachtsmanns" sucht der Browser nach einem aktualisierten Service Worker und ruft ihn ab, falls verfügbar. In unserem Fall generiert jeder Release einen bytebasierten Code. Der Browser betrachtet dies als Upgrade und führt ein neues install-Ereignis aus.

An dieser Stelle sehen die Browser des Nutzers das neue „Cache-Manifest“. Dieser Wert wird mit dem vorhandenen Cache des Nutzers verglichen. Wenn Assets einen anderen MD5-Hash haben, Lösche sie aus dem Cache und bitte den Browser, sie erneut abzurufen. In den meisten Fällen sind die im Cache gespeicherten Inhalte jedoch weitgehend identisch oder weisen nur geringe Unterschiede auf.

In der Weihnachtsmann-Ortung führt ein Upgrade des Service Workers dazu, dass der Browser des Nutzers sofort neu geladen wird.

Offline-Browser

Natürlich mussten wir auch einige Änderungen an der Benutzeroberfläche vornehmen, um eine Offline-Nutzung zu ermöglichen. Sie ist für Nutzende, die möglicherweise nicht erwarten, dass eine Website offline funktioniert, leichter verständlich.

Ein kleines Banner informiert Sie darüber, dass Sie offline surfen. Alle nicht im Cache gespeicherten Szenen sind "eingefroren". und nicht anklickbar. So können Nutzer nicht auf Inhalte zugreifen, die nicht verfügbar sind.

"Auf den Spuren des Weihnachtsmanns" stellt regelmäßig Anfragen an die API des Weihnachtsmanns. Wenn diese Anfragen fehlschlagen oder eine Zeitüberschreitung auftritt, wird davon ausgegangen, dass der Nutzer offline ist. Wir verwenden diese API anstelle der integrierten navigator.onLine des Browsers Property: Dies gilt nur für uns mitteilen, ob der Nutzer online ist. Es wird auch als Lie-Fi bezeichnet.

Die internationale Verbindung

Die Mehrheit unserer Nutzer ist auf Englisch, gefolgt von Japanisch, Portugiesisch, Spanisch und Französisch), wird der Weihnachtsmann in über 35 Sprachen gebaut und veröffentlicht.

Wenn ein Nutzer "Auf den Spuren des Weihnachtsmanns" lädt, verwenden wir das Sprache des Browsers und andere Hinweise zur Auswahl einer Sprache. Die meisten Nutzer überschreiben diese Sprache nie. Wählt ein Nutzer jedoch über unsere Auswahl eine neue Sprache aus, wird dies so behandelt, als ob ein Upgrade genau wie oben, wenn eine neue Version von "Auf den Spuren des Weihnachtsmanns" verfügbar ist.

Anders ausgedrückt: Die aktuelle Version von "Auf den Spuren des Weihnachtsmanns" für den Service Worker ist eigentlich ein Tupel von (build,language).

Zum Startbildschirm hinzufügen

Da der Weihnachtsmann offline arbeitet und einen Service Worker bietet, werden berechtigte Nutzer aufgefordert, die App zu installieren. auf dem Startbildschirm angezeigt. 2016 erfolgten etwa 10% der Ladevorgänge über das Startbildschirmsymbol.

Fazit

Wir konnten "Auf den Spuren des Weihnachtsmanns" im Handumdrehen in eine Offline-PWA umwandeln und so eine zuverlässige, interaktive Das vorhandene Szenendesign wurde durch die bestehende Verwendung von Polymer und Polymer ganz einfach. Webkomponenten. Außerdem wird unser Build-System eingesetzt, um effiziente Upgrades durchzuführen, sodass nur geänderte Assets ungültig werden.

Der Weihnachtsmann ist größtenteils eine maßgeschneiderte Lösung, doch viele seiner Prinzipien sind auch im Polymer zu finden. App Toolbox des Projekts Sehen Sie sich das Tool an, wenn Sie eine PWA von Grund auf neu erstellen oder Framework-unabhängigen Ansatz testen, probieren Sie Workbox Library.