Introduction

Les Single Page Applications (SPA) sont devenues un standard dans le développement web moderne, grâce à leur réactivité, leur fluidité et leur capacité à offrir une expérience utilisateur engageante. Cependant, dans un environnement technologique où les utilisateurs interagissent avec les applications sur une multitude de plateformes - web, mobile, et desktop - les développeurs sont confrontés à un défi : comment adapter ces applications pour garantir une expérience cohérente, quel que soit l’appareil utilisé ?

C’est là qu’interviennent les outils cross-platform. Ces solutions permettent de créer des applications capables de fonctionner sur plusieurs environnements en exploitant une base de code unique. Cela réduit considérablement les coûts de développement et améliore la maintenabilité. Dans ce chapitre, nous explorerons comment Angular, l’un des frameworks les plus puissants pour les SPA, peut être utilisé avec des outils tels que les Progressive Web Apps (PWA), Capacitor ou Electron pour répondre à ces besoins.

Présentation des outils

Voici une vue d’ensemble des outils proposés :

Progressive Web Apps (PWA) : une solution basée sur le Web pour simuler une application native, légère et rapide à mettre en œuvre.
Capacitor (Ionic) : une plateforme dédiée aux applications mobiles, permettant de cibler Android et iOS avec une base de code unique.
Electron : un framework pour créer des applications desktop fonctionnant sur Windows, macOS et Linux.

Les PWA se concentrent sur la portabilité web. C’est essentiellement un site web enrichi qui utilise un service worker pour gérer le cache et permettre un fonctionnement hors ligne. Lorsqu’un utilisateur "installe" une PWA, il ne fait en réalité qu’ajouter un raccourci vers le site web. L’application s’ouvrira dans une fenêtre du navigateur spéciale, donnant l’illusion d’une application native.

Capacitor et Electron offrent des intégrations plus étroites avec les plateformes natives ; les deux technologies permettent d’obtenir une application native qui encapsule une application web. Pour l’affichage, elles se basent toutes les deux sur l’utilisation de WebView : Electron se base sur Chromium, tandis que Capacitor utilise celle par défaut du mobile de l’utilisateur.

Les applications web progressives

Les Progressive Web Apps (PWA) sont une réponse simple et efficace pour enrichir une SPA Angular et offrir une expérience utilisateur proche de celle des applications natives, sans nécessiter de lourdes modifications du code ou l’utilisation de frameworks supplémentaires.

Elles comportent un fonctionnement hors ligne grâce à la mise en cache, une apparence native avec une installation sur l’écran du matériel et de performances (tant que l’on reste dans le cadre d’un site web classique), en utilisant des optimisations réseau et des chargements asynchrones.

1. Fonctionnement

Créer une PWA revient à enrichir une application web avec :

Un service worker : c’est simplement un script JavaScript qui agit comme un proxy entre l’application et le réseau ; il gère les requêtes pour assurer la disponibilité des ressources, même hors ligne.
Un cache et une stratégie de préchargement : les ressources essentielles (HTML, CSS, JS) sont stockées localement, permettant un chargement rapide et un fonctionnement hors ligne.
Un manifest : c’est un fichier de configuration qui fournit les métadonnées nécessaires pour configurer l’apparence de l’application (nom, icône, etc.) lorsqu’elle est installée.

2. Mise en place...

Capacitor (Ionic)

Historiquement, Ionic était une simple bibliothèque de composants au rendu natif, conçue pour fonctionner dans un ancien outil cross platform : Cordova. Ionic a ensuite évolué en créant Ionic Capacitor, le successeur de Cordova, plus moderne et flexible.

Capacitor s’appuie donc sur le navigateur intégré aux applications natives Android ou iOS. On dispose ainsi de nombreux plugins pour consommer les API du matériel, comme la caméra, le GPS, etc.

La documentation officielle se trouve ici : https://capacitorjs.com/docs/next/.

1. Installation

Pour utiliser Capacitor, il n’est pas nécessaire de passer par les composants ou la ligne de commande Ionic. Vous pouvez directement intégrer Capacitor dans un projet Angular existant, ce qui le rend très flexible pour différents types de projets.

Le processus commence par l’installation des dépendances nécessaires, notamment les SDK Android et iOS, puis le package core :

npm i @capacitor/core 
npm i -D @capacitor/cli

