Comment implémenter un PWA et Barba.js dans des kiosques Internet

Photo par rawpixel sur Unsplash

Le projet que nous allons décrire ici est un kiosque Internet interactif utilisé comme extension de l’application mobile LikeUs. LikeUs est une application mobile qui permet aux utilisateurs de choisir facilement un lieu pour sortir, prendre un café ou écouter un concert. La rue Tkalčićeva de Zagreb étant un lieu fréquenté par de nombreux jeunes, nous avons décidé que c’était le lieu idéal pour notre promotion hors ligne de l’application LikeUs.

Mise en œuvre du mode kiosque

L'un des premiers défis auxquels nous avons été confrontés a été la mise en œuvre du mode de navigation par kiosque sur notre appareil. C'était une boîte Android et nous avons utilisé Chrome comme navigateur Web pour exécuter l'application. Le mode navigateur Kiosk est un mode dans lequel vous exécutez l'application en plein écran et sans interface utilisateur de navigateur ou, dans notre cas, sans interface utilisateur Android.

L'intention est d'empêcher les utilisateurs d'exécuter autre chose que le contenu basé sur un navigateur. Comme il existe des centaines d'applications en mode kiosque, nous avons décidé d'utiliser l'une des applications disponibles au lieu d'en créer une de toutes pièces.

Après quelques recherches, nous avons décidé d'utiliser l'application Kiosk Browser Lockdown. Il a toutes les fonctionnalités que nous recherchions:

  • Verrouillage du périphérique sur une seule URL
  • Masquer les options de la barre d'outils
  • Masquer l'écran des notifications
  • Masquer l'interface utilisateur Android

L'étape suivante consistait à tester le PWA dans l'environnement Android et dans l'application Kiosk Browser. C’est alors que nous avons découvert que les choses ne se passeraient pas aussi bien que prévu.

Le premier problème rencontré se situait au niveau de l'interface: le site Web final semblait être une version améliorée de la conception initiale, en raison de certaines limitations d'écran et d'un environnement de rendu différent. À l’approche de la date limite, nous n’avions pas le temps de peaufiner chaque élément du code CSS pour s’adapter aux contours de conception initiaux; nous avons donc décidé de réduire l’ensemble du document.

C'était une approche raisonnable compte tenu de tous les intrants que nous avions. Le fait de tout tester à nouveau était un gros inconvénient, mais nous devions être certains que tout fonctionnerait dans ce contexte.

Le deuxième problème était que les scripts externes tels que Google Maps ne se chargeaient pas dans l’application Kiosk Browser avec le PWA. Nous avons donc modifié légèrement la configuration. Nous avons lancé l'application Kiosk Browser, qui a supprimé l'interface utilisateur Android, puis quitté l'application Kiosk Browser et démarré le PWA en dehors de l'application Kiosk Browser. De cette façon, nous avons réussi à supprimer l'interface Android avec tous les scripts externes chargés comme ils étaient supposés le faire.

Développement d'une application Web progressive

Après avoir lu le cahier des charges et les spécifications du projet, la première chose qui nous est venue à l’esprit était… nous devrions faire une PWA (Progressive Web App). Une application Web progressive est une application qui offre des fonctionnalités similaires à celles des applications mobiles natives:

  • Les employés du service permettent aux applications d'afficher le contenu de manière presque instantanée et fiable, car elles cachent chaque demande.
  • Il est possible d'ajouter l'application à l'écran d'accueil comme une application native normale
  • Les notifications push peuvent être implémentées pour des usages multiples
  • L'application est rapide et lisse
  • Il utilise HTTPS et est facile à mettre en œuvre.

Après avoir évalué les demandes du client, toutes les fonctionnalités du PWA répondaient à nos demandes.

Nos demandes étaient:

  • Pour créer une application pouvant être utilisée sur un écran interactif
  • L'application doit utiliser une API existante que nous avons créée pour notre application mobile LikeUs.
  • L'appareil utilisé sera une Android Box
  • L'accès à Internet serait restreint parce que l'application serait connectée à un réseau public (cela changerait plus tard)
  • L'application devrait avoir une section supplémentaire pour les bannières et un système de gestion de bannières

Nous pourrions créer une application Web avec notre API existante sans avoir à implémenter de fonctionnalités supplémentaires. Nous pourrions également créer un simple CMS (système de gestion de contenu) pour la gestion des bannières et des notifications push pour le rechargement du contenu. Comme l'accès à Internet serait restreint et instable, nous pourrions utiliser la fonctionnalité PWA pour mettre en cache des pages et les servir même lorsque l'application est hors ligne.

Assurez-vous de consulter ce didacticiel détaillé et cette explication pour les agents de service.

Modification du système de gestion des bannières

L'application est divisée en deux sections. La section supérieure est la section de la bannière et la partie inférieure est la section principale divisée en onglets.

Nous avons deux types de bannières - les vidéos et les images Youtube. Comme les bannières peuvent être changées, nous devions développer un système de gestion de contenu. Nous avons développé un simple CMS dans lequel le client peut saisir des vidéos et des images Youtube dans un curseur.

