Une PWA pour votre activité, faut-il y aller ?

Devriez-vous développez une PWA dans votre entreprise ?

Comment prendre votre décision ?

Les PWA sont une nouvelle façon de construire des applications. Elles sont plus rapides à construire et à livrer, fonctionnent sur toutes les plates-formes et coûtent moins cher à développer. Ce qui en fait le moment idéal pour y réfléchir si vous avez un projet d’application.

Si vous êtes un ou une décisionnaire au sein de votre organisation, cet article est pour vous. Le jargon technique y est aussi réduit que possible.

Imaginons cette application potentielle. Quels seraient les canaux de distribution ?

Distribution / installation

Le concept de base d’une application web progressive (PWA) est qu’elle est construite avec des technologies web : HTML, CSS et Javascript. Elles sont exécutées dans un navigateur.

C’est aussi la raison pour laquelle vous pouvez « installer instantanément » une telle application. C’est très léger, comparé à une application native.

Le navigateur fournit déjà l’environnement dans laquelle l’application s’exécutera. Cela signifie que la quantité de code à télécharger par l’utilisateur est très faible (2 à 5 Mo) par rapport à une application native qui doit tout empaqueter (plusieurs centaines de Mo).

Et parce que vous l’exécutez avec un navigateur, elle est naturellement multi-plateforme. Une PWA fonctionnera sur un ordinateur de bureau comme sur un mobile. N’importe quel système d’exploitation avec un navigateur conviendra : Android, Mac OS, iOS, Windows, Linux

Si vous comptez développer une application, comment la mettre entre les mains de votre utilisateur. Quel sera votre canal de distribution ?

Distribution

La distribution peut être aussi simple que de transformer votre site web en PWA et d’offrir à vos visiteurs la possibilité de l’installer.

Votre projet implique une toute nouvelle application ? Au niveau le plus élémentaire, il suffit de fournir un lien à vos utilisateurs.

Vous n’avez pas besoin d’un magasin d’applications pour distribuer une PWA. S’il est important de mettre votre app rapidement sur le marché, ne pas dépendre de la validation d’un app Store pour la distribuer peut faire la différence entre le succès et l’échec.

Je parle d’expérience.
Lorsque vous voulez distribuer un outil à vos employés ou à vos utilisateurs, vous ne voulez pas être dépendant d’une décision prise en dehors de votre organisation. En prime, cela fait de la mise à jour de votre application une opération quasi-transparente : aussi transparente que le fait de pousser quelques modifications sur votre site web.

Néanmoins, vous pouvez souhaiter être référencé dans un magasin d’applications. Quelles sont vos options dans ce cas ?
Eh bien, certains fournisseurs ont embrassé la cause de la PWA et d’autres non. Les principaux acteurs :

  • App Store Windows : soumission automatique via le crawler Bing ou soumission manuelle 1
  • Samsung Galaxy Store : soumission manuelle 2
  • Google Play : publiez votre PWA en tant qu’APK 3 : une application packagée.
    Vous pouvez également utiliser le site PWA builder pour soumettre à Google Play 4
  • Apple store : c’est un non définitif. Apple a tourné le dos aux applications Web et a décidé de ne pas les mettre dans son App Store. Cependant, il existe un moyen un peu plus complexe à mettre en œuvre qui permettrai de contourner cette difficulté

Une autre option à envisager : être référencé dans l’un des magasins spécialisés dans les PWA – c’est une liste de liens vers des PWA. Pour l’instant, c’est une opportunité car ces sites ne sont pas encore surpeuplés. Ces deux sites ci-dessous sont les meilleurs pour le moment :
https://appsco.pe/
https://progressiveapp.store/pwas

Distribution en entreprise :

Et si vous développiez un outil métier pour vos employés ?

