Merci d'avoir participé à Google I/O ! Regarder des contenus à la demande

Cette page a été traduite par l'API Cloud Translation.

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

Résumé

L'application Sur la piste du père Noël a rapidement été mise à niveau vers une progressive web app hors connexion pour la période des fêtes 2016. en partie grâce à la mise en scène actuelle.

Résultats

Le Père Noël est une progressive web app (PWA) qui prend en charge l'ajout à l'écran d'accueil et le mode hors connexion.
10% des sessions éligibles ont commencé via l'icône ATHS
75% des utilisateurs acceptent de manière native les éléments personnalisés et le Shadow DOM, deux éléments essentiels des composants Web.
Note du phare : 81
Le mode hors connexion, via l'API Service Worker, est lié au chargement différé pour ne mettre en cache que les scènes visitées et les mettre à niveau de manière silencieuse lors des nouvelles versions.

Contexte

Chez Google, Sur la piste du père Noël est une tradition des fêtes de fin d'année. Chaque année, célébrez les fêtes de fin d'année avec des jeux et des expériences éducatives tout au long du mois de décembre. Pendant que le Père Noël prend une pause bien méritée, les lutins s'efforcent de publier l'application Sur la piste du Père Noël en Open Source, aussi bien sur le Web que pour Android

Sur le Web, "Sur la piste du père Noël" est un vaste site interactif contenant de nombreuses "scènes" uniques, écrites à l'aide de Polymer, compatible avec la plupart des navigateurs récents. Évaluer si le navigateur d'un utilisateur est "moderne" est déterminée par la détection de caractéristiques: Le Père Noël requiert Set et les l'API Web Performance, autres.

En 2016, nous avons mis à niveau le moteur derrière l'application Sur la piste du père Noël afin de proposer une expérience hors connexion pour la plupart scènes. Cela exclut les scènes sauvegardées par des vidéos YouTube ou celles qui indiquent le lieu de tournage en direct du père Noël, Bien sûr, n'est disponible qu'avec un lien direct avec le pôle Nord ! 📶☃️

</ph> Sur la piste du père Noël sur un appareil Android

Défis

Le père Noël intègre une conception réactive qui fonctionne bien sur les téléphones, les tablettes et les ordinateurs de bureau. Le site est très populaire grâce à des contenus multimédias de qualité, y compris des visuels stylisés et une bande-son inspirée des fêtes de fin d'année. Cependant, la version standard de Sur la piste du père Noël fait plusieurs centaines de mégaoctets ! Cela s'explique par plusieurs raisons:

Le Père Noël étant pris en charge dans plus de 35 langues, de nombreux éléments doivent être dupliqués.
La compatibilité multimédia diffère selon les plates-formes (mp3 et ogg, par exemple).
Les fichiers multimédias sont parfois proposés dans différentes tailles et résolutions.

Les lutins du Père Noël travaillent également tout au long du mois de décembre et publient souvent de nouvelles mises à jour critiques. tout au long du mois. Par conséquent, les éléments déjà mis en cache par le navigateur d'un utilisateur devront peut-être être actualisés lors de visites répétées.

Voici les défis à relever:

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

... une stratégie hors connexion naïve est inadaptée.

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 voir comment nous la mettre à niveau en PWA hors connexion.

Santa est une application monopage, écrite à l'origine en Polymer 0.5, et désormais mise à niveau vers Polymer 1,7. Le Père Noël se compose d'un ensemble de code partagé (routeur, ressources de navigation partagées, etc.). Il comporte également de nombreuses "scènes" uniques.

Chaque scène est accessible via une URL différente : /village.html, /codelab.html et /boatload.html. Il s'agit de son propre composant Web. Lorsqu'un utilisateur ouvre une scène, nous préchargeons tous les éléments HTML et assets requis (images, audio, CSS, js). qui se trouvent sous /scenes/[[sceneName]] dans le dépôt de l'application Sur la piste du père Noël. Dans le même temps, les utilisateurs voient s'afficher un pré-chargeur convivial qui indique leur progression.

Grâce à cette approche, il n'est pas nécessaire de charger des éléments inutiles pour les scènes que l'utilisateur ne voit pas. (ce qui représente beaucoup de données). Cela signifie aussi que nous devons conserver un "fichier manifeste de cache" interne de tous les éléments nécessaires chaque scène. Le fichier manifeste de cache est un fichier JSON qui stocke un mappage entre le nom de fichier et un hachage MD5. de son contenu.

Charger ce que vous utilisez

Ce modèle économise de la bande passante, en ne fournissant que les ressources nécessaires aux scènes qu'un utilisateur visite, plutôt que de précharger tout le site en une seule fois. L'application Sur la piste du père Noël exploite la capacité de Polymer à mettre à niveau des éléments personnalisés au moment de l'exécution, plutôt que le temps de 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>

