Notions de base sur les applications Web progressives

Avez-vous déjà vu le bouton "Ajouter à l'écran d'accueil" qui est apparu sur l'écran de votre smartphone Android lorsque vous avez parcouru un site? Si vous cliquez sur ce bouton, une certaine application sera installée sur le téléphone en arrière-plan, l'icône de lancement qui ira à l'écran principal. Maintenant, cette application peut être lancée et fonctionner avec le site de la même manière qu'auparavant, mais uniquement dans l'interface téléphonique ordinaire.

Il s'agit d'une application mobile qui a été téléchargée depuis une application web. De plus, comme vous pouvez le voir, pour installer une telle application, vous n'avez pas besoin d'interagir avec le Play Market. En conséquence, l'installation de telles applications est aussi simple que possible. Cependant, c'est loin d'être le plus intéressant. En lançant de tels programmes, vous avez la possibilité de travailler avec les données qu'ils affichent, même sans connexion Internet. Ils vous permettent d'interagir avec des pages Web hors ligne. Eh bien, n'est-ce pas merveilleux?

L'auteur du matériel que nous publions aujourd'hui parlera de ces applications, des raisons pour lesquelles elles sont nécessaires et de la manière de les créer.



Vous avez probablement déjà compris que nous ne parlions que de la soi-disant application Web progressive (PWA). Une telle application peut être installée directement à partir de la fenêtre du navigateur, l'icône de lancement ressemblera à l'icône d'une application mobile classique et, comme de nombreuses applications mobiles, vous permettra de l'utiliser sans connexion Internet.


Bouton Ajouter à l'écran d'accueil

Parlons maintenant de ce qu'est la «progressivité» lorsqu'elle est appliquée aux applications Web. Je propose de mieux les connaître, de découvrir en quoi elles diffèrent des applications Web ordinaires, et en plus, je veux vous dire pourquoi je pense que PWA est meilleur que les applications mobiles traditionnelles.

Qu'est-ce qu'une application Web progressive?

Le terme «Progressive Web App» a été inventé par Alex Russell et Frances Berriman. Selon Alex, les applications Web progressives ne sont que des sites Web qui ont pris les bonnes vitamines. Ce qui est au cœur de PWA ne peut pas être appelé un nouveau cadre ou une nouvelle technologie. Il s'agit en fait d'un ensemble de méthodes de développement avancées qui vous permettent de rendre le comportement d'une application Web très similaire au comportement des applications de bureau ou mobiles classiques.


Icône PWA sur l'écran d'accueil

Les PWA offrent à l'utilisateur une nouvelle convivialité grâce à des améliorations progressives de l'application. En général, cela signifie que PWA, sur des appareils mobiles de différentes générations, fonctionnera à peu près de la même manière. Bien sûr, certaines fonctionnalités des applications téléphoniques ordinaires peuvent ne pas être disponibles pour eux, mais ces applications fonctionnent généralement sur différents appareils comme ils devraient fonctionner pour eux.

Pourquoi avez-vous besoin d'applications Web avancées?

Avant de comprendre pourquoi PWA est nécessaire, parlons des problèmes auxquels nous sommes confrontés lors de la conception d'applications Web et d'applications mobiles régulières.

• Connexion Internet lente. Peut-être que, là où vous vivez, avec l'Internet rapide, tout est en ordre, donc ce problème ne vous affecte pas. Mais 60% de la population mondiale utilise toujours l'Internet 2G. Même aux États-Unis, seules certaines vitesses sont disponibles pour certains utilisateurs, comparables aux vitesses des modems ordinaires utilisant de simples lignes téléphoniques.
• Site Web à chargement lent. Si le site se charge très lentement, savez-vous combien de temps l'utilisateur attend avant de cliquer sur le bouton de fermeture de la fenêtre? Trois secondes! 53% des utilisateurs quittent des sites trop lents.
• La complexité de l'installation des applications. Les utilisateurs ne souhaitent pas installer des applications mobiles régulières. L'utilisateur moyen installe 0 application par mois.
• Impliquer les utilisateurs dans l'utilisation de l'application. Les utilisateurs passent la plupart de leur temps dans des applications mobiles classiques, mais la portée des applications Web mobiles est environ trois fois supérieure. En conséquence, la plupart des utilisateurs ne sont pas particulièrement impliqués activement dans le travail avec les applications, bien que ces utilisateurs passent 80% du temps dans les trois applications mobiles qu'ils utilisent le plus souvent.

Les applications Web progressives aident à résoudre ces problèmes.


PWA en action

Il existe de nombreuses raisons d'utiliser PWA, ici, je voudrais souligner les principales fonctionnalités qu'elles offrent. Si vous décrivez ces capacités en un mot, FIRE signifie Fast, Integrated, Reliable, Engaging, c'est-à-dire qu'une application Web progressive doit être rapide, intégrée dans l'environnement de travail de l'appareil, fiable et avoir les moyens d'engager les utilisateurs à travailler avec elle. .

1. Si nous parlons de vitesse, alors PWA, à toutes les étapes de l'interaction des utilisateurs avec eux, fonctionne rapidement. Ils sont rapidement installés, lancés rapidement, fonctionnent rapidement. Étant donné que les PWA vous permettent de mettre en cache des données, la relance de telles applications est très rapide, même sans accès aux ressources réseau.
   