Le problème que nous avons rencontré ici a été l'actualisation de l'application pour recharger le nouveau contenu de la bannière. Vous voyez, parce que l'application utilisait Barba.js, cela ne rafraîchissait jamais. Pour que cela fonctionne, nous avons utilisé une fonctionnalité intéressante de nos notifications push PWA. Les notifications push sont une fonctionnalité qui utilise l'API Notifications et l'API Push pour envoyer des messages du serveur au client.

Comment les notifications push ont-elles aidé à résoudre notre problème de rechargement de contenu? La solution est assez simple et directe. Lorsque l'utilisateur modifie le contenu de la bannière dans le CMS, nous envoyons un push au PWA, qui est ensuite actualisé deux fois. Le PWA doit être actualisé deux fois pour supprimer le cache et recharger du nouveau contenu.

Faire face aux obstacles externes

Les kiosques Internet sont souvent installés dans des environnements extérieurs où la connexion Internet est parfois instable et lente. Lorsque la connexion Internet est publique et dans une rue très fréquentée, la communication en temps réel et les API externes posent de nombreux problèmes.

Une approche commune consiste à prolonger le délai et à espérer que tout fonctionne bien. Même si ce n'est pas la méthode préférée, elle peut servir de sauvegarde si tout le reste échoue.

Google Maps était l'une des API externes qui nous causait beaucoup de maux de tête. Nous avons dû recharger et ajouter de nouvelles broches, mais sur une connexion lente, c'était parfois impossible.

Équilibrage entre contenu fixe et contenu dynamique

L'optimisation ne s'applique pas uniquement aux techniques de mise en cache avancées et aux réseaux de diffusion de contenu. Le positionnement intelligent de la mise en page et la compréhension des éléments qui peuvent être «sortis» du flux de rechargement de page peuvent réduire le nombre de demandes et accélérer le flux de navigation complet.

Le contenu publicitaire du kiosque était hébergé sur Youtube - il s'agissait d'un curseur vidéo qui se répétait sur toutes les pages. En dessous, nous avons le contenu principal avec la navigation en ligne. Lors de la sélection de différents éléments de navigation, le navigateur avait par défaut de recharger l'intégralité de la page, y compris la zone publicitaire fixe. C’est un cauchemar de performances, en particulier lorsque vous utilisez des scripts externes tels que l’API Youtube.

La question ici est - comment ne recharger qu'une partie spécifique de la page? Eh bien, il n'y aura pas de rechargement du navigateur et la seule chose à faire est de modifier le contenu en arrière-plan sans quitter la page.

En raison des analyses implémentées, nous avons dû mettre à jour l'URL en conséquence. Nous l'avons fait en utilisant la technologie PJAX (Push State Ajax). Cette technologie permet la pré-extraction de contenu et l'échange de nœuds DOM cibles en arrière-plan.

Pour éviter que le contenu ne clignote, créez une transition de fondu simple qui se déclenche lorsque le contenu change. Comme la gestion manuelle de tous les états de permutation de contenu prend beaucoup de temps, nous avons utilisé une bibliothèque externe appelée Barba.js. Cette bibliothèque permet une gestion avancée des transitions et est compatible avec tous les frameworks d'animation.

Barba.js dispose d'une mise en cache d'état interne qui peut être utilisée pour exploiter la mise en cache du navigateur et optimiser le temps de chargement. Barba cache est un objet Javascript global où chaque valeur est une promesse à résoudre.

Mise en œuvre des analyses et des pages vues virtuelles

Nous voulions mesurer l'interaction de l'utilisateur et les pages vues. Parce que nous utilisons Barba.js, il s’agit d’une application d’une page sans rechargement de page. L’astuce pour mesurer les vues de page dans ce type d’application consiste à utiliser des vues de page virtuelles. Ce sont des visites de page envoyées à Google Analytics, sans recharger réellement la page.

La première étape consiste à inclure le code du gestionnaire de balises Google, puis à envoyer des pages vues virtuelles à la couche de données. Nous pouvons le faire avec le prochain extrait:

dataLayer.push ({'event': 'VirtualPageview', 'virtualPageURL': currentUrl, 'virtualPageTitle': title});

Cet extrait doit être appelé sur chaque nouvelle page. À chaque interaction utilisateur ouvrant une nouvelle «page», nous appelons cet extrait de code qui envoie l'URL de la page et le titre de la page à Google Analytics. De cette manière, nous pouvons suivre les consultations de page dans des applications d'une page utilisant Barba.js ou toute autre technologie PJAX.

De conclure

Lorsque vous travaillez dans un environnement spécifique, la solution «à la carte» n’est parfois pas votre seule solution. Il est généralement possible d'innover et d'utiliser des outils et des bibliothèques communs dans un environnement peu standard avec un ensemble de défis spécifique.

Publié à l'origine sur www.bornfight.com.