Pour charger une scène, l'application Sur la piste du père Noël, par exemple : boatload-scene :

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

Cette approche présente des difficultés. 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 compilation et de l'inclure à 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à subdivisée en scènes grâce à Polymer et lazy-pages. plus chaque possède son propre répertoire. Nous avons conçu le service worker de l'application Sur la piste du père Noël, l'élément central du mode hors connexion, qui s'exécute sur un le navigateur de l'utilisateur, comprendre le code partagé par rapport à la "scène" distinction.

Quelle est la théorie sous-jacente d'un service worker ? Lorsqu'un utilisateur charge votre site dans un navigateur compatible, le le code HTML de l'interface peut demander l'installation du service worker. Pour l'application Sur la piste du père Noël, l'agent se trouve à l'adresse /sw.js. Cette opération déclenche un événement install qui met en pré-cache l'ensemble du code partagé du Père Noël. Il n'est donc pas nécessaire récupérées au moment de l'exécution.

Une fois installé, le 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:

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

Notre flux et l'événement install permettent de charger l'application Sur la piste du père Noël, même lorsqu'un utilisateur est hors connexion. Toutefois, seules les scènes précédemment chargées sont disponibles. C'est l'outil idéal pour rejouer un jeu et battre votre record.

Notez 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 n'est plus modifié. Nous y reviendrons plus tard.

Nous le ferons 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 souvent lâcher des mises à jour au cours du mois. Lorsqu'une version de l'application Sur la piste du père Noël est créée, un libellé unique lui est attribué (par exemple, v20161204112055, le le code temporel de la sortie (le 4 décembre 2016 à 11:20:55).

Pour cette version libellée, nous générons un hachage MD5 de chaque fichier et le stockons dans notre cache le fichier manifeste. 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 anciennes versions 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'en avaient pas et tous les éléments mis en cache par le navigateur ou le service worker seront inutiles, travail supplémentaire.

Nous déployons également une nouvelle version de ce que nous appelons la "production". ressources : l'index HTML et le service worker, disponibles sur https://santatracker.google.com/. Cette opération écrase l'ancienne version.

À chaque chargement de l'application Sur la piste du père Noël, le navigateur recherche un service worker mis à jour et récupère le fichier, si disponibles. Dans notre cas, chaque version génère un code d'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 consultent le nouveau "fichier manifeste de cache". Ces données seront comparées au cache existant de l'utilisateur et, si les éléments présentent un hachage MD5 différent, les supprimer du cache et demander au navigateur de les 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 l'application Sur la piste du père Noël, la mise à niveau d'un service worker entraîne le rechargement immédiat du navigateur d'un utilisateur.

Expérience de navigation hors connexion

Bien sûr, nous avons aussi dû modifier l'interface utilisateur pour proposer une expérience hors connexion, et pour optimiser plus facile à comprendre pour les utilisateurs qui ne s'attendent peut-être pas à ce qu'un site web puisse fonctionner 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.

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

La connexion internationale

La majorité de nos utilisateurs sont en anglais (suivi du japonais, de l'espagnol, du portugais et le français), le Père Noël est créé et sorti dans plus de 35 langues différentes.

Lorsqu'un utilisateur charge l'application Sur la piste du père Noël, nous utilisons le langue du navigateur et d'autres indices pour choisir la langue à diffuser. La plupart des utilisateurs ne remplacent jamais cette langue. Toutefois, si un utilisateur choisit une nouvelle langue via notre outil de sélection, nous considérons qu'il s'agit d'une mise à jour disponible, comme dans le cas ci-dessus, lorsqu'une nouvelle version de l'application Sur la piste du père Noël est disponible.

En d'autres termes, il s'agit de la version actuelle de l'application Sur la piste du père Noël pour le service worker est en fait un tuple de (build,language).

Ajouter à l'écran d'accueil

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

Conclusion

Nous avons pu rapidement convertir l'application Sur la piste du père Noël en PWA hors connexion, offrant ainsi une expérience grâce à la conception de scène existante, rendue plus facile grâce à l'utilisation de Polymer et de vos composants Web. Il exploite également notre système de compilation pour effectuer des mises à niveau efficaces, en invalidant uniquement les éléments modifiés.

Bien que le Père Noël soit en grande partie une solution personnalisée, bon nombre de ses principes se retrouvent dans le jeu Polymer la Boîte à outils App Toolbox du projet. Nous vous conseillons de le consulter si vous créez une PWA en partant de zéro, ou si vous recherchez indépendante du framework, essayez la Bibliothèque Workbox :