2. L'intégration de PWA dans l'environnement du périphérique s'exprime dans le fait que de telles applications se comportent comme des applications normales. L'icône pour les lancer est sur l'écran principal, ils peuvent travailler avec des notifications push, ils peuvent utiliser les mêmes fonctions de l'appareil que les applications normales. Par conséquent, lorsqu'il travaille avec des applications Web progressives, l'utilisateur ne sent pas qu'il quitte l'environnement familier.
3. La fiabilité des applications Web intégrées est basée sur le fait qu'elles peuvent fonctionner normalement même sans se connecter à un réseau, en raison de la possibilité de mettre en cache les données à l'aide de travailleurs de service.
4. La capacité de PWA à engager les utilisateurs avec eux est basée sur le fait qu'ils peuvent envoyer des notifications aux utilisateurs. Cela vous permet de tenir l'utilisateur informé des événements intéressants liés à l'application et l'attire pour travailler avec cette application.

Comment créer une application web progressive?

Google a publié une liste de contrôle pour le développement d'applications Web avancées. Considérez les exigences minimales pour une application, dont la conformité nous permet de l'appeler PWA.

▍1. Manifeste d'application

Un manifeste PWA est un fichier manifest.json avec quelque chose comme ceci:

 { "name": "Trending Meme", "short_name": "Meme", "theme_color": "#2196f3", "background_color": "#2196f3", "display": "standalone", "orientation": "portrait", "Scope": "/", "start_url": "/", "icons": [   {     "src": "images/icons/icon-72x72.png",     "sizes": "72x72",     "type": "image/png"   },   {     "src": "images/icons/icon-96x96.png",     "sizes": "96x96",     "type": "image/png"   },   {     "src": "images/icons/icon-128x128.png",     "sizes": "128x128",     "type": "image/png"   },   {     "src": "images/icons/icon-144x144.png",     "sizes": "144x144",     "type": "image/png"   },   {     "src": "images/icons/icon-152x152.png",     "sizes": "152x152",     "type": "image/png"   },   {     "src": "images/icons/icon-192x192.png",     "sizes": "192x192",     "type": "image/png"   },   {     "src": "images/icons/icon-384x384.png",     "sizes": "384x384",     "type": "image/png"   },   {     "src": "images/icons/icon-512x512.png",     "sizes": "512x512",     "type": "image/png"   } ], "splash_pages": null } 

Nous avons devant nous un fichier JSON standard qui contient des méta-informations sur une application Web. Ici, il y a des données sur les icônes d'application (l'une d'elles que l'utilisateur voit sur l'écran principal après l'installation de l'application), la couleur d'arrière-plan de l'application, son nom complet et abrégé, etc. Vous pouvez écrire ce manifeste vous-même ou utiliser un outil spécial qui automatise la création de tels fichiers.


Un site qui facilite la création d'un fichier manifest.json

▍2. Travailleurs des services

Les travailleurs de service sont des travailleurs événementiels qui s'exécutent en arrière-plan de l'application et agissent comme intermédiaires entre l'application et les ressources réseau. Ils peuvent intercepter les requêtes réseau et mettre en cache les informations de l'application. Ils peuvent être utilisés pour télécharger des données qui doivent être utilisées pour garantir que l'application fonctionne hors ligne. Les travailleurs de service sont des programmes JavaScript qui interceptent le traitement de certains événements et effectuent certaines tâches.

Voici un exemple de fichier serviceworker.js .

 self.addEventListener('fetch', event => {   //           const {request} = event;   const url = new URL(request.url);   if(url.origin === location.origin) {       event.respondWith(cacheData(request));   } else {       event.respondWith(networkFirst(request));   } }); async function cacheData(request) {   const cachedResponse = await caches.match(request);   return cachedResponse || fetch(request); } 

▍3. Insignes

Les icônes sont utilisées pour lancer l'installation sur le périphérique PWA. Le site susmentionné, qui aide à créer des fichiers manifestes, vous permet de générer automatiquement un ensemble d'icônes d'application basé sur un fichier image unique de 512 x 512 pixels de taille qui est téléchargé sur ce site. Les fichiers générés sont enregistrés au format .png .

▍4. La sécurité

Pour qu'une application soit appelée PWA, elle doit, entre autres, prendre en charge l'échange de données sur un canal de communication sécurisé utilisant HTTPS. Il est facile d'obtenir un certificat SSL pour organiser une telle connexion en utilisant les capacités de services comme Cloudflare et LetsEncrypt. La protection des applications n'est pas seulement ce qui est absolument nécessaire de nos jours, c'est aussi un moyen de démontrer la fiabilité de l'application à l'utilisateur et d'établir des relations de confiance avec lui.

Résumé

Dans cet article, nous avons parlé des applications Web progressives, expliqué pourquoi elles sont nécessaires, quels problèmes elles résolvent, quelles exigences leur sont présentées. Ici, nous avons également abordé le sujet de leur développement, en particulier, nous avons parlé du manifeste PWA, des employés de service, des icônes d'application et du fait qu'ils doivent être protégés à l'aide de HTTPS. La technologie PWA est souvent perçue comme quelque chose de exclusivement lié aux smartphones Android, et jusqu'à récemment, ce point de vue avait droit à la vie. Cependant, compte tenu des événements qui ont eu lieu cette année, on peut dire que PWA a un avenir très intéressant sur de nombreuses plateformes. Le sujet de la PWA, en effet, est loin d'être épuisé par tout cela. Il est donc fort possible que nous y revenions.

Chers lecteurs! Que pensez-vous des applications Web progressives?