PWA pour vos MVP ? Attention iOS est à la traine

December 31, 2019 -8 min de lecture

Photo by veeterzy on Unsplash

Il peut sembler tentant d’utiliser les PWA pour développer vos applications iOS et Android rapidement n’est-ce pas ? Il est vrai qu’il n’y a rien de plus facile que de créer une PWA à partir de votre application web et ainsi vous permettre de toucher le monde des mobiles, presque comme une application native. Le rêve pour les aficionados des MVP serait-il en passe de se réaliser ? En théorie oui, mais en pratique tout n’est pas tout rose et il vous faudra bien prendre en considération le retard d’Apple en la matière.

Un MVP c’est quoi ?

Un MVP c’est un Minimum Viable Product. En français ça nous donne : produit minimum viable. Pour une fois c’est une traduction littérale qui passe plutôt bien. Encore faut-il savoir ce que l’on met derrière.
Ce principe est à la base de la démarche Lean comme décrite dans The Lean Startup d’Eric Ries. La méthodologie Lean est à opposer à la méthodologie agile.

Il y a fort à parier que vous avez déjà travaillé ou travaillez actuellement dans une équipe agile. Cette méthode est tellement à la mode qu’on la voit fleurir de partout.

Le Lean c’est un état d’esprit un peu différent qui consiste à se focaliser sur la sortie d’un produit minimum viable pour les utilisateurs. Ce MVP doit être proposé au public le plus rapidement possible pour tester la cohérence entre ce que sont prêts à utiliser les utilisateurs et ce qui est développé concrètement. La méthodologie Lean est obsédée par cette idée de perte de temps sur des fonctionnalités inutiles pour les utilisateurs. L’idée étant alors d’écouter les retours des utilisateurs et d’étudier leurs comportements. Ici, le A/B testing est roi. Bref, cela fera le sujet d’un prochain article je ne vais pas m’attarder sur cette comparaison plus longtemps.

Les PWA, meilleures amies des MVP ?

Pouvoir servir tous les utilisateurs avec un seul et même code source est un rêve qu’a pour but de réaliser les PWA. Comme vous avez pu le voir dans mon précédent article, cette idée ne plait clairement pas à tout le monde. Réaliser des MVP deviendrait alors encore plus facile qu’auparavant. C’est le rêve de tous les adeptes de la méthode Lean. Rêve qui peut être une réalité sur Android, mais pas encore sur iOS malheureusement.

Android : le maitre étalon des PWA

Tout ce qu’il est aujourd’hui possible de faire avec des PWA est possible sur Android. Pour la majorité des applications, la frontière entre applications natives et PWA est ténue. Voici quelques-unes des fonctionnalités clés qui sont souvent à la base de toute application utilisable sur un smartphone.

notifications push
fonctionnement en fond quand votre application est inactive
installation sur l’appareil
utilisation hors ligne
utilisation des composants natifs

PWA sur iOS : la situation se complique

Les PWA sur iOS, surtout pas sur l’App Store !