Ensuite, vous ajoutez une base d’application native avec Capacitor. Par exemple, pour iOS, la commande npx cap add ios crée un socle d’application iOS configurable. Ce socle peut être ouvert dans Xcode pour y appliquer des modifications manuelles si besoin, comme ajouter des permissions ou des fonctionnalités spécifiques.

Une fois...

Electron

Comment Electron fonctionne-t-il ? C’est une application scindée en deux processus distincts : d’un côté, le processus principal, responsable de l’application en elle-même (création de fenêtres, menus, calculs complexes, communication avec les API du matériel, etc.) qui exécute du code Node.js. Et d’un autre côté, le processus de rendu, qui fait tourner notre application Angular. Ces deux processus discutent via un système de communication en canaux IPC (InterProcess Communication).

1. Installation et lancement de l’application

Il suffit d’ajouter, via npm, le paquet "electron" ; la documentation officielle recommande l’installation en dépendance de développement, soit : npm install electron --save-dev. Attention, si vous installez Electron globalement sur votre machine, vous risquez d’avoir des incompatibilités de version d’un projet à l’autre. Dans la suite, nous allons utiliser des commandes en partant du principe que l’environnement est stable.

Il n’y a pas d’outil officiel pour générer la configuration de départ, donc on va soit créer le projet manuellement, soit profiter des projets communautaires de boilerplate/template de projet, comme Electron Forge.

Le moyen le plus rapide pour simplement tester reste de le faire manuellement. On peut prendre une application Angular existante, ou bien en gérer une via la ligne...

Projet fil rouge

Pour ce chapitre, nous poursuivons l’évolution de notre projet fil rouge en transformant notre application en une PWA et, pour que ce soit plus crédible, nous ajouterons un mode offline simpliste. Ces améliorations permettront de rendre notre application non seulement installable et accessible comme une application native (ou presque), mais également fonctionnelle même en l’absence de réseau.

Il existe plusieurs approches pour gérer le mode hors ligne dans une application, en fonction des besoins et des contraintes. La solution la plus simple consiste à se concentrer uniquement sur la consultation d’une information/page primordiale. Dans ce cas, seules les informations essentielles sont sauvegardées localement, permettant à l’utilisateur de naviguer dans une version limitée de l’application, ce qui est déjà un bon atout pour les utilisateurs, sans causer une grande complexité d’implémentation.

Si l’on souhaite laisser l’utilisateur modifier des données hors ligne, la synchronisation lors du retour de réseau est un sujet complexe car elle peut engendrer des conflits. Par exemple, les données côté serveur pourraient avoir été modifiées pendant que l’utilisateur était hors ligne. De plus, les modifications effectuées côté client n’ont pas pu passer par les étapes de validation serveur, ce qui peut être dangereux.

Il faudra donc penser à un système clair de synchronisation. Dans notre cas, nous allons opter pour un mécanisme simple : nous enregistrerons le contenu du tableau Kanban localement. Si l’utilisateur passe hors ligne, toute modification sera apportée à la base de données locale, puis, lors du retour en ligne, nous enverrons la liste des tickets afin de mettre à jour l’API. Notez que les tickets créés hors ligne contiendront un identifiant spécial afin de faciliter leur distinction côté serveur.

Cela va se passer en plusieurs étapes clés :

transformation en PWA ;
stockage des données locales ;
détection de la connectivité ;
synchronisation des données lors du retour en ligne.

Pour la première étape...

Conclusion

Ce chapitre a mis en lumière les nombreuses possibilités qu’offrent les outils modernes pour porter une application Angular au-delà du Web, en exploitant des approches cross-platform. Nous avons exploré les Progressive Web Apps (PWA), une solution simple et rapide pour transformer une application web en une expérience immersive et installable. Nous avons également découvert Capacitor et ses plugins natifs, qui permettent de cibler des appareils mobiles avec des fonctionnalités avancées, ainsi qu’Electron, idéal pour créer des applications de bureau. Chaque solution présente ses avantages et ses limites, et le choix dépendra de vos besoins et des spécificités de votre projet.

Cette capacité d’adapter une seule base de code à différentes plateformes témoigne de l’évolution constante des applications web et de leur convergence avec les applications natives. Grâce à ces outils, les développeurs peuvent élargir la portée de leurs projets tout en exploitant leurs compétences en technologies web.

Lors de l’exercice pratique, nous avons transformé notre application en une Progressive Web App (PWA), ajoutant ainsi des fonctionnalités modernes telles que l’installation sur le bureau et une consultation hors ligne. Nous avons également...

Outils de cross-platform