Principal / L'informatique

Comment créer une application Web progressive

Le mobile représente désormais plus de la moitié du trafic Web et les applications Web permettent aux utilisateurs de faire des choses dans le navigateur qui rivalisent avec les applications natives, mais il y a un problème: la qualité des connexions et des appareils varie énormément dans le monde entier.

Répondre à la fois aux utilisateurs sur des connexions ultra-rapides à Séoul et aux utilisateurs des régions rurales de l'Inde sur un téléphone obsolète est le dernier défi en matière d'utilisation, et Progressive Web Apps est la solution.

Les PWA utilisent l'amélioration progressive pour charger d'abord le contenu le plus important, puis ajoutent des extras de présentation et fonctionnels si nécessaire, ce qui signifie que tous vos utilisateurs bénéficient de la même expérience de base le plus rapidement possible. Si vous souhaitez atteindre le public le plus large possible, les PWA sont la solution.

10 étapes pour une expérience utilisateur engageante

Bien que les Progressive Web Apps apportent de nombreux avantages et fonctionnalités au Web, elles ne nécessitent pas de réécrire l'ensemble de votre application. Toute application peut être convertie en PWA en y ajoutant quelques couches supplémentaires.

Pour de meilleurs résultats, vous voudrez mettre fortement l'accent sur les performances dès le début - mais c'est vrai pour n'importe quelle application Web. Ici, nous allons parcourir les étapes pour rendre votre application progressive.

01. Servir via HTTPS

Soyons honnêtes: vous devriez le faire de toute façon. SSL ajoute une couche supplémentaire de sécurité au Web, aidant vos utilisateurs à se sentir en sécurité dans l'utilisation de votre site. Avec les PWA, HTTPS est essentiel pour utiliser les techniciens de service et permettre l'installation de l'écran d'accueil. Vous pouvez acheter un certificat SSL auprès de votre registraire de domaine à peu de frais, puis le configurer via votre service d'hébergement.

02. Créer un shell d'application

Le shell de votre application est la première chose qui se charge - la première chose que voit l'utilisateur. Il doit exister entièrement dans votre document HTML d'index, avec CSS en ligne, pour s'assurer qu'il apparaît le plus rapidement possible et que votre utilisateur ne regarde pas un écran blanc plus longtemps que nécessaire. La coque d'application fait partie du modèle d'amélioration progressive. Votre application doit fournir du contenu à l'utilisateur dès que possible, puis l'améliorer progressivement à mesure que davantage de données (probablement JavaScript) se chargent.

L'exemple ci-dessous est tiré d'une application React.js. L'utilisateur est présenté avec un aperçu de l'application et un indicateur de chargement dans l'index.html. Ensuite, une fois le JavaScript chargé et React démarré, l'application complète est rendue dans le shell.

    Chat
  // index.js ReactDOM.render( ,  document.getElementById('root') );

03. Enregistrer un technicien de service

