Cet article a été publié initialement en 2012, à une époque où HTML5 était encore présenté comme une nouvelle génération du langage HTML et où de nombreux frameworks cherchaient à rapprocher applications web et applications mobiles natives.
Depuis, les technologies et les usages ont considérablement évolué. HTML n’est plus développé sous la forme de grandes versions successives : il est aujourd’hui maintenu en continu comme un standard vivant. Les applications web ont elles aussi progressé et coexistent désormais avec les applications natives et les technologies de développement mobile multiplateforme.
Du web mobile aux applications web modernes
Les premières générations de téléphones capables d’accéder à Internet utilisaient des technologies spécifiquement adaptées aux capacités limitées des terminaux de l’époque, notamment le WAP.
L’arrivée des smartphones, des navigateurs mobiles modernes et d’écrans tactiles plus performants a progressivement rapproché le web mobile du web utilisé sur ordinateur.
HTML, CSS et JavaScript permettent désormais de concevoir des interfaces capables de fonctionner sur une grande variété de tailles d’écran et de terminaux.
Le CSS et les media queries jouent notamment un rôle essentiel dans cette adaptation. Ils permettent de modifier la présentation d’une interface selon la largeur et les caractéristiques de l’écran. Cette approche constitue l’un des fondements du responsive web design.
Une même application web peut ainsi être utilisée depuis un ordinateur, une tablette ou un smartphone sans qu’il soit nécessaire de concevoir une interface totalement différente pour chaque appareil.
Application web, PWA, application native ou cross-platform ?
L’une des idées très présentes au début des années 2010 était qu’HTML5 finirait par remplacer les applications mobiles natives.
L’évolution réelle a été différente. Les différentes approches coexistent aujourd’hui car elles ne répondent pas exactement aux mêmes besoins.
Application web
Une application web fonctionne principalement dans un navigateur. Elle peut être accessible depuis différents systèmes d’exploitation à partir d’une même base applicative.
Cette approche facilite notamment le déploiement et les mises à jour, puisque l’utilisateur accède directement à la version mise en ligne.
Progressive Web App (PWA)
Les Progressive Web Apps prolongent les possibilités des applications web.
Selon les fonctionnalités développées et les capacités proposées par le navigateur et le système d’exploitation, une PWA peut notamment :
- être installée sur l’appareil ;
- disposer d’une icône sur l’écran d’accueil ;
- fonctionner partiellement ou totalement hors connexion ;
- stocker certaines données localement ;
- exécuter certaines opérations en arrière-plan ;
- utiliser différentes API proposées par le navigateur.
Les possibilités exactes varient néanmoins selon les appareils, les systèmes d’exploitation et les navigateurs.
Application native
Une application native est développée pour une plateforme particulière, notamment iOS ou Android.
Cette approche permet une intégration poussée avec le système d’exploitation et les fonctions du terminal. Elle reste pertinente lorsqu’un projet nécessite une forte interaction avec le matériel, des performances spécifiques ou une intégration particulièrement étroite à l’écosystème du téléphone.
Application mobile cross-platform
Entre l’application web et le développement entièrement spécifique à chaque système d’exploitation, les technologies cross-platform permettent de concevoir une application destinée à plusieurs plateformes tout en mutualisant une partie importante du développement.
Des technologies comme React Native ou Flutter sont aujourd’hui utilisées pour développer des applications pouvant fonctionner sur iOS et Android.
Le choix entre ces différentes approches dépend donc du projet et non d’une supériorité systématique de l’une sur les autres.
Nous présentons ces possibilités plus en détail dans notre page consacrée aux technologies de développement d’applications mobiles.
Accéder aux fonctionnalités d’un smartphone depuis une application web
L’un des enjeux majeurs évoqués lors de la première publication de cet article concernait l’accès, depuis le navigateur, aux fonctionnalités physiques du téléphone.
Depuis, les API web se sont considérablement enrichies.
Selon le navigateur et les autorisations accordées par l’utilisateur, une application web peut notamment exploiter :
- la géolocalisation ;
- l’appareil photo ou le microphone ;
- le stockage local de données ;
- les notifications ;
- certaines fonctionnalités de partage ;
- le fonctionnement hors connexion grâce aux mécanismes de cache et aux Service Workers.
Pour autant, toutes les fonctions d’un smartphone ne sont pas disponibles de manière identique depuis tous les navigateurs.
C’est l’une des raisons pour lesquelles le choix technologique doit être effectué à partir des fonctionnalités réellement nécessaires au projet.
Les frameworks mobiles HTML5 : un paysage qui a beaucoup changé
Au début des années 2010, de nombreux frameworks cherchaient à simplifier la création d’interfaces mobiles avec HTML, CSS et JavaScript.
La première version de cet article citait notamment jQuery Mobile, Sencha Touch, The-M-Project, jQTouch et PhoneGap.
Ces outils témoignent d’une période importante de l’histoire du développement mobile, mais plusieurs ne constituent plus aujourd’hui des solutions à privilégier pour un nouveau projet.
jQuery Mobile, par exemple, a joué un rôle important dans la démocratisation des interfaces web adaptées aux smartphones. Le projet a depuis été déprécié.
Sencha Touch a lui aussi marqué cette période. Ses fonctionnalités ont ensuite été intégrées à Ext JS et Sencha Touch n’est plus maintenu comme produit autonome.
PhoneGap permettait quant à lui d’encapsuler des technologies web dans une application mobile. Le projet PhoneGap a été arrêté, tandis que son socle open source, Apache Cordova, a poursuivi son évolution.
D’autres outils cités dans l’article original ne sont volontairement plus liés ici lorsque leurs anciens sites ou domaines ne constituent plus des ressources fiables.
HTML5 a-t-il remplacé les applications mobiles natives ?
Non. C’était une hypothèse crédible au début des années 2010, mais l’évolution du marché a montré qu’il n’existait pas une technologie unique capable de répondre idéalement à tous les projets.
Les applications web disposent aujourd’hui de possibilités beaucoup plus importantes qu’en 2012. Les PWA réduisent encore l’écart entre site web et application installée.
Parallèlement, les applications natives restent pertinentes pour certains usages et les frameworks cross-platform ont considérablement évolué.
Le choix dépend principalement :
- des utilisateurs visés ;
- des fonctionnalités attendues ;
- des fonctions matérielles à exploiter ;
- du besoin ou non d’une utilisation hors connexion ;
- des performances recherchées ;
- de la distribution éventuelle via les stores ;
- des systèmes d’exploitation à couvrir ;
- des contraintes de maintenance et d’évolution de l’application.
Choisir la technologie en fonction du projet mobile
Le choix technologique ne devrait donc intervenir qu’après avoir défini les usages.
Une application destinée à des collaborateurs travaillant sur le terrain, un service grand public disponible dans les stores et une application métier consultée occasionnellement depuis un smartphone n’auront pas nécessairement besoin de la même architecture.
La phase de conception doit notamment déterminer les écrans, les parcours utilisateurs, les données nécessaires, les connexions avec le système d’information et les fonctions propres au téléphone qui devront être utilisées.
L’arborescence d’une application mobile fait partie des éléments permettant de structurer cette réflexion en amont du développement.
Idéematic conçoit des applications mobiles sur mesure