Progressive Web Apps : une approche de Google pour créer des applications web
Avec une expérience d'applications natives

Le , par Michael Guilloux, Chroniqueur Actualités
Quel type d'applications mobiles préférez-vous ?
À quoi pourraient ressembler les applications web de demain ? Si vous vous êtes déjà posé cette question, une réponse possible pourrait se trouver dans un nouveau concept sur lequel la firme de Mountain View travaille depuis un certain temps. Avec un trafic web mobile en pleine croissance, les applications web ciblent de plus en plus les dispositifs mobiles. Mais dans ce domaine, il y a un débat qui est né et qui demeure toujours : que choisir entre une application web et une application native ?

Si le web offre de nombreux avantages, il a certainement beaucoup à envier aux applications natives en ce qui concerne l’expérience utilisateur et bien d’autres fonctionnalités. Commençons par présenter la différence entre une application web mobile et une application native. Une application native est développée spécifiquement pour une plateforme (Android, iOS, etc.), avec un langage spécifique, est installable et est distribuée à partir d’un magasin d’applications. À l’opposé, une application web (Web app) est une application mobile développée avec les technologies du web (HTML, CSS, JS) et qui peut être exécutée sur tous les systèmes mobiles via un simple navigateur.

Ces deux concepts présentent à la fois des avantages et des inconvénients, c’est ce qui justifie leur coexistence. Une application native a de nombreux avantages. Accessible hors connexion, elle offre également une meilleure expérience utilisateur (plus rapide et fluide, mode plein écran, accès aux fonctionnalités du téléphone, notifications Push, etc.). Elle est également mieux référencée à cause des téléchargements sur les plateformes d’applications. Toutefois, le coût de développement est important si le développeur doit encore concevoir une version pour chaque plateforme cible. L’utilisateur doit en plus gérer les mises à jour manuellement à chaque nouvelle version.

Par contre, une Web app a un coût de développement plus faible avec un seul code pour les différentes plateformes et est compatible avec tous les navigateurs. Les mises à jour sont en plus gérées de manière transparente. Le hic, c’est qu’elle n’est pas accessible hors connexion (sauf avec mise cache) et ne peut accéder aux fonctionnalités du téléphone.

Pour essayer de concilier les deux modèles, les applications hybrides sont nées en combinant quelques éléments des applications web et des applications natives, mais Google veut quelque chose de beaucoup plus évolué. Le concept de Mountain View baptisé « Progressive Web Apps » a été présenté lors du récent Chrome Dev Summit 2015. Selon la société, les progressive web apps (PWA) « combinent le meilleur du web et le meilleur des applications ». Elles utilisent les fonctionnalités modernes du web pour offrir une expérience utilisateur de type application.

Les PWA exploitent plusieurs technologies clés et reposent essentiellement sur une combinaison de l’architecture « application shell » et des service workers. Un service worker est un script qui est exécuté dans le navigateur et qui permet de supporter des expériences hors ligne. Les service workers apportent également des gains de performance grâce à une mise en cache hors ligne intelligente et le chargement instantané pour des visites répétées sur votre site ou application web. Ils incluent d’autres fonctionnalités comme les notifications Push avec la capacité d’intercepter et de traiter les requêtes de réseau.

En ce qui concerne l’architecture application shell, il s’agit d’une architecture d’application web moderne qui tire parti d’un service worker pour mettre en cache la « coque » de votre application hors ligne et remplir son contenu en utilisant JS, quand la coque est chargée (comme illustrée dans l’image suivante). La coque (shell en anglais) d’une application fait allusion au code HTML, CSS et JavaScript minimal qui alimente l’interface utilisateur.


Entre autres caractéristiques des progressive web apps, on peut noter qu’elles sont :

  • progressives : elles sont construites avec l'amélioration progressive comme un principe de base et fonctionnent pour chaque utilisateur, quel que soit le choix du navigateur ;
  • responsives : s’adaptent à tout facteur de forme à savoir bureau, mobile, tablette, etc. ;
  • indépendantes de la connectivité : capables de fonctionner hors ligne ou sur les réseaux de faible qualité grâce aux service workers ;
  • toujours à jour grâce aux service workers ;
  • sûres : servies via HTTPS pour prévenir l’espionnage et assurer que le contenu n’a pas été altéré ;
  • elles offrent une expérience avec des interactions de style application et de la navigation ;
  • elles peuvent être partagées facilement via une URL ;
  • elles disposent d’une icône qui peut être affichée sur l’écran d’accueil.