Le terme de PWA n’est pas reconnu par Apple. Il apparait clairement que ce nom ne convient pas à la firme à la pomme. Dans une mise à jour du 6 septembre 2019 (https://developer.apple.com/news/?id=09062019b), Apple a rappelé et réaffirmé haut et fort que les HTML5 Apps (oui c’est le nom des PWA chez Apple … 🤮) ne devaient en aucun cas être publiées sur l’App Store et que toute application qui le serait actuellement, dispose au grand maximum jusqu’au 3 mars 2020 pour se mettre en conformité. Passé ce délai que va-t-il se passer ? Il y a fort à parier que l’application sera supprimée sans autre forme de procès. Ou pas … Seul l’avenir nous le dira.

La question qui se pose est … Pourquoi ? Simplement parce que les applications de l’App Store doivent impérativement contenir tout, ou la grande majorité du code exécutable dans leur package. En effet, lorsque vous avez une PWA, votre code ne provient pas d’un bundle quelconque, mais est téléchargé depuis un serveur web et est mis en cache localement par des Service Workers.

Pour résumer tout ça, les PWA / HTML5 Apps doivent donc être exclusivement proposées via Safari sur iOS, c’est aussi simple que ça.

Les fonctionnalités des PWA sur iOS : de vrai progrès

Il faut bien avouer qu’Apple a fait de sérieux progrès dans le domaine des PWA depuis quelques années. Cela continue dans le bon sens avec iOS 13. D’ailleurs, vous voulez voir quelque chose d’assez significatif ? Apple s’essaye aux PWA avec le site de feedback pour développeurs : https://feedbackassistant.apple.com/ . Voici leur fichier manifest.json :

{
  "short_name": "Feedback",
  "name": "Feedback Assistant",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Si vous êtes un utilisateur de create-react-app vous remarquerez très certainement une forte ressemblance avec le modèle de base et c’est bien normal était donné qu’Apple a utilisé create-react-app pour réaliser cette application web. Seul le titre de l’application a été changé et vous constaterez avec stupeur que l’icône n’apparait pas une fois installée sur votre appareil … N’est-ce pas merveilleux ? Quelle meilleure façon pour Apple de dire haut et fort : « rien à foutre de vos PWA pourries » 😂.

Bref, revenons-en à nos moutons. Commençons par ce qui va avant de s’attaquer à ce qui ne va pas.

Image de l’app dans la liste des applications ouvertes ? ✅. iOs prend maintenant un screenshot de votre PWA pour l’afficher. Joie, vous n’aurez plus cet infâme rectangle blanc …
Swipe gauche et droit naviguer dans votre PWA ? ✅. Voilà une bonne chose, les PWA sur iOS utilisent le swipe pour naviguer en avant et en arrière.
Redémarrage à zéro de votre PWA ? ✅ C’est possible ! Jusqu’à maintenant vous n’aviez aucun moyen de relancer votre application depuis zéro. Que votre utilisateur ferme complètement son application ou non, cette dernière redémarrait toujours là où elle en était restée avant sa fermeture.
Utilisation des capteurs de mouvement et d’orientation ? ✅ Sur Safari vous devez demander l’autorisation au système, votre utilisateur devra alors l’autoriser via la boite de dialogue habituelle. Cette demande d’autorisation n’est pas encore nécessaire sur votre PWA installée, mais cela semble être pour bientôt.
Pointer Events ? ✅ Pratique pour distinguer le type d’interaction tactile. C’est principalement utile sur iPad ou l’utilisateur peut utiliser son doigt, son Pencil, ou sa souris !
Thème light / dark ? ✅ Et oui, le changement se fait même automatiquement. N’attendez plus pour succomber à la mode des thèmes sombre ! Vous pouvez tester avec la PWA de mon blog pour voir ce que cela donne à l’usage.
Apple Pay ? ✅ Si votre PWA est en mode standalone et installée sur l’écran d’accueil de votre utilisateur, vous aurez maintenant la possibilité d’utiliser Apple Pay.
Sign-In avec Apple ? ✅ Le fonctionnement est assez similaire à celui des connexions oauth de Facebook et Google.
Split View sur iPadOS ? ✅ Pratique pour les amateurs du split view pour booster leur productivité en évitant les aller-retour.
Recherche iOS de votre PWA comme une application native ? ✅, mais quand même un peu ⛔. Votre PWA apparaitra bel et bien comme une application, mais lorsque votre utilisateur touchera son écran pour y aller, qu’elle ne sera pas sa surprise en voyant Safari s’ouvrir comme pour un simple site internet …

PWA sur iOS, subsistent quelques points de blocage

Avant de dire adieu au développement natif ou à React Native / Flutter, gardez bien à l’esprit les points suivants qui vous poseront assurément des problèmes à un moment ou à un autre si vous comptez avoir une PWA aussi fonctionnelle qu’une app native.

Accéder à la caméra sur iOS ? ⛔ Ce fut une réalité bien éphémère de la beta 1 d’iOS 13 … Suite à un bug critique, cette fonctionnalité pourtant toute nouvelle a été supprimée par l’équipe de WebKit (qui propulse Safari). Ne comptez donc pas faire usage de la caméra sur iOS. (Lien pour le suivi du bug sur WebKit https://bugs.webkit.org/show_bug.cgi?id=185448#c17)
Envoyer des notifications push sur iOS ? ⛔ N’espérez pas pouvoir envoyer la moindre notification push à votre utilisateur.
Utilisation des capteurs biométriques ? ⛔ Il n’est pour l’instant pas possible de tirer parti d’une authentification via TouchID ou FaceID. Mais c’est pour très bientôt ! Cette fonctionnalité peut être activée sur Safari en allant dans les réglages : Safari > Advanced > Experimental Features. Si vous voulez en savoir plus sur cette API : https://www.caniuse.com/#search=webauth
diffuser de l’audio quand l’app est inactive ? ⛔ Même si depuis iOS 13 votre PWA peut exécuter du code en fond, aucun contenu audio ne pourra être diffusé.
Capacité de stockage en mémoire « sans limite » ? ⛔ Il faudra bien faire attention à développer une application suffisamment compact car la limite de taille du cache est de 50Mo.
Gestion unifiée du cache ? ⛔ le cache de votre PWA une fois installée sur votre écran d’accueil et celle de la version Safari dispose d’un cache totalement différent. Ce qui peut entrainer une piètre UX si vous redemandez à votre utilisateur de se connecter une nouvelle fois à votre application installée.

Le mot de la fin

Comme vous avez pu le constater, vous pouvez tout de même faire beaucoup de choses avec vos PWA sur iOS13. Quant à savoir si cela peut vous suffire pour réaliser des MVP ou une application client aux petits oignons cela dépendra de vos besoins. N’oubliez pas non plus que nombre d’utilisateurs ne mettent pas à jour leur système, pour le plus grand désespoir des développeurs. Vérifiez donc avec soin ce qui est utilisable en fonction des versions d’iOS de vos utilisateurs …

Le principe des PWA est de fournir des fonctionnalités en mode dégradé en fonction de ce qui est supporté par la plateforme qu’il utilise. Ce qui est très pratique, mais si vous souhaitez que tous vos utilisateurs disposent d’une UX identique, il faudra passer par la case développement mobile spécifique.

Dans tous les cas, dites-vous que le développement mobile n’a jamais été aussi “facile”. Que ce soit avec Swift / SwiftUI et Kotlin / Android Jetpack ou avec React Native / Flutter ; vous avez de quoi vous amuser et proposer des expérience innovantes à vos utilisateurs quelle que soit la technologie utilisée.

Toujours est-il, comme j’ai pu l’évoquer dans mes précédents articles la création d’une PWA à partir de votre application web ne vous demandera pas de si gros efforts alors il serait bête de vous en priver. L’expérience de vos utilisateurs n’en sera que meilleure.

Tiens d’ailleurs me vient une question … Comment implémenter facilement une PWA ? 🧐 Cela fera l’objet de mon prochain article alors … à très vite !

C’est tout … pour le moment !