Guide Flutter PWA : Déployez vos Web Apps Rapidement 🚀

Depuis longtemps, je me suis fixé comme défi de lancer des projets d'applications mobiles plus rapidement en réduisant les contraintes qui ralentissent habituellement le processus.

La première contrainte à surmonter était le développement pour plusieurs plateformes en même temps. Flutter a résolu cela en me permettant de travailler sur une seule base de code pour créer des applications qui fonctionnent aussi bien sur iOS qu'Android, réduisant considérablement le temps de développement.

Une fois le développement terminé, la deuxième contrainte qui survient est la publication sur les stores d'Apple et de Google. Ce processus exige l'achat d'une licence, l'envoi de l'application sur leurs serveurs, la préparation des éléments graphiques et des descriptions, puis l'attente d'une validation pour enfin être visible et téléchargeable par les utilisateurs. Même si les processus de vérification et de validation ont été réduits, cela n’empêche pas tout un processus de déploiement pour chaque mise à jour de l’application.

Processus de publication d'une application mobile classique sur les stores

Ces étapes deviennent particulièrement contraignantes lorsqu'on cherche à proposer rapidement une version testable et à itérer efficacement avec nos premiers utilisateurs. En additionnant le temps de développement, de diffusion et tous les facteurs externes liés au lancement comme la communication et le marketing, on voit rapidement s'accumuler les semaines, voire les mois, avant de toucher réellement son public cible.

Pourquoi créer une Progressive Web App (PWA) ?

La réponse se trouve dans les PWA (Progressive Web Apps), une technologie qui existe depuis une bonne dizaine d'années maintenant. Les PWA permettent d'accéder à une application directement depuis un navigateur web, sans passer par les stores. Des entreprises comme Facebook et Google l'ont pourtant largement adoptée. L'objectif est simple : offrir un accès universel aux utilisateurs, quel que soit leur appareil. Une PWA, c’est essentiellement un site web qui ressemble et se comporte comme une application mobile.

Comment fonctionne une Progressive Web App (PWA) comparé à une application native avec Google Maps

Traditionnellement, le développement de PWA nécessitait des compétences en développement web. Les technologies habituellement utilisées étaient React, Angular, ou d’autres frameworks comme Next.js ou Nuxt.js. En tant que spécialiste des plateformes mobiles, je n'avais donc jamais franchi le cap jusqu'à récemment. La constante évolution de Flutter et sa communauté active ont permis la prise en charge complète du web (en plus d'iOS et d'Android) et donc par la même occasion la possibilité de créer des PWA. Ce qui était parfait pour moi qui maîtrise déjà ce framework.

Développeur enthousiaste d'utiliser Flutter pour le web

L'expérience utilisateur avec Flutter Web et PWA

Une PWA ne peut remplacer complètement une application native en termes d'expérience utilisateur. Cependant, une fois installée sur l'écran d'accueil, la barre d'adresse du navigateur disparaît complètement et l'application offre une expérience bien plus immersive que la plupart des utilisateurs ne sauraient distinguer d’une app native.

Comparaison de l'installation et l'expérience d'une application native et d'une PWA Flutter

Flutter Web nous permet de préserver une grande partie de l'expérience visuelle et les animations restent généralement fluides grâce aux widgets Material et Cupertino qui reproduisent fidèlement les designs caractéristiques d’iOS et d’Android.

Démonstration fluide d'une PWA Flutter depuis un navigateur web

L'objectif ici n'est pas d'offrir l'expérience parfaite, mais plutôt d'être disponible rapidement pour un maximum de personnes tout en proposant une expérience suffisamment proche pour satisfaire nos utilisateurs.

Contraintes techniques des PWA Flutter