Plus de détails techniques sont disponibles sur la page de Google dédiée aux PWA.

Sources : Page Progressive Web Apps, Instant Loading Web Apps with An Application Shell Architecture

Et vous ?

Sur quel type d'applications mobiles votre choix se porte-t-il : web app, natif ou hybride ? Et pourquoi ?
Que pensez-vous des PWA ? Pourraient-elles concilier les deux mondes d'applications web et native ?
Quels sont les avantages et limites que vous trouvez à ce nouveau concept ?

Voir aussi

Forum Mobiles
Forum général Conception Web


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de scandinave scandinave - Membre actif https://www.developpez.com
le 25/12/2015 à 10:43
Bonjour,
Je ne voit pas bien où est la nouveauté. Le hors ligne, ça fait un baille que ça existe maintenant pour les applis HTML. Certes il faut se donner un peu de mal mais ça fonctionnement plutôt bien. L'approche de Google tel que décrit là n'a rien de révolutionnaire. Au mieux google cherche à standardisé en lui donnant un nom, un ensemble de techniques et procédures qui existent déjà.

  • progressives : elles sont construites avec l'amélioration progressive comme un principe de base et fonctionnent pour chaque utilisateur, quel que soit le choix du navigateur ; // Ça s'appelle du mobile first
  • responsives : s’adaptent à tout facteur de forme à savoir bureau, mobile, tablette, etc. ; // Existe déjà aussi => media query - cf bootstrap par exemple.
  • indépendantes de la connectivité : capables de fonctionner hors ligne ou sur les réseaux de faible qualité grâce aux service workers ; // Ça, c'est nouveau mais pas encore implémenté par les navigateur
  • toujours à jour grâce aux service workers ;
  • sûres : servies via HTTPS pour prévenir l’espionnage et assurer que le contenu n’a pas été altéré ; // Existe aussi
  • elles offrent une expérience avec des interactions de style application et de la navigation ; // MetroUI CSS ou MaterializeCSS par exemple
  • elles peuvent être partagées facilement via une URL ; // Principe d'un site web
  • elles disposent d’une icône qui peut être affichée sur l’écran d’accueil. // On peut déjà le faire, j'ai ai une pour développez sur mon Android phone

Après je ne doute pas des intentions de Google deproposer un pattern de conception simple pour tout les développeurs souhaitant ne réaliser qu'une seule application web pour toutes les plateformes
Avatar de Neckara Neckara - Expert éminent sénior https://www.developpez.com
le 25/12/2015 à 11:05
Bonjour,

Citation Envoyé par scandinave  Voir le message
indépendantes de la connectivité : capables de fonctionner hors ligne ou sur les réseaux de faible qualité grâce aux service workers ; // Ça, c'est nouveau mais pas encore implémenté par les navigateur


J'ai peut-être mal compris, mais n'est-ce pas une fonctionnalité de l'HTML5 ?
Avatar de scandinave scandinave - Membre actif https://www.developpez.com
le 25/12/2015 à 11:08
Pour le Hors ligne oui, je parle des services worker qui contrairement au Shared Worker ne sont pas encore un standard.
Avatar de hotcryx hotcryx - Membre éprouvé https://www.developpez.com
le 25/12/2015 à 14:49
Concernant "l'application cache" j'avais lu quelque-part (pas sur W3School) que cette fonctionnalité pouvait stopper à tout moment par l'installation d'une nouvelle du browser et que par conséquent il ne fallait plus l'employer. Vrai ou faux finalement???
Avatar de DMike92 DMike92 - Nouveau membre du Club https://www.developpez.com
le 08/01/2016 à 0:17
Un nouveau moyen de développer des virus ?
Offres d'emploi IT
Ingénieur php confirmé / senior
ekino / Fullsix Group - Ile de France - Levallois-Perret (92300)
Ingénieur data sénior – plateforme web tv disruptif
Mobiskill - Ile de France - Paris (75000)
Pilote de plateformes de service
HUMANLOG - Provence Alpes Côte d'Azur - Sophia Antipolis

Voir plus d'offres Voir la carte des offres IT
Contacter le responsable de la rubrique Accueil