{"id":491,"date":"2019-01-28T10:33:46","date_gmt":"2019-01-28T09:33:46","guid":{"rendered":"http:\/\/lalloue.fr\/blog\/?p=491"},"modified":"2019-01-28T11:22:50","modified_gmt":"2019-01-28T10:22:50","slug":"les-promesses-des-pwa","status":"publish","type":"post","link":"http:\/\/lalloue.fr\/blog\/les-promesses-des-pwa\/","title":{"rendered":"Progressive web apps : Quelles promesses ?"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Elles sont de plus en plus pr\u00e9sentes dans le monde du mobile ET du web, et pourtant on les connait \u00e0 peine, et les utilisateurs n’ont m\u00eame pas connaissance de cette petite r\u00e9volution dans le monde des applications !<\/p>\n\n\n\n

Et pourtant, le terme de “Progressive Web App” existe depuis 2015.
Il d\u00e9crit aujourd’hui les sites internet profitant des nouveaux avantages donn\u00e9s par les navigateurs web, notamment avec l’arriv\u00e9e des services workers et des fichiers manifest.
Mais quels sont concr\u00e8tement les avantages et promesses qu’offre les PWA aujourd’hui ?<\/p>\n\n\n\n\n\n\n\n

Multi-platformes : Gagnez du temps et de l’argent<\/h4>\n\n\n\n

Les PWA peuvent s\u2019ex\u00e9cuter sur n’importe quel appareil et ont la capacit\u00e9 de s’adapter int\u00e9gralement \u00e0 l’\u00e9cran sur lequel elles sont vues. Cette fonctionnalit\u00e9 pr\u00e9sente 2 avantages majeurs :<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Le 1er est que les PWAs ne sont ni plus ni moins que des applications web. L’\u00e9quipe de d\u00e9veloppement choisi sont framework pr\u00e9f\u00e9r\u00e9 (React, Vue.js, Angular, etc…). Les comp\u00e9tences en techno web sont sans doute \u00e0 ce jour les plus faciles \u00e0 trouver sur le march\u00e9 des d\u00e9veloppeurs.
Et inutile de s\u00e9parer son code pour cibler d’un c\u00f4t\u00e9 Android, de l’autre iOS, le web n’est pas timide, il est ouvert \u00e0 toutes les plateformes \ud83d\ude42 On gagne ainsi beaucoup de temps en d\u00e9veloppement compar\u00e9 au d\u00e9veloppement de 2 apps android + iOS (voir Windows pour les aficionados)<\/p>\n\n\n\n

Le 2nd avantage est li\u00e9 au fait que les PWAs s\u2019ex\u00e9cutent au sein d’une application universelle : le navigateur web.
Tous les appareils connect\u00e9s \u00e0 internet poss\u00e8dent aujourd’hui au moins un navigateur : que ce soit un mobile, une tablette, ou un pc. On peut donc ainsi se concentrer sur le d\u00e9veloppement de son unique application en limitant les co\u00fbts au maximum.<\/p>\n\n\n\n

Gardez le contr\u00f4le de son application et de sa distribution<\/h4>\n\n\n\n

Si vous avez d\u00e9j\u00e0 publi\u00e9 une application sur le Google Play store ou l’Apple Store, vous avez tous rencontr\u00e9 cette crainte, au moment de cliquer sur “publier”, d’\u00eatre refus\u00e9 par le store pour une nouvelle obscure raison sortie d’une liste de r\u00e8gle aussi longue qu’imbuvable !<\/p>\n\n\n\n

Les PWAs sont distribu\u00e9es d’une seul fa\u00e7on, via une URL appel\u00e9e par le navigateur.<\/p>\n\n\n\n

De cette fa\u00e7on, vous \u00e9vitez de payer les 99$ annuels d’Apple et les 25$ de Google pour avoir le droit de publier le fruit de votre travail.
Vous ne subissez plus la v\u00e9rification des stores et vous pouvez publier ce que vous voulez en terme de design \/ contenu \/ fonctionnalit\u00e9s …
Et vous ne recevez plus les critiques injustes des utilisateurs n’ayant pas compris comment fonctionnait votre application : adieu le syst\u00e8me de notation !<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Un autre point tr\u00e8s important : les mises \u00e0 jour.
Sur Apple, le store peut mettre entre 3 et 15 jours \u00e0 valider une application (sur Google, c’est assez rapide).
Avec les PWAs, poussez votre modification, et HOP ! c’est d\u00e9j\u00e0 en ligne.
Vous pouvez ainsi \u00eatre beaucoup plus r\u00e9actif pour corriger les bugs ou tout simplement poussez de nouvelles fonctionnalit\u00e9s en r\u00e9ponse aux demandes de vos utilisateurs\/clients.<\/p>\n\n\n\n

Gagnez en visibilit\u00e9<\/h4>\n\n\n\n

Tout le contenu de votre PWA peut \u00eatre index\u00e9 par les moteurs de recherche !
Votre application web poss\u00e8de la m\u00eame visibilit\u00e9 qu’un site web sur Google par exemple, et les m\u00eames techniques de SEO peuvent \u00eatre appliqu\u00e9es \u00e0 votre PWA.<\/p>\n\n\n\n

Comme indiqu\u00e9 auparavant, les PWAs sont accessibles via une URL, simplement, comme un site web. Ce qui signifie que tous les outils marketings sont \u00e0 votre disposition : de l’indexation organique aux liens sponsoris\u00e9s !<\/p>\n\n\n\n

Vous pouvez appara\u00eetre partout ! Une URL de votre application peut se retrouver sur les r\u00e9seaux sociaux, sur d’autres blogs vous r\u00e9f\u00e9ren\u00e7ant, dans une campagne d’emails, “everywhere!”
Et vous diminuez \u00e9galement le temps d’acc\u00e8s \u00e0 votre application : en un clic sur le lien, l’application s’ouvre (plut\u00f4t que d’avoir \u00e0 ouvrir le store, t\u00e9l\u00e9charger l’application, ouvrir l’application, etc…)
Les PWAs sont en g\u00e9n\u00e9ral 3 fois plus visibles que les applications natives, cloisonn\u00e9es aux stores.<\/p>\n\n\n\n

Engagez et retenez votre audience<\/h4>\n\n\n\n

Un des aspects int\u00e9ressants des applications natives est le privil\u00e8ge de pouvoir envoyer des pushs notifications afin d’inciter les utilisateurs \u00e0 revenir utiliser l’application.
Et bien devinez quoi ? c’est aussi possible avec les PWAs !<\/p>\n\n\n\n

Les Progressive web apps utilisent la fonctionnalit\u00e9 de “web push notifications”.
<\/p>\n\n\n\n

Une application web utilisant la fonctionnalit\u00e9 de “web push notification” gagne en moyenne 75% de temps pass\u00e9 dans l’application et un gain de 50% de visites r\u00e9currente.<\/p>Why Build a Progressive Web App? by Udacy<\/a>)
<\/cite><\/blockquote>\n\n\n\n

Info <\/strong>: Malgr\u00e9 la mise \u00e0 jour d’iOS en 11.3, les pushs notifications ne sont toujours pas disponible sur iOS<\/p>\n\n\n\n

Fluide et intuitive : l’exp\u00e9rience d’une r\u00e9elle application<\/h4>\n\n\n\n

Une PWA est avant tout une exp\u00e9rience utilisateur.
Dans la pratique, les Progressive Web Apps imitent la navigation des application native avec l’objectif d’offrir des interactions fluides, comme le ferrait une application du store. Pour obtenir ce rendu, pour un utilisateur r\u00e9curent, les \u00e9l\u00e9ments cl\u00e9s (\u00e9l\u00e9ments statiques) sont ainsi affich\u00e9s imm\u00e9diatement \u00e0 l’\u00e9cran au lancement de l’app , ayant d\u00e9j\u00e0 \u00e9t\u00e9 mis en cache. Il ne reste alors plus qu’a charger le contenu dynamique.<\/p>\n\n\n\n

Accessible et l\u00e9ger<\/h4>\n\n\n\n

Avec les Progressive web apps, vos utilisateurs ont juste besoin d’un click pour acc\u00e9der \u00e0 votre contenu en une seconde sur n’importe quel appareil (mobile, tablette, pc, lunettes AR, t\u00e9l\u00e9 …). Peut importe la taille de l’\u00e9cran, du moment que l’appareil puisse lancer son navigateur.
Les PWAs ne n\u00e9cessitent aucune installation pr\u00e9alable pour \u00eatre vue, faisant sauter la contrainte du t\u00e9l\u00e9chargement obligatoire depuis le store.<\/p>\n\n\n\n

Les utilisateurs peuvent \u00e9galement acc\u00e9der rapidement \u00e0 votre application en installant directement et instantan\u00e9ment l’icone de votre PWA sur son \u00e9cran d\u2019accueil (pour les mobiles \/ tablettes et PCs)<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

La taille des applications web les plus complexes permet \u00e9galement de s’installer sur n’importe quel appareil sans avoir \u00e0 se soucier de l’espace m\u00e9moire disponible. Quand un utilisateur essaie d’acc\u00e9der \u00e0 une page en particulier, seulement les \u00e9l\u00e9ments n\u00e9cessaires \u00e0 l’affichage de la page sont charg\u00e9s, pr\u00e9servant ainsi l’espace de stockage de l’appareil.
Par exemple : une app PWA prends 200 fois moins de place qu’une application native iOS.<\/p>\n\n\n\n

Rapidit\u00e9 : le chargement instantan\u00e9<\/h4>\n\n\n\n

Les PWAs sont capables d\u2019ex\u00e9cuter du code Javascript sans avoir besoin d’\u00eatre affich\u00e9 au premier plan ou sans avoir aucune page web d’ouverte dans le navigateur (via le service worker).
De cette fa\u00e7on, mettre \u00e0 jour de fa\u00e7on r\u00e9guli\u00e8re les donn\u00e9es de l’application est tout \u00e0 fait possible, permettant ainsi \u00e0 l’utilisateur d’avoir toujours les donn\u00e9es \u00e0 jour au moment de lancer son application.
Les performances sont \u00e9galement am\u00e9lior\u00e9es en ajustement le chargement des ressources statiques (mis en cache) et le contenu dynamique (charg\u00e9 en t\u00e2che de fond).<\/p>\n\n\n\n

Le mode Hors-ligne<\/h4>\n\n\n\n

Une fonctionnalit\u00e9 majeure des PWA est la possibilit\u00e9 de s\u2019ex\u00e9cuter sans connexion \u00e0 internet, contrairement \u00e0 un site web standard.
Comment \u00e7a fonctionne ?
La 1\u00e8re fois qu’un utilisateur visite l’application, le syst\u00e8me de cache permet \u00e0 tout ou partie du contenu d’\u00eatre stock\u00e9 localement. Et ainsi, l’utilisateur pourra naviguer dans toutes les pages de l’applications pendant sa prochaine visite, m\u00eame s’il n’a pas de r\u00e9seau.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Comme vous l’aurez compris, les PWA proposent presque toutes les fonctionnalit\u00e9s des applications natives. Et on en est qu’au d\u00e9but du support par les navigateurs web.
On est peut \u00eatre \u00e0 l’aube d’une petite r\u00e9volution au sein des applications mobiles et qui sait…peut \u00eatre \u00e0 la fin des stores \ud83d\ude42
Mais il reste encore quelques limitations \u00e0 ce jour , notamment sur iOS, que je liste dans un autre article : PWA : Quelles contraintes sur iOS ?<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Elles sont de plus en plus pr\u00e9sentes dans le monde du mobile ET du web, et pourtant on les connait \u00e0 peine, et les utilisateurs n’ont m\u00eame pas connaissance de cette petite r\u00e9volution dans le monde des applications ! Et pourtant, le terme de “Progressive Web App” existe depuis 2015.Il d\u00e9crit aujourd’hui les sites internet … <\/p>\n

Continuer la lecture \u00ab\u00a0Progressive web apps : Quelles promesses ?\u00a0\u00bb<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[48,50],"tags":[25,54,60,57,53],"_links":{"self":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/491"}],"collection":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/comments?post=491"}],"version-history":[{"count":11,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/491\/revisions"}],"predecessor-version":[{"id":566,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/491\/revisions\/566"}],"wp:attachment":[{"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/media?parent=491"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/categories?post=491"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/tags?post=491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}