Pour exploiter le spectre complet des goodies PWA (notifications push, mise en cache, invites d'installation), vous aurez besoin d'un service worker.

Heureusement, ils sont assez faciles à installer. Ci-dessous, nous vérifions d'abord si le navigateur de l'utilisateur prend en charge les techniciens de service. Ensuite, si tel est le cas, nous pouvons procéder à l'enregistrement du fichier de service worker, appelé ici service-worker.js . Notez que vous n'avez besoin de rien de spécial dans ce fichier à ce stade - il peut être vide.

Dans l'exemple ci-dessous, cependant, nous montrons comment puiser dans les trois événements clés du cycle de vie du service worker. Ce sont «installer», lorsque l'utilisateur visite votre page pour la première fois; «activer», juste avant la fin de l'enregistrement; et «fetch», lorsque l'application fait une requête réseau. Le dernier est pertinent pour la mise en cache et la capacité hors ligne.

   if ('serviceWorker' in navigator) {   window.addEventListener('load', function() {   navigator.serviceWorker.register('service-worker.js').then(function(registration) {   // Registration was successful   console.log('Registered!');   }, function(err) {   // registration failed :(   console.log('ServiceWorker registration failed: ', err);   }).catch(function(err) {   console.log(err);   });   });   } else {   console.log('service worker is not supported');   }    // service-worker.js self.addEventListener('install', function() {   console.log('Install!'); }); self.addEventListener('activate', event => {   console.log('Activate!'); }); self.addEventListener('fetch', function(event) {   console.log('Fetch!', event.request); });

04. Ajouter des notifications push

Les techniciens de service permettent à vos utilisateurs de recevoir des notifications push via l'API Web Push. Pour y accéder, vous pouvez accéder à self.registration.pushManager à partir de votre fichier de service worker. Étant donné que l'envoi de notifications push dépend fortement de la configuration de votre backend, nous ne nous y plongerons pas ici.

Si vous démarrez une application à partir de zéro, le service Firebase de Google est fourni avec Firebase Cloud Messaging pour des notifications push relativement simples. Le code ci-dessous montre comment s'inscrire aux notifications push via l'API Push.

navigator.serviceWorker.ready.then(function(registration) {   if (!registration.pushManager) {     alert('No push notifications support.');     return false;   }   //To subscribe `push notification` from push manager   registration.pushManager.subscribe({   userVisibleOnly: true //Always show notification when received   })   .then(function (subscription) {   console.log('Subscribed.');   })   .catch(function (error) {   console.log('Subscription error: ', error);   }); })

05. Ajouter un manifeste d'application Web

Afin de rendre votre application installable, vous devez inclure un manifest.json dans le répertoire racine de l'application. Vous pouvez considérer cela comme une description de votre application, similaire à ce que vous pourriez soumettre à l'App Store. Il comprend des icônes, un écran de démarrage, un nom et une description.

Il existe également une configuration pour la façon dont votre application apparaît lorsqu'elle est lancée à partir de l'écran d'accueil de l'utilisateur: Voulez-vous afficher la barre d'adresse dans le navigateur ou non? De quelle couleur voulez-vous que la barre d'état soit? Etc. Notez qu'un bon manifest.json devrait inclure un spectre complet de tailles d'icônes pour divers appareils. Le code ci-dessous est un aperçu de certaines des propriétés que votre manifeste peut inclure.

{   'short_name': 'Chat',   'name': 'Chat',   'icons': [   {   'src':'img/',   'sizes': '192x192',   'type': 'image/png'   }   ],   'start_url': '/?utm_source=homescreen',   'background_color': '#e05a47',   'theme_color': '#e05a47',   'display': 'standalone' }

06. Configurer l'invite d'installation

Lorsqu'un utilisateur visite une PWA avec un technicien de service et un manifeste, Chrome l'invite automatiquement à l'installer sur son écran d'accueil, étant donné ce qui suit: l'utilisateur doit visiter le site deux fois, avec cinq minutes entre les visites.

L'idée ici est d'attendre que l'utilisateur manifeste son intérêt pour votre application, puis de lui demander d'en faire un élément de son appareil (cela contraste fortement avec l'approche native de l'application, qui demande cet investissement dès le départ).

Mais il peut y avoir des cas où vous souhaitez afficher l'invite d'installation dans différentes situations, par exemple après que l'utilisateur a effectué une action utile particulière. Pour ce faire, nous interceptons le beforeinstallprompt événement et enregistrez-le pour plus tard, puis déployez l'invite lorsque nous le jugeons bon.

window.addEventListener('beforeinstallprompt', e => {   console.log('beforeinstallprompt Event fired');   e.preventDefault();   // Stash the event so it can be triggered later.   this.deferredPrompt = e;   return false;   }); // When you want to trigger prompt: this.deferredPrompt.prompt();   this.deferredPrompt.userChoice.then(choice => {   console.log(choice);   }); this.deferredPrompt = null;

07. Analysez les performances de votre application

La performance est le cœur et l'âme des PWA. Votre application doit être rapide pour les utilisateurs dans toutes les conditions du réseau. La mise en cache et la fonctionnalité hors ligne aident beaucoup, mais en fin de compte, votre application devrait être rapide même si l'utilisateur ne dispose pas du navigateur pour prendre en charge la technologie des techniciens de service. Telle est la définition de l'amélioration progressive - offrir une expérience formidable à tout le monde, indépendamment de la modernité de l'appareil ou des conditions du réseau.

Pour ce faire, un ensemble de mesures utiles est le système RAIL. RAIL est ce que Google appelle un «modèle de performance centré sur l'utilisateur» - un ensemble de directives pour mesurer les performances de notre application.

L'acronyme signifie Réponse (combien de temps il faut à votre application pour répondre aux actions de l'utilisateur), Animation (maintenir la vitesse de l'animation à 60 ips), Inactif (utiliser le temps lorsque votre application ne fait rien d'autre pour charger et mettre en cache des ressources supplémentaires) et Load (chargement de votre application en une seconde ou moins).

Voici un tableau de points de repère significatifs pour le chargement des applications, fourni par Meggin Kearney, rédacteur technique chez Principes de base du Web Google .

Cliquez sur l'icône en haut à droite pour agrandir l'image

08. Auditez votre application avec Lighthouse

Google est le plus grand champion qui fait de Progressive Web Apps le futur du Web. En tant que tel, il a fourni un outil utile pour guider votre développement PWA.

Anciennement appelé Lighthouse et fourni en tant qu'extension Chrome, à partir de Chrome 60, il fait partie des Chrome DevTools, sous l'onglet `` Audits ''. Lighthouse exécute votre application dans différentes conditions et mesure sa réponse et son succès conformément aux directives PWA. Il vous donne ensuite un score sur 100. Il peut également noter votre application sur les meilleures pratiques Web en même temps.

Le texte suivant est une liste des valeurs Lighthouse mesurées. En cours d'utilisation affiche également des descriptions.