Apple vous permet de générer un Web Clip avec le configurateur Apple [#a 5. Vous pouvez ensuite le distribuer par courrier électronique, sur une page web ou en utilisant un serveur de gestion des appareils mobiles.

Sur la plate-forme Windows, vous pouvez déployer une application Web via les stratégies de groupe 5

Sur d’autres plateformes, si vous distribuez une application commerciale au sein de votre entreprise, le moyen le plus simple est d’envoyer un lien avec des instructions par courrier électronique.

Expérience utilisateur

La performance d’abord

À la différence d’une application native, une PWA est légère, rapide et vous n’avez pas besoin de l’installer pour commencer à l’utiliser. Si l’utilisateur choisit de le faire, c’est instantané.

Sachez cependant que si vous créez une PWA à la fois pour desktop et mobile, vous devrez peut-être adapter la mise en page aux deux configurations.

Si votre application est destinée aux consommateurs, l’aspect et la convivialité seront être importants pour votre image de marque. Mais après tout cela revient à ajuster votre HTML et CSS pour créer une bonne expérience utilisateur. Si votre utilisateur a besoin de faire de la saisie de données, le HTML fournit nativement tous les contrôles dont vous pouvez avoir besoin.
En fin de compte, tout dépend du type d’application que vous créez.
Votre utilisateur doit-il exécuter une tâche et en finir le plus rapidement possible, puis fermer et oublier l’application ? Vous pouvez utiliser une PWA. Les PWA sont rapides.
Parmi les cas d’usages pertinents, on peut citer le commerce électronique, les applications financières, les applications de reporting et les outils à destination des travailleurs sur le terrain.

Vous voulez « enchanter » et offrir des « animations de qualité ». Votre objectif est que l’utilisateur passe le plus de temps possible dans votre application ? Vous aurez toujours du mal à reproduire les sensations « natives ».

Aujourd’hui, un grand nombre de cas d’utilisation concernent des tâches. L’utilisatrice moyen ne remarque même pas si ce qui est affiché sur son écran est natif ou non. Tout ce qu’elle veut faire, c’est acheter le produit, faire son rapport et en être débarrassée.

Elle veut une interface claire et utilisable qui lui permet de faire ce dont elle a besoin. De mon point de vue, vous ne devriez pas passer trop de temps à vous tourmenter sur l’organisation parfaite de votre mise en page. Dans ce domaine, la performance l’emportera sur toute autre question.

Parfois, votre application a besoin d’accéder à des fonctionnalités matérielles de bas niveau. Qu’est-ce qu’un navigateur nous fournit ? Beaucoup de choses, en fait.

Accès aux fonctionnalités natives de la plate-forme

C’est là que nous nous trouvons à une frontière :
Android Google, Windows, Samsung et d’autres constructeurs de smartphones font de gros efforts pour donner accès à de nombreuses fonctionnalités de leur plateforme.
De l’autre côté se trouve Apple qui protège jalousement son domaine fermé au nom de la vie privée des utilisateurs.
Cela étant, sur quoi pouvons-nous compter à coup sûr, sur toutes les plateformes ?
Et qu’est-ce qui dépend de la plateforme ?

Ce sur quoi on peut compter avec certitude :

  • Les service worker : c’est la base des PWA (ce qui permet à votre PWA d’être rapide)
  • Stockage local, indexedDB : vous avez à disposition une base de donnée dans laquelle vous pouver enregistrer image, audio, video
  • Accès à la caméra, à l’audio. iOS a finalement corrigé un bug, maintenant vous avez accès à la caméra en mode autonome
  • Géolocalisation. C’est disponible depuis au moins 10 ans. Mais uniquement quand l’application est en cours d’exécution. (pas de géolocalisation lorsque l’application est en arrière-plan)
  • API de paiement. Ce qui veut dire achats dans l’application :)
  • Authentification
  • Utilisation hors ligne

Ce qui dépend des plateformes :

  • Le nom 😒. Pour toutes les plates-formes, on parle de PWA. Sauf pour Apple qui ne veut pas en entendre parler et qui les appelle « Home Screen App ».
  • Installation : Android proposera à l’utilisateur d’installer l’application sur l’écran d’accueil. iOS ne le fera pas. Il existe une solution de contournement avec un composant Web 6
  • Stockage local en mode installé :
    Android partage le même espace de stockage pour l’application installée et l’application du navigateur.
    iOS partage uniquement le service worker enregistré et le stockage du cache. Les cookies, la base de données, le stockage local ne sont partagés. Cela rend l”« installation » plus compliquée si vous devez authentifier votre utilisateur. Mais le bon côté des choses, c’est que l’application installée sur l’écran d’accueil n’est pas liée à la gestion des cookies de Safari et au mode de navigation privé. Les cookies de première partie fonctionneront quel que soit le choix de l’utilisateur.
  • Notification en mode « push », synchronisation en arrière-plan :
    Android, Windows Edge, Opera, Samsung
  • Mise à jour en arrière-plan : Android, Opera, Samsung
  • Accès aux contacts: Android, Samsung, Apple iOS14(derrière un drapeau)
  • Bluetooth, lecture/écriture du système de fichiers : Android, Windows Edge, Opera, Samsung
  • NFC, détecteur de texte et de codes-barres : Android uniquement (avec un drapeau)
    Apple ne prévoit pas de les mettre en œuvre dans un avenir prévisible. La seule exception étant la notification « push » pour Mac uniquement et avec une implémentation propriétaire.

Le site ultime pour vérifier toutes les nouvelles capacités : whatwebcando.today (c’est un PWA, bien sûr :) et https://tomayac.github.io/pwa-feature-detector/

