CODiLOG, 205 Avenue Georges Clemenceau, 92024 Nanterre
06 99 32 17 37
marketing@codilog.fr

SAP PWA – Les Progressive Web Apps avec SAP

DEVENEZ SAP COMME JAMAIS !

Les Progressive Web Apps (PWA)

Le développement d’applications mobiles natives est très couteux. Dans le contexte de la mobilité SAP, de nombreuses alternatives existent, qu’elles soient basées sur du développement web avec SAP UI5, avec ou sans SAP Cloud Platform ou encore sur d’autres technologies telles que les SAP Mobile Cards. Les PWA représentent une option simple et efficace car elles se basent sur une application web telle que SAP UI5 (ou FIORI) et permet de l’enrichir afin de donner à l’utilisateur une expérience mobile approfondie.

Au travers de cet article, je vais vous présenter plus en détail cette technologie qui reste assez peu connue et encore moins utilisée dans le contexte SAP UI5.

 

Qu’est-ce qu’une Progressive Web App ?

Il s’agit d’une application web, comme une application SAPUI5 ou FIORI, qui va se comporter comme une application mobile ou desktop. En effet, on utilise souvent les PWA pour « simuler » l’effet d’une application mobile mais une PWA se révèle également un formidable outil pour offrir aux utilisateurs l’effet d’une application de bureau. Ainsi la fenêtre dans laquelle sera exécutée l’application sera optimisée en retirant l’ensemble des éléments habituellement présents sur une page de navigateur, tels que la barre d’adresse par exemple.

Les PWA sont un bon compromis pour offrir aux utilisateurs une expérience mobile sans en éprouver les difficultés ou le coût. En effet, avec les PWA, on reste dans le domaine du développement web tout en profitant de quelques avantages mobiles. L’expérience utilisateur est fortement améliorée et il est possible d’apporter des fonctionnalités telles que le support hors ligne, les notifications push ou encore d’accéder à certaines fonctionnalités natives du téléphone.

Un exemple de PWA qui illustre bien ce concept est le site Twitter. Sur PC, vous aurez la possibilité « d’installer » le site. Ceci aura pour effet de vous apporter 1 forme d’application de bureau maximisée pour le site.

Menu chrome

Option du menu dans Chrome

En cliquant sur “Installer Twitter…”, une popup de confirmation sera proposée

Popup d'installation PWA

Popup de demande d’installation de la PWA

Une fois installée, la PWA s’ouvrira en plein écran (cela dépend des options du manifest) permettant une meilleure utilisation de ses contenus.

Fenêtre PWA

PWA ouverte en plein écran

Il en sera de même pour une consultation sur mobile. L’effet est celui d’une application faite pour la mobilité alors qu’il s’agit bel et bien d’une application web. À noter que sur mobile, vous aurez une option appelée « Ajouter à l’écran d’accueil » plutôt qu’ « Installer ».

 

Dans quels cas les utiliser ?

Idéalement, une PWA est à privilégier dès lors que vous offrez à vos utilisateurs une application simple avec principalement du texte à lire mais assez peu d’interaction. Passer ce genre d’application en PWA permettra d’accélérer le chargement initial de l’application et de profiter du contenu même hors ligne car celui-ci aura été téléchargé.

Technologiquement parlant, les PWA sont assez simples à gérer et c’est là sa force principale au regard de ses concurrents que sont principalement les applications hybrides et natives.

Il est à rappeler que ces 3 types d’applications ne sont pas faits pour les mêmes contextes et créer une application native là où une PWA suffirait serait une pure perte de temps et des coûts bien supérieurs.

