Que sont les applications Web progressives et comment en installer une ?

Que sont les applications Web progressives et comment en installer une ?

Les applications dominent votre téléphone. Pendant longtemps, les applications n'ont pas influencé votre bureau ou votre navigateur de la même manière. Cela a changé ces dernières années. Les applications Web progressives (PWA) prennent de l'ampleur et modifient nos interactions avec toutes sortes de sites Web.





Mais qu'est-ce qu'une Progressive Web App exactement ? Que fait une PWA qu'un site Web ne fait pas ? Voici ce que vous devez savoir sur les applications Web progressives.



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

Les applications Web progressives sont des applications Web qui offrent un site régulier aux utilisateurs mais apparaissent comme une application mobile native. Les PWA tentent d'apporter la convivialité d'une application mobile native à l'ensemble des fonctionnalités du navigateur moderne, en tirant pleinement parti des avancées dans les deux domaines de développement.





Qu'est-ce qui définit une PWA, alors ?

  • Universel : une PWA doit fonctionner de manière transparente (enfin, presque) pour chaque utilisateur, quel que soit son navigateur.
  • Sensible : Les PWA doivent fonctionner avec n'importe quel appareil, tel que votre ordinateur portable, tablette, smartphone, etc.
  • Concevoir : la conception doit imiter les applications mobiles natives, ce qui signifie des menus simplifiés et faciles à trouver, avec une interactivité simple pour des fonctionnalités avancées.
  • En sécurité : les PWA doivent utiliser HTTPS pour sécuriser les données des utilisateurs.
  • Découvrable : les utilisateurs peuvent trouver des PWA et elles sont facilement identifiables en tant qu'application (plutôt qu'en tant que « site »).
  • Engagement: une PWA doit avoir accès à des fonctionnalités d'engagement natives telles que les notifications push.
  • Mises à jour: Les PWA restent à jour, servant les dernières versions d'un service ou d'un site.
  • Installation: permettent aux utilisateurs d''installer' facilement le PWA sur leur écran d'accueil sans avoir besoin d'un magasin d'applications.
  • Partage: Les PWA ne nécessitent qu'une seule URL à partager, sans aucune installation.

Comme vous pouvez le voir, les PWA visent à fournir aux utilisateurs une expérience de site Web complète avec les fonctionnalités rationalisées et la conception d'interface d'une application native.



Comment fonctionne une application Web progressive ?

La clé des Progressive Web Apps réside dans les agents de service du navigateur.

Un service worker est un script qui s'exécute en arrière-plan de votre navigateur, « séparé d'une page Web, ouvrant la porte à des fonctionnalités qui ne nécessitent pas de page Web ou d'interaction avec l'utilisateur ». Vous pourriez utiliser des travailleurs de service comme notifications push et synchronisation en arrière-plan pour le moment, mais l'avenir immédiat de PWA donne à ces scripts une plus grande puissance.



En tant que tels, les techniciens de maintenance constituent la base de la norme PWA, utilisant le cache Web pour des résultats presque instantanés.

Avant les techniciens de maintenance, le script de cache du navigateur utilisé était Application Cache (ou App Cache). App Cache fonctionne dans une large gamme de services hors ligne d'abord, mais était quelque peu sujet aux erreurs. De plus, App Cache a plusieurs limitations bien connues, comme Une liste à part explique.



Mais le principal problème pour les développeurs est le manque d'interaction directe avec le fonctionnement exact d'AppCache, empêchant les développeurs de résoudre avec précision les problèmes au fur et à mesure qu'ils surviennent. À leur tour, les sites Web et les services dotés de fonctionnalités hors ligne complètes étaient un choix risqué.