L'environnement web impose certaines contraintes : le modèle d'exécution via navigateur peut affecter les performances (couche d'abstraction), et l'accès aux fonctionnalités système (caméra, localisation) reste plus limité qu'en natif.

Ces contraintes doivent être prises en compte dès la conception, mais elles ne constituent pas un obstacle insurmontable pour la plupart des cas d'utilisation.

Comment compiler et déployer une PWA Flutter

Le code source Flutter (Dart) est compilé et optimisé vers JavaScript en arrière-plan. Un script initialise ensuite l'environnement d'exécution Dart et charge l'application. Les images, polices et autres ressources sont optimisées et empaquetées pour être chargées efficacement dans le navigateur.

Tout cela se déroule en coulisses. Le développeur peut donc se concentrer sur le code qu'il maîtrise déjà ! Ensuite, pour rendre son application disponible, le déploiement se fait de manière incroyablement simple :

1. Renseigner le fichier manifest.json

json53 lines
Copy
1{
2    "name": "LOVT",
3    "short_name": "LOVT",
4    "start_url": ".",
5    "display": "standalone",
6    "background_color": "#0175C2",
7    "theme_color": "#0175C2",
8    "description": "LOVT is the new app to find a job dedicated for youngs",
9    "orientation": "portrait-primary",
10    "prefer_related_applications": true,
11    "icons": [
12        {
13            "src": "icons/Icon-192.png",
14            "sizes": "192x192",
15            "type": "image/png",
16            "purpose": "any"
17        },
18        {
19            "src": "icons/Icon-512.png",
20            "sizes": "512x512",
21            "type": "image/png",
22            "purpose": "any"
23        },
24        {
25            "src": "icons/Icon-maskable-192.png",
26            "sizes": "192x192",
27            "type": "image/png",
28            "purpose": "maskable"
29        },
30        {
31            "src": "icons/Icon-maskable-512.png",
32            "sizes": "512x512",
33            "type": "image/png",
34            "purpose": "maskable"
35        }
36    ],
37    "screenshots": [
38        {
39            "src": "/images/narrow.png",
40            "type": "image/png",
41            "sizes": "400x780",
42            "form_factor": "narrow",
43            "label": "Application"
44        },
45        {
46            "src": "/images/wide.png",
47            "type": "image/png",
48            "sizes": "400x375",
49            "form_factor": "wide",
50            "label": "Application"
51        }
52    ]
53}

2. Générer les fichiers web

bash1 lines
Copy
1flutter build web --release --web-renderer html

3. Configurer le déploiement (Firebase Hosting)

json28 lines
Copy
1{
2  "hosting": {
3    "public": "build/web",
4    "site": "lovt",
5    "ignore": [
6      "firebase.json",
7      "**/.*",
8      "**/node_modules/**"
9    ],
10    "rewrites": [
11      {
12        "source": "**",
13        "destination": "/index.html"
14      }
15    ],
16    "headers": [
17      {
18        "source": "**",
19        "headers": [
20          {
21            "key": "Cache-Control",
22            "value": "no-cache, no-store, must-revalidate"
23          }
24        ]
25      }
26    ]
27  }
28}

4. Déployer

bash1 lines
Copy
1firebase deploy

Installation pratique d'une PWA Flutter sur l'écran d'accueil d'un smartphone Android

Pas de soumission aux stores, pas d'attente d'approbation. Pour les mises à jour, c’est encore plus simple : il suffit de redéployer les fichiers, et les utilisateurs auront la nouvelle version à leur prochaine visite (ou au prochain rafraîchissement de la page).

Déploiement d'une PWA Flutter sur Firebase Hosting

Avantages et Inconvénients des PWA Flutter

L'approche PWA avec Flutter m'a permis de lancer l'application LOVT en un temps record (quelques semaines). Cette rapidité nous a offert un avantage stratégique : tester notre concept sur le marché réel sans investissement massif.

Après plusieurs semaines d'utilisation en conditions réelles, voici une analyse détaillée :

Avantages

• Cycle de déploiement ultra-rapide : Mises à jour en quelques minutes (ex: correction d'un bug d'inscription en 2h).
• Économies financières : Pas de frais de licence ($99/an Apple) et économie de ressources sur la préparation des soumissions. Cette légèreté se prolonge au niveau de l’infrastructure : grâce à notre architecture basée sur Firebase, nous n’avons, jusqu’à aujourd’hui, supporté aucun coût d’hébergement ou de maintenance, optimisant ainsi notre budget de développement et d’exploitation.

Steve Jobs annonçant zéro coût d'hébergement avec Firebase et PWA

• Distribution simplifiée : Partage via URL/QR code très efficace.
• Accessibilité universelle : iOS et Android sans distinction.

Inconvénients

• Absence des stores officiels : Dans un contexte de bouche-à-oreille, nous avons constaté que de nouveaux utilisateurs cherchaient naturellement l’application sur l'App Store ou le Play Store avant de réaliser qu’elle n’était accessible que via le web. Cette situation a occasionné parfois une légère confusion. Nous estimons que cette absence des plateformes de distribution officielles représente une perte d’acquisition organique d’environ 15% par rapport à une application traditionnelle.

Utilisateur confus cherchant la PWA Flutter sur l'App Store Apple

• Friction à l'installation : Nos statistiques démontrent que seuls 23% des utilisateurs réguliers ont véritablement « installé » l’application, les autres l’utilisant directement via leur navigateur.
• Limitations techniques : La gestion des permissions s'avère problématique dans certains contextes. Les navigateurs peuvent parfois dysfonctionner selon les actions des utilisateurs, empêchant l'utilisation de certaines fonctionnalités essentielles comme l'appareil photo ou la géolocalisation.

Conclusion : Une alternative qui a fait ses preuves

C'est une excellente voie pour tester rapidement ses idées et affiner son produit avant de migrer éventuellement vers un processus plus traditionnel (natif) une fois le projet mature.