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.
Les Progressive Web Apps sont des applications web qui proposent un site régulier aux utilisateurs mais qui apparaissent comme une application mobile native. Les PWA tentent d'apporter la convivialité d'une application mobile native à l'ensemble des fonctionnalités des navigateurs modernes, en tirant pleinement parti des avancées dans les deux domaines de développement.
Qu'est-ce qui définit alors une PWA ?
Comme vous pouvez le constater, les PWA visent à offrir aux utilisateurs une expérience de site Web complète avec les fonctionnalités simplifiées et la conception d'interface d'une application native.
La clé des applications Web progressives sont les travailleurs du service de 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 n'ont pas besoin d'une page Web ou d'une interaction de l'utilisateur". Vous pouvez utiliser des service workers comme les notifications push et la synchronisation en arrière-plan pour le moment, mais l'avenir immédiat des PWA donne à ces scripts plus de puissance.
En tant que tels, les techniciens de service constituent la base de la norme PWA, utilisant le cache Web pour des résultats presque instantanés.
Avant les techniciens de service, le script de cache du navigateur de référence était Application Cache (ou App Cache). App Cache fonctionne dans une large gamme de services hors ligne, mais était quelque peu sujet aux erreurs. De plus, App Cache présente plusieurs limitations bien connues, comme l'explique A List Apart.
Mais le principal problème pour les développeurs est un 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 des services, cependant, ne durent que tant que leur action est nécessaire. Dans une PWA, lorsque vous cliquez sur quelque chose ou utilisez une fonctionnalité, un service worker entre en action. L'agent de service (rappelez-vous qu'il s'agit d'un script) traite l'événement, en 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 n'est pas seulement destiné aux accélérations de 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, entièrement fonctionnel, sans interrompre votre expérience.
Deux conditions sont requises pour utiliser une application Web progressive :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 Is Service Worker Ready? de Jake Archibald. 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 Can I Use, un site Web spécialisé dans la liste de la mise en œuvre de diverses technologies Web et de navigateur 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 service workers PWA.
Le tableau Can I Use Service Workers confirme que les principaux navigateurs prennent tous en charge les PWA. Il illustre également la prise en charge de PWA pour plusieurs autres navigateurs de bureau et navigateurs mobiles.
Décomposer un peu plus :
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. À l'inverse, QQ Browser et Baidu Browser utilisent désormais des versions obsolètes et, en tant que tels, sont passés au deuxième niveau.
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 une PWA pour la première fois lorsque vous vous dirigerez vers la page d'accueil ou le site mobile du service, ce qui déclenchera l'option Ajouter à l'écran d'accueil. boîte de dialogue.
Regardez la vidéo ci-dessous pour voir ce qui se passe lorsque vous visitez le site mobile de 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.
Tout d'abord, essayez 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 l'App Store de Google Play. Les premières PWA à apparaître sur Google Play étaient Twitter Lite, Instagram Lite et Google Maps Go, et d'autres devraient apparaître au fil du temps.
2 photos
Développer 
Développer 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 non dur 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.
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 :
Les PWA ne sont pas encore grand public. Mais avec la vaste gamme d'avantages qu'ils offrent, tels que l'économie d'espace sur votre appareil, vous en entendrez davantage parler à l'avenir.
