Sur la piste du père Noël en tant que PWA

Consulter le site

Résumé

Pour les fêtes de fin d'année 2016, l'application Sur la piste du père Noël a rapidement été mise à niveau vers une progressive web app hors connexion, en partie grâce à notre système de mise en scène existant.

Résultats

• Le père Noël est une progressive web app (PWA) qui prend en charge la fonctionnalité Ajouter à l'écran d'accueil (ATHS) et le mode hors connexion.
• 10% des sessions éligibles ont commencé via l'icône ATS
• 75% des utilisateurs ont accepté de façon native les éléments personnalisés et le Shadow DOM, deux éléments essentiels des composants Web.
• Score Lighthouse : 81
• Le mode hors connexion, via l'API Service Worker, est associé au chargement différé pour ne mettre en cache que les scènes visitées et les mettre à niveau en mode silencieux sur les nouvelles versions.

Contexte

Sur la piste du père Noël est une tradition de Noël chez Google. Chaque année, vous pouvez célébrer les fêtes de fin d'année avec des jeux et des expériences éducatives tout au long du mois de décembre. Et pendant que le père Noël fait une pause bien méritée, les lutins travaillent à publier l'application Open Source Sur la piste du père Noël, à la fois sur le Web et sur Android.

Sur le Web, Sur la piste du père Noël est un grand site interactif avec de nombreuses "scènes" uniques (écrites à l'aide de Polymer), compatible avec la plupart des navigateurs récents. L'évaluation de la modernité du navigateur d 'un utilisateur est déterminée par la détection des fonctionnalités : le Père Noël requiert, entre autres, Set et l'API Web Performance.

En 2016, nous avons mis à niveau le moteur de l'application Sur la piste du père Noël afin d'offrir une expérience hors connexion pour la plupart des scènes. Cela exclut les scènes reposant sur des vidéos YouTube ou montrant la position en direct du père Noël, qui ne sont disponibles qu'avec un lien direct avec le pôle Nord. 📶☃️

défis

Le père Noël a adopté un design réactif qui fonctionne bien sur les téléphones, les tablettes et les ordinateurs de bureau. Le site séduit par ses contenus multimédias de qualité, tels que des visuels stylisés et une bande-son sur le thème des fêtes de fin d'année. Cependant, une version standard de l'application Sur la piste du père Noël fait plusieurs centaines de mégaoctets ! Cela est dû à plusieurs raisons:

• Le père Noël est pris en charge dans plus de 35 langues. De nombreux éléments doivent donc être dupliqués.
• Chaque plate-forme n'accepte pas les mêmes contenus multimédias (mp3 ou ogg, par exemple).
• Les fichiers multimédias sont parfois fournis dans différentes tailles et résolutions.

Les lutins du père Noël sont également dévoués, tout au long du mois de décembre. Ils publient souvent de nouvelles mises à jour critiques tout au long du mois. Cela signifie que les éléments déjà mis en cache par le navigateur d'un utilisateur peuvent avoir besoin d'être actualisés lors de visites répétées.

Ces défis:

• Ressources multimédias volumineuses pour différentes "scènes"
• Modifications apportées au cours du mois

... si vous n'êtes pas d'accord avec une stratégie hors ligne naïve.

Le Père Noël, conçu avec Polymer

Il est utile de prendre du recul et de parler de la conception globale du père Noël avant de nous pencher sur la façon dont nous l'avons mis à niveau vers une PWA hors connexion.

Le père Noël est une application monopage, écrite à l'origine dans Polymer 0.5, et mise à niveau vers Polymer 1.7. Le Père Noël est constitué d'un ensemble partagé de code : le routeur, les ressources de navigation partagées, etc. Il possède également de nombreuses "scènes" uniques.

Chaque scène est accessible via une URL différente (/village.html, /codelab.html et /boatload.html) et constitue son propre composant Web. Lorsqu'un utilisateur ouvre une scène, nous préchargeons l'ensemble du code HTML et des éléments requis (images, audio, CSS, js), qui existent sous /scenes/[[sceneName]] dans le dépôt "Sur la piste du père Noël". Dans l'intervalle, un pré-chargeur s'affiche pour indiquer la progression de l'opération.

Cette approche signifie que nous n'avons pas à charger d'éléments inutiles pour les scènes que l'utilisateur ne voit pas (ce qui représente beaucoup de données). Cela signifie également que nous devons conserver un "fichier manifeste de cache" interne de tous les éléments requis pour chaque scène. Le fichier manifeste de cache est un fichier JSON stockant un mappage entre le nom du fichier et le hachage MD5 de son contenu.

Charger ce que vous utilisez

Ce modèle permet d'économiser de la bande passante en ne diffusant que les ressources requises pour les scènes visitées par un utilisateur, au lieu de précharger l'ensemble du site en une seule fois. L'application Sur la piste du père Noël exploite la capacité de Polymer à mettre à niveau les éléments personnalisés au moment de l'exécution, plutôt qu'au moment du chargement. Prenons l'exemple de l'extrait suivant :

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

Sur la piste du père Noël, suivez les étapes ci-dessous pour charger une scène, par exemple : boatload-scene:

1. Tous les éléments de la scène (y compris <boatload-scene>) sont initialement inconnus et sont tous traités comme HTMLUnknownElement, avec quelques attributs supplémentaires.
2. Lorsque la scène sélectionnée est modifiée, l'élément <lazy-pages> en est informé.
3. L'élément <lazy-pages> résout l'élément de la scène et l'attribut path, en chargeant la scenes/boatload/boatload-scene_en.html d'importation HTML. Il contient l'élément Polymer et ses éléments dépendants.
4. Le pré-chargeur convivial s'affiche.
5. Une fois l'importation HTML chargée et exécutée, <boatload-scene> est mis à niveau de manière transparente en un véritable élément Polymer, plein de gaieté des fêtes de fin d'année. 🎄🎉

Cette approche présente des défis. Par exemple, nous ne voulons pas inclure de composants Web en double. Si deux scènes utilisent un élément commun, par exemple, paper-button, nous le supprimons dans le cadre de notre processus de compilation et l'incluons à la place dans le code partagé du Père Noël.

Conception hors connexion

L'application Sur la piste du père Noël est déjà clairement segmentée en scènes grâce à Polymer et à lazy-pages. De plus, chaque scène a son propre répertoire. Nous avons conçu le service worker de "Sur la piste du père Noël", l'élément central qui permet d'exécuter le mode hors connexion sur le navigateur d'un utilisateur, de sorte qu'il prenne en compte la distinction entre code partagé et "scène".

Quelle est la théorie sous-jacente des Service Workers ? Lorsqu'un utilisateur charge votre site dans un navigateur compatible, le code HTML de l'interface peut demander l'installation du service worker. Pour l'application Sur la piste du père Noël, le service worker vit à /sw.js. Cette opération déclenche un événement install qui met en cache l'ensemble du code partagé du Père Noël. Ainsi, aucun élément n'a besoin d'être récupéré au moment de l'exécution.

Une fois installé, Service Worker peut intercepter toutes les requêtes HTTP. Pour l'application Sur la piste du père Noël, le flux de décision simplifié se présente comme suit:

1. La requête est-elle déjà mise en cache ?
   • Parfait. Renvoyez la réponse mise en cache.
2. La requête correspond-elle à un répertoire de scènes, tel que "scènes/bateau/bateau-chargé-scene_en.html" ?
   • Effectuez une requête réseau et stockez le résultat dans le cache avant de le renvoyer à l'utilisateur.
3. Sinon, effectuez une requête réseau standard.

Notre flux et l'événement install permettent à l'application Sur la piste du père Noël de se charger même lorsque l'utilisateur est hors connexion. Toutefois, seules les scènes qu'un utilisateur a déjà chargées sont disponibles. C'est la solution idéale pour rejouer un match et battre votre record.

Les observateurs attentifs remarqueront peut-être que notre stratégie de mise en cache ne permet pas de modifier le contenu. Une fois qu'un fichier est mis en cache dans le navigateur d'un utilisateur, il ne peut plus être modifié. comme je l'expliquerai plus tard.

Nous allons le faire en direct

Comme nous l'avons mentionné, les lutins du père Noël travaillent dur tout au long du mois de décembre et doivent publier de nouvelles mises à jour tout au long du mois. Lors de la création d'une nouvelle version de l'application Sur la piste du père Noël, un libellé unique lui est attribué (par exemple, v20161204112055 est le code temporel de la version (le 4 décembre 2016 à 11:20:55).

Pour cette version libellée, nous générons un hachage MD5 de chaque fichier et nous le stockons dans notre "fichier manifeste de cache". Sur un disque SSD moderne, cela n'ajoute que quelques secondes au processus de compilation.

Chaque version est déployée sur un chemin d'accès unique sur le serveur de mise en cache statique de Google. Autrement dit, les versions antérieures ne sont jamais supprimées. Cela signifie qu'après une nouvelle version, tous les éléments auront une URL différente, même s'ils n'ont pas été modifiés, et tout élément mis en cache par le navigateur ou le service worker devient inutile, sauf si nous effectuons un travail supplémentaire.

Nous déployons également une nouvelle version de ce que nous appelons les ressources "prod" : l'index HTML et les service workers de Santa Santa, disponibles sur https://santatracker.google.com/. Cette opération remplace l'ancienne version.

Chaque fois que l'application Sur la piste du père Noël est chargée, le navigateur recherche un service worker mis à jour et le récupère, le cas échéant. Dans notre cas, chaque version génère un code octet différent. Le navigateur considère qu'il s'agit d'une mise à niveau et effectue un nouvel événement install.

À ce stade, les navigateurs des utilisateurs consultent le nouveau "fichier manifeste de cache". Cette information est comparée au cache existant de l'utilisateur. Si les éléments ont un hachage MD5 différent, nous les supprimons du cache et demandons au navigateur de le récupérer. Toutefois, dans la plupart des cas, le contenu mis en cache est globalement identique ou ne présente que des différences mineures.

Dans Sur la piste du père Noël, la mise à niveau du service worker entraîne l'actualisation immédiate du navigateur de l'utilisateur.

Expérience de navigation hors connexion

Bien sûr, nous avons également dû modifier l'UI pour proposer une expérience hors connexion et pour faciliter la compréhension pour les utilisateurs qui ne s'attendaient peut-être pas à ce qu'un site Web fonctionne hors connexion.

Une petite bannière vous informe lorsque vous naviguez hors connexion. Toutes les scènes qui ne sont pas mises en cache sont "figées" et non cliquables. De cette façon, les utilisateurs ne peuvent pas accéder au contenu qui n'est pas disponible.

Sur la piste du père Noël envoie régulièrement des requêtes à son API. Si ces requêtes échouent ou expirent, nous considérons que l'utilisateur est hors connexion. Nous utilisons cette API plutôt que la propriété navigator.onLine intégrée au navigateur: cela nous indique seulement si l'utilisateur est peut-être en ligne. (également appelé Lie-Fi).

La connexion internationale

Alors que la majorité de nos utilisateurs sont en anglais (suivi de l'espagnol, du français, du japonais et du portugais), la construction et la publication du Père Noël sont possibles dans plus de 35 langues différentes.

Lorsqu'un utilisateur charge l'application Sur la piste du père Noël, nous utilisons la langue du navigateur et d'autres indicateurs pour choisir la langue à utiliser. La majorité des utilisateurs n'écrasent jamais cette langue. Cependant, si un utilisateur choisit une nouvelle langue dans notre outil de sélection, nous considérons qu'il s'agit d'une mise à niveau, comme dans le cas ci-dessus, lorsqu'une nouvelle version de l'application Sur la piste du père Noël était disponible.

En d'autres termes, la version actuelle de "Sur la piste du père Noël" pour le service worker est en réalité un tuple de (build,language).

Ajouter à l'écran d'accueil

Comme le Père Noël fonctionne hors connexion et qu'il fournit un service worker, les utilisateurs éligibles sont invités à l'installer sur leur écran d'accueil. En 2016, environ 10% des chargements éligibles provenaient de l'icône de l'écran d'accueil.

Conclusion

Grâce à notre conception de scène existante, facilitée grâce à notre utilisation de Polymer et à nos composants Web, nous avons pu convertir rapidement l'application Sur la piste du père Noël en PWA hors connexion, offrant ainsi une expérience fiable et attrayante. Elle exploite également notre système de compilation pour effectuer des mises à niveau efficaces, en n'invalidant que les composants modifiés.

Bien que le Père Noël soit en grande partie une solution sur mesure, de nombreux principes sont disponibles dans la Boîte à outils pour applications du projet Polymer. Nous vous recommandons de la consulter si vous créez entièrement une PWA ou, si vous recherchez une approche indépendante du framework, d'essayer la bibliothèque Workbox.