Bonjour à tous! Dans ce tutoriel Ionic PWA, nous allons voir comment créer une application Ionic au format PWA et la déployer dans Firebase.
Concrètement, nous allons reprendre la documentation d’Ionic de création d’une PWA: https://ionicframework.com/docs/angular/pwa
Nous allons également déployer et donc héberger notre application Ionic PWA avec le service Hosting de Firebase: https://firebase.google.com/docs/hosting
Pour suivre ce tutoriel Ionic PWA, nous allons suivre les étapes suivantes:
- Qu’est-ce qu’une PWA (Progressive Web App)
- Convertir notre application Ionic en PWA
- Configurer la ligne de commande Firebase Tools
- Déployer notre application Ionic PWA dans Firebase Hosting
Qu’est-ce qu’une application Ionic PWA (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.
Par exemple j’ai développé mon application Miracle Morning sur iOS et Android en utilisant Ionic et Angular.
Mon application multiplateforme est donc une application dite WEB, et donc je peux proposer une version sur site web classique.
L’interface sur un navigateur d’ordinateur va être différente que sur un format mobile, mais l’application peut tout à fait être utilisé.
L’intérêt de proposer une PWA est de proposer votre application très rapidement à vos utilisateurs.
En plus vous n’êtes pas contraint aux règles des App Store comme celui d’Apple qui a refusé mon application Driss AS.
Grâce au PWA, je peux proposer mon application Driss AS aux utilisateurs iOS vient leur navigateur mobile.
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 entrez la commande Angular suivante pour installer ce package dans votre application:
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:
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:
ionic build --prod
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.
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:
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:
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)
"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):
"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):
"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):
"Configure as a single-page app (rewrite all urls to /index.html)?" Entrez "Yes"
Ici notre fichier index.html existe déjà, dites lui de ne pas le recréer (NO):
"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:
{
"hosting": {
"public": "www",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "/build/app/**",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=31536000"
}
]
},
{
"source": "ngsw-worker.js",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache"
}
]
}
]
}
}Je vous laisse en complément la documentation du fichier Firebase JSON pour configurer les paramètres de notre PWA: https://firebase.google.com/docs/hosting/full-config#section-firebase-json
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:
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:
ionic build --prod
Puis de déployer à nouveau l’application avec la commande « firebase deploy ».