Auf den Spuren des Weihnachtsmanns als PWA

Website ansehen

Zusammenfassung

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

Ergebnisse

• Der Weihnachtsmann ist eine progressive Web-App (PWA), die das Hinzufügen zum Startbildschirm und offline unterstützt.
• 10% der teilnahmeberechtigten Sitzungen begannen über das ATHS-Symbol
• 75% der Nutzer unterstützten benutzerdefinierte Elemente und Shadow DOM nativ, zwei Kernbestandteile von Webkomponenten.
• Lighthouse-Bewertung: 81
• Der Offline-Zugriff über die Service Worker API ist mit Lazy Loading verbunden, sodass nur besuchte Szenen im Cache gespeichert und bei neuen Releases automatisch aktualisiert werden.

Hintergrund

Auf den Spuren des Weihnachtsmanns ist bei Google eine Weihnachtstradition. Jedes Jahr kannst du den ganzen Dezember über Spiele und Lerninhalte zu den Feiertagen feiern. Während sich der Weihnachtsmann eine wohlverdiente Pause gönnen möchte, arbeiten die Wichtel daran, „Auf den Spuren des Weihnachtsmanns“ als Open Source zu veröffentlichen – sowohl im Web als auch für Android.

"Auf den Spuren des Weihnachtsmanns" ist eine große, interaktive Website mit vielen einzigartigen Szenen, die mit Polymer geschrieben wurden und die die meisten modernen Browser unterstützen. Die Beurteilung, ob ein Nutzer „modern“ ist, wird durch die Funktionserkennung ermittelt: Für den Weihnachtsmann sind unter anderem Set und die Web Performance API erforderlich.

2016 haben wir den Motor hinter der Funktion "Auf den Spuren des Weihnachtsmanns" aktualisiert, damit die meisten Szenen auch offline genutzt werden können. Ausgeschlossen sind Szenen, die durch YouTube-Videos oder den Ort des Weihnachtsmanns live gezeigt werden, was natürlich nur mit einer direkten Verbindung zum Nordpol verfügbar ist. 📶☃️

Challenges

Der Weihnachtsmann verwendet ein responsives Design, das gut auf Smartphones, Tablets und Desktop-Computern funktioniert. Die Website überzeugt mit tollen Multimedia-Inhalten, darunter stilisierte Bilder und weihnachtliche Audioinhalte. Eine reguläre Version von "Auf den Spuren des Weihnachtsmanns" ist jedoch mehrere Hundert Megabyte groß! Dafür gibt es mehrere Gründe:

• Der Weihnachtsmann wird in über 35 Sprachen unterstützt, daher müssen viele Objekte dupliziert werden.
• Verschiedene Plattformen haben unterschiedliche Medienunterstützung (z.B. MP3 und OGG).
• Multimedia-Dateien werden manchmal in verschiedenen Größen und Auflösungen bereitgestellt.

Auch die Wichtel des Weihnachtsmanns sind den ganzen Dezember über fleißig bei der Arbeit und veröffentlichen häufig neue, wichtige Updates. Das bedeutet, dass Assets, die bereits vom Browser eines Nutzers im Cache gespeichert wurden, 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

...führt dazu, dass eine naive Offlinestrategie ungeeignet ist.

Mit Polymer gebauter Weihnachtsmann

Es lohnt sich, zuerst über das Gesamtdesign des Weihnachtsmanns zu sprechen, bevor wir uns genauer ansehen, wie wir es auf eine Offline-PWA umgestellt haben.

Santa ist eine einseitige Anwendung, die ursprünglich in Polymer 0.5 geschrieben wurde und jetzt auf Polymer 1.7 aktualisiert wurde. Der Weihnachtsmann besteht aus einem gemeinsamen Code, dem Router, gemeinsam genutzten Navigationselementen usw. Außerdem hat er viele einzigartige Szenen.

Jede Szene ist über eine andere URL (/village.html, /codelab.html und /boatload.html) zugänglich und besteht aus einer eigenen Webkomponente. Wenn ein Nutzer eine Szene öffnet, werden alle erforderlichen HTML-Elemente und Assets (Bilder, Audio, CSS, JS) vorab geladen, die sich im Repository "Auf den Spuren des Weihnachtsmanns" unter /scenes/[[sceneName]] befinden. In diesem Fall sehen die Nutzer einen nutzerfreundlichen Preloader, der den Fortschritt anzeigt.