Si vous créez une application pour votre entreprise, il y a de fortes chances que vous gériez un parc d’appareils. C’est le bon moment pour réfléchir aux fonctionnalités que vous souhaitez et vérifier si les appareils supporteront vos besoins pour le projet.

Gardez à l’esprit que puisque vous utilisez un navigateur comme « moteur de programmes », vous avez l’avantage d’être toujours à jour. Même un vieux smartphone fonctionnera avec la dernière version de navigateur. Une différence tout de même pour les iPhone : iOS lie la version de Safari à la version d’iOS.

À titre d’information, mon appareil de développement est un Nexus 4 qui fonctionne sous Android 5.

Mode hors-ligne / Synchronisation

En raison de la technologie des service worker, les PWA sont capable de fonctionner hors ligne, presque par défaut.

Vous voulez en savoir plus sur les service worker ? Voir mon prochain article.

Si votre utilisateur peut faire des choses hors ligne, est-ce qu’il pourra ensuite synchroniser son travail avec les services en ligne, ou avec votre propre back-office ? Bien sûr que oui !

Avec Android/Chrome la synchronisation de déclenche automatiquement en arrière-plan lorsque le smartphone retrouve du réseau.
Un tel mécanisme n’existe pas sur iOS. Une solution possible serait de déclencher une action de synchronisation à chaque fois que votre utilisateur accède à l’application, ou de proposer une action dans l’interface utilisateur pour déclencher manuellement la synchronisation.
C’est ce que j’utilise dans les applications que je développe. Je pense qu’il est important –quelle que soit la plate-forme– de donner à votre utilisateur un moyen de déclencher lui-même une synchronisation quand les données ne doivent pas être perdues.

Performance

Ne perdons pas de vue que les PWA sont performantes et doivent le rester.
C’est un concept à toujours avoir en tête : moins l’application a de code à télécharger, à analyser et à exécuter, plus elle sera rapide.
Tous les PWA que j’ai créés n’étaient que du HTML, du CSS et du Javascript « vanille » (PAs de framework).

Stack Technologique / framework

Vous n’avez pas vraiment besoin d’un framework. Voir « Performance » ci-dessus.
J’ai lu beaucoup d’articles qui affirment fermement qu’un bon PWA est un SPA. (Application à page unique en fr)

Je voudrais exprimer respectueusement mon désaccord – ainsi que celui d’Alex Russel , avec toute ma force et mon expérience :
You might consider going for an MPA + SW architecture until you’ve confirmed that session depth is very deep (think > 10 clicks on average), otherwise the cost of SPA framework JS may not be paid back in terms of user experience.

Vous pourriez envisager d’opter pour une architecture MPA + SW à moins d’avoir confirmé que la profondeur des sessions est très importante (pensez + de 10 clics en moyenne), sinon le coût d’un framework SPA Javascript pourrait ne pas être amorti en termes d’expérience utilisateur.
-Alex Russel

Un service worker interceptera toutes les navigation du navigateur, ce qui vous donne un routeur gratuit. Il pourra alors servir n’importe quelle page directement à partir de la mémoire cache s’il est correctement configuré.
Pourquoi s’encombrer d’un tas de code inutile alors que tout ce dont vous avez besoin c’est une collection de pages interactives ? Dans la même optique, vous voulez éviter la gestion de l’état de l’application aussi longtemps que possible.

La plupart des cas d’utilisation se résument à « entrer des données, ajouter des médias comme des photos / audio, les stocker pour une utilisation ultérieure et les transmettre au serveur distant ou les synchroniser avec un serveur ».
Il y a très peu de chances que vous construisiez un client de messagerie ou le prochain FB. En limitant la quantité de code, vous réduirez le nombre de bugs, de cas compliqués et de scénarios de test.

Alors, PWA ou pas PWA ?

Pour résumer, vous pouvez envisager de suivre la voie d’une PWA si un ou plusieurs de ces points sont vrais :

  • vous voulez livrer rapidement
  • vous n’avez pas un gros budget à consacrer au développement
  • vous souhaitez contrôler la diffusion de votre application
  • votre application est axée sur les tâches métier ou le e-commerce
  • le multi plate-forme est obligatoire et vos besoins sont assez resserrés
  • vous contrôlez les appareils sur lesquels l’application fonctionnera
Footnotes
  1. 1 Progressive Web Apps in the Microsoft Store
  2. 1 https://medium.com/samsung-internet-dev/introducing-progressive-web-apps-to-samsung-galaxy-store-47ecd317725b
  3. 1 https://developers.google.com/web/android/trusted-web-activity\
  4. 1 https://www.davrous.com/2020/02/07/publishing-your-pwa-in-the-play-store-in-a-couple-of-minutes-using-pwa-builder/
  5. 1 how to use Group Policy to automatically distribute programs to client computers or users
  6. 1 Web Component from the PWABuilder team for an ‘install’ experience