SIO 2 Publication d’une application PWA Firebase 2021/2022

Qu’est-ce qu’une application Progressive Web App ?

Une PWA (Application Web Progressive en français) consiste tout simplement à proposer votre application
web (comme celles développées avec Ionic) sous forme de site web.

Convertir notre application Ionic en PWA

Pour convertir notre application Ionic classique en PWA, nous allons utiliser le package
Angular PWA.

Rappelons au passage que les PWA sont une technologie développée par Google tout
comme Angular, ce qui facilite notre travail.

Vous pouvez entrer la commande Angular suivante pour installer ce package dans votre
application:

Shell
ng add @angular/pwa
Si vous rencontrez des problèmes lors de l’exécution de cette commande, n’oubliez pas
d’installer Angular CLI sur votre ordinateur:
Shell
npm install -g @angular/cli
Une fois ce package @angular/pwa ajouté à notre application Ionic, nous pouvons
générer une première version de notre application.

Entrez la commande suivante pour créer la version PWA locale de votre application Ionic:

Shell
ionic build --oat
Un dossier www/ devrait apparaître dans votre application Ionic si c’est la première fois
que vous générez une version définitive de votre projet.

C’est dans ce répertoire www web que se trouve ainsi tout le code de notre Progressive
Web App Ionic.

C’est également ce dossier www que nous allons héberger dans Firebase Hosting.

Configurer la ligne de commande Firebase (Firebase

CLI)
Firebase propose en effet tout un ensemble d’outils informatiques disponible via la ligne
de commande Firebase CLI.

Antony Santero – Lycée Savary de Mauléon – Utilisation libre 1

 SIO 2 Publication d’une application PWA Firebase 2021/2022

Nous allons ici nous en servir pour déployer (héberger) notre Progressive Web App Ionic
dans le service Firebase Hosting.

Mais pour commencer nous devons installer Firebase CLI dans notre application avec
la commande suivante:

Shell
npm install -g firebase-tools

Une fois le package installé, nous avons accès aux commandes Firebase via “firebase“.

Nous devons ensuite configurer notre application pour l’associer à un projet Firebase en
particulier.

Pour cela entrer la commande suivante:

Shell
firebase init

Votre terminal va ensuite vous poser une série de questions pour bien paramétrer votre
projet.

Choisissez la fonctionnalité que vous souhaitez configurer dans votre application (ici
Firebase Hosting)

Shell
"Which Firebase CLI features do you want to set up for this folder?"
Choisissez "Hosting: Configure and deploy Firebase Hosting sites."
Ensuite choisissez le projet Firebase qui correspond à votre application
(exemple miracle-morning-75ecc):
Shell
"Select a default Firebase project for this directory:"
Choose the project you created on the Firebase website.

Donnez ensuite le nom de projet dossier public qui contiendra le code votre application
PWA (WWW):

Shell
"What do you want to use as your public directory?"
Entrez "www".

Il vous demande ensuite si le fichier principale doit être le fichier index.html (YES):

Shell
"Configure as a single-page app (rewrite all urls to /index.html)?"
Entrez "Yes"

Antony Santero – Lycée Savary de Mauléon – Utilisation libre 2

 SIO 2 Publication d’une application PWA Firebase 2021/2022

Ici notre fichier index.html existe déjà, dites lui de ne pas le recréer (NO):

Shell
"File www/index.html already exists. Overwrite?"
Entrez "No"

La configuration via le terminal est maintenant terminée, le fichier JSON suivant devrait
avoir été créé:

firebase.json

Mettez-le ensuite à jour en lui indiquant les informations suivantes :

JSON
{
"hosting": {
"public": "www",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}

Déployer notre application Ionic PWA dans Firebase

Une fois que votre application est configurée avec Firebase CLI, vous pouvez déployer
votre application avec la commande suivante:

Shell
firebase deploy

Pour chaque mise à jour de votre application Ionic, il vous suffira de reconstruire une
nouvelle version locale de l’application avec la commande:

Shell
ionic build --oat

Antony Santero – Lycée Savary de Mauléon – Utilisation libre 3

 SIO 2 Publication d’une application PWA Firebase 2021/2022

Puis de déployer à nouveau l’application avec la commande “firebase deploy”.

Antony Santero – Lycée Savary de Mauléon – Utilisation libre 4