En résumé, les contextes les plus propices aux PWA sont ceux pour lesquels une version web existe déjà ou doit exister, avec pas ou peu d’interactions avec les utilisateurs (en matière de création de données) et avec des besoins simples et restreints en matière d’usage des capacités du téléphone. En effet, les PWA ne pourront satisfaire vos besoins que s’ils sont accessibles par WEB API ou par ce qu’offre votre navigateur (voir https://caniuse.com/).

 

PWA + SAP UI5 = la recette gagnante

SAP UI5 (ou Open UI5) est un Framework web permettant la création d’application web d’entreprise. Le Framework est dit responsif ce qui signifie qu’il s’adapte à toutes tailles d’écran et permet donc une navigation optimisée sur mobile. Toutefois, avec ce modèle, les options sont limités et en cas de perte de réseau par exemple, l’utilisateur sera bloqué. De même, il est bien plus compliqué de se connecter à un Launchpad via un navigateur qu’à une application mobile déjà déployée sur le téléphone. Les exemple sont nombreux pour illustrer les limites de l’application web, même avec un Framework comme SAP UI5 qui assurer une très bonne expérience utilisateur.

Pour se rapprocher de cette expérience d’application native, les PWA peuvent être utilisées afin d’enrichir vos applications SAP UI5. Bien que souvent présentés comme ayant moins de potentiel que les applications natives, l’utilisation des PWA présente de nombreux avantages.

Compatibilité : La plupart des navigateurs supportent les PWA et les PWA se veulent par définition « responsives », ce qui signifie que leur contenu s’adapte à différentes tailles d’écran.

Connectivité : Bien que nativement disponibles en ligne, les PWA permettent un fonctionnement hors ligne. Les données étant « installées » sur le terminal, elles restent très agréables en connexion lente. Elles cochent donc toutes les cases de connectivités. Que votre connexion soit lente, rapide ou tout simplement absente, vous pourrez utiliser votre PWA.

Toujours à jour : Les PWA sont chargées sur le terminal et exécutées à partir de la version cache de l’application. À ce titre, d’éventuelles mises à jours pourraient ne pas être perçues. Toutefois, il est possible d’alerter les utilisateurs et de les inviter à mettre à jour leur application. Sans entrer dans les détails techniques, les Service Workers offrent en effet une fonction permettant de traiter le cas d’une mise à jour.

Sécurité : Les PWA ne fonctionnent qu’à travers le protocole HTTPS, aussi, l’accès à vos applications sera sécurisé

Simplicité : Bien que ces applications soient considérées comme des applications mobiles, elles ne peuvent être distribuées sur les stores. Ceci peut être vu comme un inconvénient ou un avantage d’ailleurs, le processus de publication étant ce qu’il est. Toutefois, s’agissant d’application web, elles sont accessibles par les moteurs de recherche et leur installation est très simple comme j’ai pu vous le montrer avec le site Twitter. Il est également aisé de partager un lien web, aussi l’aspect viral est très important.

Économique : Les PWA sont simples et rapides à mettre en place. En effet, ils se basent sur des contenus web, comme pour les applications hybrides, et permettent d’offrir le contenu sous forme d’application mobile, avec l’expérience utilisateur correspondante.

Asynchrone : Les contenus qui peuvent être mis en cache doivent être disponibles en asynchrone, ce n’est pas toujours le cas des ressources utilisées et cela peut même s’avérer compliqué dans le cas de l’utilisation de librairies tierces ou Framework qui n’aurait pas cette capacité. Par exemple, l’ODataModel de sapui5 a une dépendance synchrone incompatible  avec les PWA, des solutions existent permettant de palier à cette problématique.

Limitées : Les PWA restent assez limités quant à l’usage des capacités des mobiles comparés aux applications natives par exemple.

 

Comment ca marche?

Archietcture PWA

Architecture PWA

On ne peut présenter les PWA sans entrer un peu dans la technique, mais rassurez-vous cela reste simple. L’idée ici est de présenter les briques techniques nécessaires à la création d’une PWA. Pour ceux qui au contraire souhaitent plus de détails, j’écrirai prochainement un nouvel article avec les détails permettant de créer une PWA à partir d’une application SAP UI5.

Pour créer une PWA, vous aurez besoin de 3 briques principales, je vous passe les détails sur le TLS, vous ayant déjà expliqué que les PWA doivent consommer des ressources HTTPS:

Le manifest

Il s’agit d’un fichier (JSON) permettant de déclarer les ressources à mettre en cache mais aussi d’agir sur le visuel de l’application. Il est en effet possible de décider d’afficher l’application en pleine page ou non. Par ailleurs, les métadonnées de l’application sont également définies dans ce fichier, par exemple, le nom de l’application, son logo etc. Ces informations seront présentées dans le pop-up d’installation mais seront aussi utilisées sur la pastille mobile déployée sur le téléphone.

Le service Worker

Ce composant technique permet de contrôler les interactions entre l’application et le serveur. Il gère à lui seul les principales fonctionnalités qui rendent les PWA aussi intéressantes, telles que la gestion hors ligne, les notifications push ou encore les synchronisations.

Côté fonctionnement, il s’agit d’un fichier JavaScript qui s’exécute en parallèle de votre application pour la gestion des interactions entre l’application et les ressources présente sur le serveur :

Support hors ligne :

Le principe des PWA est de mettre en cache les ressources pour permettre à l’utilisateur une consommation hors ligne par la suite. Seul le contenu dynamique doit être rafraichi régulièrement ce qui limite le trafic d’une part et garde une expérience utilisateur accrue. En effet, un utilisateur ne verra aucune différence entre le contenu servi depuis le cache et celui provenant du serveur. Il est important de rappeler que ces mises à jour de contenu dynamique (ou les requêtes de modification) nécessiteront une connexion.

Notifications :

Les notifications font partie de notre vie et permettent de garder le contact avec les utilisateurs. L’avantage de celle-ci est qu’elles peuvent être envoyées aux utilisateurs même si le navigateur est fermé ou si l’application installée est fermée.

En matière de notification, il est également possible d’alerter l’utilisateur qu’une nouvelle version de sa PWA est disponible.

Synchronisation

Le principe est simple : gérer les échanges avec le serveur, que ce soit en lecture ou écriture. Pour cela, une connexion stable doit être établie, si ce n’est pas le cas, les actions sont mises en attente jusqu’à l’établissement d’une telle connexion.

Le Shell

Pour comprendre le Shell, il convient de considérer toute application comme étant constituée de 2 parties : Le cadre et le contenu. Le Shell représente le cadre de ces applications. Pour construire une PWA, il faut donc bien penser cette ségrégation entre le cadre et le contenu. Le cadre définira l’emplacement du contenu.

Structure du Shell

Structure du Shell

Exemple de Shell PWA Wikipedia

Exemple de Shell PWA Wikipedia

Stratégie de mise en cache

Il convient de choisir une stratégie de mise en cache car selon les besoins de l’application et de ce que vous voulez offrir à vos utilisateurs, la stratégie sera différente.

En effet, la gestion du cache peut être réalisée de différentes manières et il conviendra de choisir la bonne stratégie selon que vous souhaitiez offrir une expérience « offline first » ou non à vos utilisateurs.

networkOnly

networkOnly

  • networkOnly – Avec cette stratégie, vos contenus seront toujours à jour mais au détriment du support hors ligne et de la performance. Il y a peu d’avantages à utiliser cette stratégie
  • cacheOnly– Cette stratégie offre de bonnes performances car l’exécution se fait exclusivement à partir du cache, c’est une des plus courantes offrant un support hors ligne.
  • fastest – Cette stratégie utilise les 2 précédentes et répond avec la version la plus rapidement accessible, le plus souvent, cela revient à la stratégie cacheOnly.
  • networkFirst– Cette stratégie est l’une de mes préférées car elle représente l’option offrant le plus d’options. En effet, le principe est de vérifier si l’utilisateur a du réseau et si tel est le cas, il est possible de vérifier si des mises à jour existent. Sinon, on présentera à l’utilisateur la version en cache.
  • cacheFirst– Cette option est assez similaire à la précédente et présente à peu près les mêmes avantages. Il s’agit de charger l’application depuis le cache et ensuite de vérifier si le réseau est accessible afin de vérifier s’il existe des mises à jour par exemple. Comme vous le constatez, c’est l’inverse du fonctionnement de la stratégie NetworkFirst. Je préfère la précédente car elle permet d’afficher directement un contenu à jour alors que cette dernière option informera l’utilisateur d’une nouvelle version et l’invitera à rafraichir son application pour en profiter.

 

Conclusion

Pour conclure, les PWA couplé à SAP UI5 sont un bon compromis entre application web et application Mobile. Simple et rapide à mettre en place, elles permettent toutefois d’offrir aux utilisateurs des fonctionnalités comme l’installation sur l’écran d’accueil, l’accès hors ligne ou encore les notifications push permettant de donner une vraie expérience mobile aux utilisateurs.

Voici un rappel des avantages de cette solution :

Avantages des PWA

Avantages des PWA