FIREBASE HOSTING: Hébergez votre application sur Firebase et rendez-la disponible en PWA

Bonjour à tous et bienvenue dans ce tutoriel Firebase Hosting!

Nous allons voir aujourd’hui comment configurer le service d’hébergement de Firebase pour nos applications web Flutter.

Il s’agit de créer une version web de nos applications et de les rendre disponible via un navigateur web.

On parle alors d’une Progressive Web App (PWA) qui permet de partager très rapidement une application.

L’avantage des PWA est d’être vraiment universel (Android, iOS, Mac, Windows) et plus léger au niveau du poids de l’application.

Certaines applications comme Twitter, Facebook ou Pinterest proposent des versions « Lite » de leurs applications sous forme de PWA.

Mais le plus intéressant reste de pouvoir contourner les stores d’applications et de publier votre application sans contrainte.

Nous allons voir aujourd’hui comment utiliser le service Firebase Hosting pour créer nos PWA avec Flutter.

Pour cela, nous allons suivre les étapes suivantes:

1. Créer une application Web avec Flutter
2. Configurer Firebase Hosting
3. Optimiser votre PWA

1. Créer une application Web avec Flutter

On commence avec la création de la version web de notre application Flutter, qui est possible sans passer par Firebase.

En fait, le service Firebase Hosting nous permettra simplement d’héberger notre code source gratuitement dans le Cloud.

On pourra alors accéder à notre application depuis une URL Firebase, par exemple https://flutter-ebd9c.web.app/

Sur iOS par exemple, vous pourrez ajouter cette application web sur votre écran d’accueil:

Depuis les dernières versions de Flutter, il est possible de créer et surtout tester la version web de nos applications très rapidement.

Dans les différentes devices accessible, on retrouve maintenant « Chrome » pour la version web de notre application:

Vous retrouverez cette option en utilisant Visual Studio Code avec l’extension Flutter.

Le problème souvent, avec cette version Chrome classique de test de notre application web, se situe au niveau du rendu de ntore application.

On peut notamment rencontrer des problèmes avec les widgets images qui n’autorisent pas certaines adresses.

Pour contourner facilement ces problèmes, lancez votre application web avec la commande suivante:

flutter run -d chrome --web-renderer html

Vous lancez votre application avec la commande « flutter run » en précisant la device « chrome » en ajoutant le paramètre –web-renderer.

Vous pouvez également reprendre ces paramètres lors de la construction d’une version web avec la commande « build« :

flutter build web --web-renderer html

C’est notamment cette commande que nous allons utiliser pour exporter notre application Flutter dans le cloud Firebase.

2. Configurer Firebase Hosting

On passe maintenant à la configuration de Firebase Hosting dans notre application Flutter.

Le service Hosting fait partie de la suite d’outil Firebase CLI accessible en installant le package NPM firebase-tools: https://www.npmjs.com/package/firebase-tools

En exportant notre application dans le Cloud de Firebase, vous pourrez installer votre application depuis Android comme ceci:

Si ce n’est pas fait, connectez à votre compte Google sur le site de Firebase: https://firebase.google.com/

Reprenez alors votre projet Flutter et ouvrez le terminal à son adresse pour entrer la commande suivante:

npm install -g firebase-tools

C’est la commande NPM qui vous permettra d’installer Firebase CLI et d’être capable de configurer différents services de Firebase.

Une fois que Firebase CLI est installé sur votre terminal, vous pouvez vous connecter à votre compte Google avec la commande suivante:

firebase login

Si vous êtes déjà connecté, votre terminal devrait vous afficher l’adresse email du compte associé.

On peut donc continuer en configurant pour de bon notre service Firebase dans notre application Flutter.

Pour cela, on utilise à chaque fois la commande « init » pour sélectionner le service qui nous intéresse:

firebase init

La première chose qui vous sera demandé, sera de choisir le service que vous souhaitez configurer pour votre projet.

Vous aurez le choix entre les services Functions et Hosting par exemple, que nous allons sélectionner:

Le terminal vous proposera ensuite une série de questions, à laquelle vous allez pouvoir répondre pour configurer correctement votre projet.

La première concerne le répertoire de votre application, et de son emplacement dans votre projet Flutter.

Vous devez ainsi indiquer le répertoire « build/web » pour le code source à exporter par la suite:

Ici notre application sera accessible via une seule page HTML et fichier index.html, vous pouvez donc répondre « Yes » à la deuxième question.

Personnellement, je ne connecte pas GitHub pour le déploiement de mon code parallèle, je le fait séparément.

Enfin, comme le fichier index.html, répondez « No » à la dernière question pour ne pas remplacer le fichier existant.

C’est donc terminé pour la configuration de votre projet Flutter avec Firebase Hosting, nous sommes prêts pour le déploiement.

Il existe une commande Firebase pour déployer les différents services dans le Cloud, comme les Clouds Function ou Hosting.

Nous allons préciser dans cette commande que nous ne souhaitons déployer que le service Hosting:

firebase deploy --only hosting

