Les PWA ont la cote en ce moment ! Disponibles depuis maintenant plus de deux ans sur Android, Apple les supporte aujourd'hui partiellement avec sa récente mise à jour 11.3.
Il existe même un site web recensant les success stories des PWA : PWA Stats.
Les highlights ? Une acquisition et un engagement en forte hausse ainsi qu'une amélioration nette de l'expérience utilisateur, autant pour des petites marques que des géants comme Uber ou Lancôme.

Pourquoi développer une PWA en complément de vos applications mobiles ?

Ces PWA viennent enrichir l'expérience des applications mobiles que vous téléchargez sur les stores : leurs avantages et faiblesses ne sont pas les mêmes.
Là où l'acquisition sera plus aisée sur le web avec une PWA, la rétention, elle, est très efficace sur les apps natives.
De plus, l'expérience utilisateur reste beaucoup plus fluide et performante sur une application que sur le Web. Vous pouvez comparer l'application native Facebook et le site web mobile pour vous en faire une idée.

Quelle stratégie pour développer votre PWA ?

L'été 2017, pour triPica, nous avons rendu une partie de leur application accessible sur le Web afin d'augmenter le taux d'acquisition. Quelle stratégie adopter ?

A. Recréer tout de zéro ?

Non, cela prendrait bien trop de temps, au moins autant que de développer l'application native. Et nous aurions eu besoin d'une autre équipe en parallèle de celle de l'application, ce qui augmente les probabilités de problèmes UX et de programmation. Par exemple, la nouvelle équipe aurait dû apprendre le métier complexe de triPica : il aurait fallu recoder toutes les règles métiers.

B. Réutiliser la logique de l'application dans l'appli web ?

C'est mieux, mais nous aurions dû recréer tout le reste, dont le design et la navigation. Cela aurait beaucoup ralenti l'équipe existante, et aurait aussi introduit des problèmes d'UX ou de programmation. Par exemple, le site web pourrait ne pas avoir eu le même comportement que l'application, et lorsque l'on aurait changé le comportement dans le site web ou l'application, il aurait fallu faire le même travail une deuxième fois pour l'autre plate-forme.

C. Réutiliser toute notre base de code ?

Est-ce possible ? Investiguons !

On est donc parti sur l'option C, et avons trouvé plusieurs technologies permettant d'arriver à nos fins, l'une d'elles sortant du lot : React Native for Web.

En 2h30, nous avions un PoC : la page d'accueil de l'application était visible sur le Web !
En 10 jours/hommes, nous couvrions le quart de l'application (de plusieurs mois de développement), ce qui correspondait à la partie acquisition.

En terme d'acquisition, l'app web a permis de doubler le nombre de clients potentiels (la conversion en client étant faite sur l'application native).

Rien n'oblige de se limiter au clone de l'application native:

• on peut personnaliser le rendu en fonction de s'il on est sur le web ou non
• on peut afficher l'application à l'intérieur d'un back-office, afin de voir en temps réel comment rendrait l'écran de l'appli si on change tel paramètre/contenu
• on peut avoir des fonctionnalités spécifiques, ou restreindre les fonctionnalités (cela a toutefois rarement du sens)
• on peut se servir de cette techno pour coder un site web, tout simplement. Cela a beaucoup d'avantages techniques, dont l'accessibilité et l'internationalisation embarquée (je ne vais pas répéter son créateur, voir ci-dessous)

High-quality user interfaces: React Native for Web makes it easy to create fast, adaptive web UIs in JavaScript. It provides native-like interactions, support for multiple input modes (touch, mouse, keyboard), optimized vendor-prefixed styles, built-in support for RTL layout, built-in accessibility, and integrates with React Dev Tools.

Write once, render anywhere: React Native for Web interoperates with existing React DOM components and is compatible with the majority of the React Native API. You can develop new components for native and web without rewriting existing code. React Native for Web can also render to HTML and critical CSS on the server using Node.js.

Aujourd'hui, React Native for Web est utilisé dans au moins 3 projets en cours chez BAM, dont un en production.
Outre des contributions sur le GitHub de React Native for Web, nous avons créé la communauté "React Native for Web Community" dans laquelle vous pourrez retrouver plusieurs implémentations de modules natifs, afin de gagner du temps.

Finissons sur l'avis de Mathieu Horn, CEO de triPica:

React Native for Web c'est deux pour le prix d'un : tu as une appli, et un site web gratuit en bonus !