Les travailleurs de service, cependant, ne durent que le temps que leur action est requise. Dans une PWA, lorsque vous cliquez sur quelque chose ou utilisez une fonctionnalité, un technicien de maintenance entre en action. Le service worker (rappelez-vous qu'il s'agit d'un script) traite l'événement, décidant si le cache hors ligne peut terminer la demande. L'idée est qu'il existe plusieurs caches hors ligne parmi lesquels la PWA peut choisir, offrant une gamme beaucoup plus large de fonctionnalités hors ligne.

De plus, le cache ne sert pas uniquement à augmenter la vitesse hors ligne. Par exemple, vous vous dirigez vers une PWA, mais votre connexion est extrêmement inégale. Le service worker sert un cache précédent, pleinement fonctionnel, sans interrompre votre expérience.

Prise en charge progressive du navigateur d'applications Web

Il y a deux conditions pour utiliser une Progressive Web App : un navigateur compatible et un service compatible PWA.

Tout d'abord, regardons les navigateurs. Vous avez deux options pour vérifier la prise en charge du navigateur PWA. Le premier est celui de Jake Archibald Le Service Worker est-il prêt ? qui affiche facilement le statut PWA-ready des principaux navigateurs, ainsi que Samsung Internet.

Pour un aperçu plus détaillé de la prise en charge du navigateur PWA, vous devriez consulter Puis-je utiliser , un site Web spécialisé dans la liste de la mise en œuvre de diverses technologies Web et de navigateurs par version de navigateur. Par exemple, si vous saisissez « service workers » dans la barre de recherche, vous trouverez un tableau affichant le numéro de version avec lequel chaque navigateur a implémenté les services workers PWA.

Le tableau Can I Use Service Workers confirme que les principaux navigateurs prennent tous en charge les PWA. Il illustre également les supports PWA pour plusieurs navigateurs de bureau et navigateurs mobiles alternatifs.

Décomposer un peu plus:

  • Navigateur de bureau (support complet) : Chrome, Firefox, Opéra, Edge, Safari
  • Navigateur de bureau (prise en charge partielle/version obsolète) : Navigateur QQ, navigateur Baidu
  • Navigateur mobile (support complet) : Chrome, Firefox, Safari, navigateur UC, Internet Samsung, navigateur Mint, Wechat
  • Navigateur mobile (support partiel/version obsolète) : Navigateur QQ, navigateur Android, Opera Mobile

Ainsi, les principaux navigateurs prennent tous en charge les PWA. Microsoft Edge et Safari sont les ajouts les plus récents à la liste de support complète. Inversement, QQ Browser et Baidu Browser utilisent désormais des versions obsolètes et sont donc passés au deuxième niveau.

Comment trouver et installer une application Web progressive

Maintenant que vous savez quel navigateur utiliser, vous pouvez penser à rechercher et installer une PWA. Pour cet exemple, j'utiliserai un Samsung Galaxy S8 avec Google Chrome.

Les applications Web progressives sont partout. De nombreuses entreprises ont adapté leurs sites et services pour proposer une version Progressive Web App. Dans de nombreux cas, vous rencontrerez d'abord une PWA lorsque vous vous dirigerez vers la page d'accueil ou le site de service mobile, ce qui déclenche le Ajouter à l'écran d'accueil boite de dialogue.

Regardez la vidéo ci-dessous pour voir ce qui se passe lorsque vous visitez le Site mobile Twitter .

Bien sûr, visiter d'innombrables sites et espérer voir le déclencheur de l'écran d'accueil n'est pas utile. En fait, c'est carrément chronophage. Heureusement, vous n'avez pas à le faire car il existe quelques sites dédiés au catalogage des PWA.

Premier essai outweb . Il répertorie une gamme assez décente de PWA, avec de nouvelles options apparaissant fréquemment. Ensuite, essayez pwa.rocks. Il a une sélection plus petite, mais quelques PWA pratiques que vous voudrez ajouter à votre appareil.

De plus, en janvier 2019, Chrome 72 pour Android a été livré avec Trusted Web Activity (TWA). TWA permet aux onglets Chrome de s'ouvrir en mode autonome. À son tour, cela permet aux PWA de figurer dans la boutique d'applications Google Play. Les premières PWA à apparaître sur Google Play étaient Twitter Lite , Instagram Lite et Google Maps Aller , avec d'autres qui apparaîtront au fil du temps.

Galerie d'images (2 images) Développer Développer proche

Les applications Web progressives remplaceront-elles les applications natives ?

Les Progressive Web Apps sont une excellente étape hybride entre votre navigateur et une application mobile native. Les PWA remplaceront-elles entièrement les applications natives ? C'est un dur non de ma part. Les PWA sont excellentes en tant qu'offre légère, mais étant donné qu'elles se concentrent actuellement principalement sur la réplication de sites et de services existants, elles ne remplaceront pas les applications natives.

Du moins, pas pour le moment.

trouver une chanson à partir d'une vidéo

Les PWA fonctionnent cependant. Les données disponibles sur PWA Stats le confirment également. Voici quelques chiffres intéressants qui illustrent comment les PWA modifient nos interactions avec les sites Web couramment utilisés :

  • Trivago a enregistré une augmentation de 150 % de l'engagement des utilisateurs ajoutant leur PWA à un écran d'accueil.
  • La page d'accueil PWA de Forbes se charge complètement en seulement 0,8 seconde, tandis que les impressions par visite ont augmenté de 10 %. Le PWA de Forbes a également vu la durée des sessions utilisateur doubler.
  • Twitter Lite a vu une augmentation de 65% du nombre de pages par session, avec une augmentation massive de 75% des tweets. Il est également interactif « en moins de 5 secondes en 3G ».
  • Alibaba a enregistré une augmentation de 76% des conversions mobiles.

Les PWA ne sont pas encore mainstream. Mais avec la vaste gamme d'avantages qu'ils offrent, tels que l'économie d'espace sur votre appareil , vous en entendrez davantage à l'avenir.

Partager Partager Tweeter E-mail Guide du débutant pour animer un discours

Animer un discours peut être un défi. Si vous êtes prêt à commencer à ajouter du dialogue à votre projet, nous allons décomposer le processus pour vous.

Lire la suite Rubriques connexes A propos de l'auteur Gavin Phillips(945 articles publiés)

Gavin est l'éditeur junior pour Windows et Technology Explained, un contributeur régulier au podcast Really Useful et un critique de produit régulier. Il possède un BA (Hons) en écriture contemporaine avec des pratiques d'art numérique pillées dans les collines du Devon, ainsi que plus d'une décennie d'expérience en écriture professionnelle. Il aime beaucoup le thé, les jeux de société et le football.

Plus de Gavin Phillips

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !

Cliquez ici pour vous abonner