Voilà pour la commande de déploiement de votre application dans le Cloud de Firebase, qui ne devrait prendre que quelques secondes.

Vous retrouverez alors dans la console Firebase l’adresse url de votre application web que vous pourrez ouvrir:

Vous pouvez tester ce lien depuis un navigateur de bureau ou sur mobile également.

L’interface devrait être relativement la même pour Android et iOS, mais de petites différences de polices peuvent apparaître.

3. Optimiser votre PWA

Maintenant que notre application est en ligne, nous allons l’optimiser pour la faire ressembler à une vraie application.

Il s’agit d’optimisations purement esthétiques, comme le changement d’icône et de couleur de la barre de statut.

Pour cela, nous allons travailler depuis les fichiers du dossier « web« , à commencer par le fichier index.html:

web/index.html

Dans ce fichier vous allez pouvoir changer le thème couleur de votre application et lui donner une description:

<meta name="description" content="Crypto Flutter App.">
<meta name="theme-color" content="#000000">

La couleur de votre application sera visible dans la zone de statut de votre navigateur, pour iOS ou Android.

Même pour la version web, et notamment sur Windows et Mac, vous allez pouvoir télécharger votre PWA comme un logiciel.

Votre application aura alors le thème couleur que vous lui avez donné, dans mon cas un thème noir:

On continue avec la création des différentes icônes pour application web Flutter, avec les différentes plateformes à gérer.

C’est notamment sur Android qu’il faudra proposer des icônes spéciales pour s’adapter à toutes les formes.

Je vous invite à utiliser le site Maskable.app pour vérifier le format de votre icône et prévisualiser sur Android: https://maskable.app/editor

Vous pouvez aussi passer par le site https://favicon.io/favicon-converter/ pour générer les images Favicon.

Une fois que vous avez sélectionné le bon format, exportez vos différentes icônes avec les tailles différentes:

Vous devrez proposer plusieurs tailles d’icônes par défaut pour optimiser le rendu sur différentes plateformes.

Il est recommandé de proposer au moins les formats 192×192 et 512×512 pour Android et iOS, ainsi 16×16 pour la favicon.

Ces icônes doivent être déclarés ensuite à différents endroits, tout d’abord dans le fichier index.html:

<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Crypto">
<link rel="apple-touch-icon" href="icons/Icon-192.png">

Vous pouvez par la même occasion modifier le champ « content » avec le nom de votre app et le status-bar-style pour iOS.

Pour iOS, on associe l’icône à la taille 192×192, puis on précise aussi les autres tailles pour les autres plateformes.

On propose la favicon par défaut avec le fichier favicon.ico ainsi que les autres tailles disponibles:

<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="icons/favicon.ico"/>
<link rel="shortcut icon" type="image/x-icon" href="icons/favicon.ico"/>
<link rel="icon" sizes="192x192" href="icons/Icon-192.png">
<link rel="icon" sizes="512x512" href="icons/Icon-512.png">
<link rel="icon" sizes="196x196" href="icons/maskable_icon.png">

Vous devez également déclarer toutes les icônes que vous allez utiliser dans le fichier suivant:

web/manifest.json

C’est dans ce fichier que vous allez déclarer un nombre important d’informations, comme à nouveau préciser le nom et la description du projet.

À nouveau, préciser votre couleur ainsi que le fond qui sera utiliser pour l’application, dans notre cas la couleur noire:

{
    "name": "Crypto",
    "short_name": "Crypto",
    "start_url": ".",
    "display": "standalone",
    "background_color": "#000000",
    "theme_color": "#000000",
    "description": "Crypto Flutter App.",
    "orientation": "portrait-primary",
    "prefer_related_applications": false,

Ces informations serviront notamment pour le lancement des apps sur mobile, avec le splashscreen Android qui s’adaptera par exemple.

Vous pouvez terminer avec la dernière section sur les icônes, où vous pouvez préciser les différentes tailles disponibles:

"icons": [
  {
    "src": "icons/Icon-192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "icons/Icon-512.png",
    "sizes": "512x512",
    "type": "image/png"
  },
  {
    "src": "icons/Icon-maskable-192.png",
    "sizes": "192x192",
    "type": "image/png",
    "purpose": "maskable"
  },
  {
    "src": "icons/Icon-maskable-512.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "maskable"
  }
]

Pour Android, il faut aussi ajouter le champ « purpose » et lui donner la valeur « maskable » pour préciser les icônes à rogner.

C’est cette icône-là que Android va choisir comme icône de lancement pour ses smartphones.

Le dernier élément de design à préciser pour les applications concerne les polices à utiliser dans vos applications.

Vous pouvez les importer depuis le fichier index.html comme pour un projet web classique:

<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

Si vous ne précisez pas de police par défaut, l’application ira chercher la police de l’écosystème est sera donc différente selon les plateformes.

Elle ne sera pas la même pour iOS, Android ou encore Chrome sur PC et Mac.

Vous pouvez donc importer ces polices dans votre fichier index.html pour palier ce problème et travailler avec Google Fonts.