Dieser Ansatz bedeutet, dass wir keine unnötigen Assets für Szenen laden müssen, die der Nutzer nicht sieht (was eine große Menge an Daten bedeutet). Es bedeutet auch, dass wir ein internes Cache-Manifest aller Assets führen müssen, die für jede Szene erforderlich sind. Das Cache-Manifest ist eine JSON-Datei, in der die Zuordnung des Dateinamens zu einem MD5-Hash des Inhalts gespeichert wird.

Inhalte laden

Dieses Modell spart Bandbreite und stellt nur Ressourcen bereit, die für die von einem Nutzer besuchten Szenen erforderlich sind, anstatt die gesamte Website auf einmal vorab zu laden. "Auf den Spuren des Weihnachtsmanns" nutzt Polymers Fähigkeit, benutzerdefinierte Elemente zur Laufzeit und nicht zum Zeitpunkt des Ladevorgangs zu aktualisieren. Ein Beispiel:

<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 führt die Weihnachtsmann-Ortung die folgenden Schritte aus (z.B. boatload-scene:

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

Dieser Ansatz birgt Herausforderungen. So sollen beispielsweise keine doppelten Webkomponenten einbezogen werden. Wenn zwei Szenen ein gemeinsames Element verwenden, z.B. paper-button entfernen wir sie aus dem Build-Prozess und fügen sie stattdessen in den Code des Weihnachtsmanns ein.

Offline-Design

Die Weihnachtsmann-Ortung ist dank Polymer und lazy-pages schon ordentlich in Szenen unterteilt. Außerdem hat jede Szene ein eigenes Verzeichnis. Wir haben den Service Worker des Weihnachtsmanns entwickelt, der das Herzstück des Offlinemodus ermöglicht, das auf dem Browser des Nutzers ausgeführt wird. So wird der gemeinsam genutzte Code von einer "Szene" unterschieden.

Was ist die Theorie hinter Service Worker? Wenn ein Nutzer mit einem unterstützten Browser Ihre Website lädt, kann der Service Worker über den HTML-Code des Front-Ends angefordert werden. Für „Auf den Spuren des Weihnachtsmanns“ lebt der Service Worker bei /sw.js. Dadurch wird ein install-Ereignis ausgelöst, das den gesamten freigegebenen Code des Weihnachtsmanns vorab im Cache speichert, sodass zur Laufzeit nichts abgerufen werden muss.

Nach der Installation kann der Service Worker alle HTTP-Anfragen abfangen. Für die Funktion „Auf den Spuren des Weihnachtsmanns“ sieht der vereinfachte Entscheidungsprozess so aus:

1. Befindet sich die Anfrage bereits im Cache?
   • Sehr gut! Gibt die im Cache gespeicherte Antwort zurück.
2. Stimmt die Anfrage mit einem Szenenverzeichnis wie "scenes/bootload/bootload-scene_en.html" überein?
   • Führe eine Netzwerkanfrage aus und speichere das Ergebnis im Cache, bevor du es an den Nutzer zurückgibst.
3. Führen Sie andernfalls eine normale Netzwerkanfrage aus.

Mit unserem Ablauf- und install-Ereignis kann „Auf den Spuren des Weihnachtsmanns“ auch dann geladen werden, wenn der Nutzer offline ist. Es sind jedoch nur die Szenen verfügbar, die ein Nutzer zuvor geladen hat. Dies ist ideal, um ein Spiel noch einmal zu spielen und deinen Highscore zu schlagen.

Aktive Beobachter stellen möglicherweise fest, dass unsere Caching-Strategie keine Änderungen an Inhalten zulässt. Wenn eine Datei im Browser eines Nutzers im Cache gespeichert ist, wird sie nicht mehr geändert. Aber darauf kommen wir später noch zurück.

Wir kümmern uns live

Wie bereits erwähnt, arbeiten die Wichtel des Weihnachtsmanns den ganzen Dezember über fleißig und müssen oft den ganzen Monat über neue Updates veröffentlichen. Wenn eine Version von „Auf den Spuren des Weihnachtsmanns“ gebaut wird, erhält sie ein eigenes Label, zum Beispiel v20161204112055, der Zeitstempel des Release (11:20:55 am 4. Dezember 2016).

Für diesen mit einem Label versehenen Release generieren wir einen MD5-Hashwert jeder Datei und speichern diesen in unserem Cache-Manifest. Bei einer modernen SSD verlängert sich der Build-Prozess nur um wenige Sekunden.

Jeder Release wird in einem eindeutigen Pfad auf dem statischen Caching-Server von Google bereitgestellt. Das bedeutet, dass ältere Releases nie entfernt werden. Das bedeutet, dass alle Assets nach einem neuen Release eine andere URL haben – auch wenn sie sich nicht geändert haben – und alles, was vom Browser oder Service Worker im Cache gespeichert wurde, ist nutzlos, sofern wir nicht zusätzliche Arbeit leisten.

Außerdem stellen wir eine neue Version der sogenannten "prod"-Ressourcen bereit – des Index-HTML- und Service Workers des Weihnachtsmanns –, die sich auf https://santatracker.google.com/ befinden. Dadurch wird die alte Version überschrieben.

Jedes Mal, wenn "Auf den Spuren des Weihnachtsmanns" geladen wird, sucht der Browser nach einem aktualisierten Service Worker und ruft ihn ab, falls verfügbar. In unserem Fall wird mit jedem Release ein anderer Code in Byte generiert. Der Browser betrachtet dies als Upgrade und führt ein neues install-Ereignis aus.

An dieser Stelle sehen sich die Browser eines Nutzers das neue Cache-Manifest an. Diese wird mit dem vorhandenen Cache des Nutzers verglichen. Wenn Assets einen anderen MD5-Hash haben, löschen wir sie aus dem Cache und bitten den Browser, sie noch einmal abzurufen. In den meisten Fällen sind die Inhalte im Cache jedoch weitgehend gleich oder unterscheiden sich nur geringfügig.

In "Auf den Spuren des Weihnachtsmanns" führt ein Upgrade des Service Workers dazu, dass der Browser des Nutzers sofort neu geladen wird.

Offline-Surfen

Natürlich mussten wir auch einige Änderungen an der Benutzeroberfläche vornehmen, um eine Offlinenutzung zu unterstützen und sie für Nutzer verständlicher zu machen, die möglicherweise nicht erwarten, dass eine Website offline funktioniert.

Ein kleines Banner zeigt an, wenn Sie offline surfen. Alle nicht im Cache gespeicherten Szenen sind eingefroren und können nicht angeklickt werden. So können Nutzer nicht auf Inhalte zugreifen, die nicht verfügbar sind.

"Auf den Spuren des Weihnachtsmanns" sendet regelmäßig Anfragen an die API des Weihnachtsmanns. Treten bei diesen Anfragen Fehler oder Zeitüberschreitungen auf, gehen wir davon aus, dass der Nutzer offline ist. Wir verwenden diese API anstelle des integrierten Attributs navigator.onLine des Browsers. Diese teilt uns nur mit, ob der Nutzer online ist. (Dies wird auch als Lie-Fi bezeichnet.)

Die internationale Verbindung

Die meisten unserer Nutzer sind auf Englisch, gefolgt von Japanisch, Portugiesisch, Spanisch und Französisch. Der Weihnachtsmann wurde jedoch in über 35 verschiedenen Sprachen gebaut und veröffentlicht.

Wenn ein Nutzer „Auf den Spuren des Weihnachtsmanns“ lädt, wählen wir anhand der Sprache des Browsers und anhand anderer Hinweise eine Sprache für die Auslieferung aus. Die meisten Nutzer überschreiben diese Sprache nie. Wählt ein Nutzer jedoch eine neue Sprache über unsere Auswahl aus, wird dies so behandelt, als wäre ein Upgrade verfügbar.

Mit anderen Worten: 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 zur Verfügung stellt, werden berechtigte Nutzer aufgefordert, ihn auf ihrem Startbildschirm zu installieren. Im Jahr 2016 stammten etwa 10% der infrage kommenden Ladevorgänge über das Startbildschirmsymbol.

Fazit

Dank unseres bestehenden Szenendesigns, das durch unsere bestehende Verwendung von Polymer und Webkomponenten einfach gemacht wurde, konnten wir die Weihnachtsmann-Ortung schnell in eine Offline-PWA umwandeln und so eine zuverlässige, interaktive Erfahrung ermöglichen. Außerdem wird unser Build-System genutzt, um effiziente Upgrades durchzuführen, wobei nur geänderte Assets ungültig werden.

Der Weihnachtsmann ist zwar größtenteils eine Sonderlösung, viele seiner Prinzipien findet man aber in der App Toolbox von Polymer Project. Wenn Sie eine neue PWA von Grund auf neu erstellen, sollten Sie sich die Anleitung ansehen. Wenn Sie nach einem Frameworks-unabhängigen Ansatz suchen, sehen Sie sich stattdessen die Workbox Library an.