Déployer votre application Ionic en PWA

Une application Web progressive (PWA) est une application Web qui utilise des fonctionnalités Web modernes pour offrir aux utilisateurs une expérience semblable à celle d’une application. Ces applications répondent à certaines exigences, sont déployées sur des serveurs, accessibles via des URL et indexées par les moteurs de recherche.

Transformer votre application Ionic en PWA

Tout d’abord, allez dans src/index.html et trouvez le script ci-dessous commenté qui active le travailleur de service et le dé-commenter :

<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js')
      .then(() => console.log('service worker installed'))
      .catch(err => console.log('Error', err));
  }
</script>

Et c’est tout ce que vous avez à faire avec Ionic!

Réglages supplémentaires

Toujours dans le même fichier src/index.html, si vous ne faites que lancer l’application en tant qu’APP et non en tant qu’application Cordova, n’hésitez pas à commenter l’appel de cordova.js.

<!-- cordova.js required for cordova apps -->
<!--<script src="cordova.js"></script>-->

Le manifeste Web

Ceci est le fichier src/manifest.jon qui permet de dire au navigateur que notre site web mobile peut s’installer comme une application. Voici en détails, les options de ce fichier :

• name : Ionic => Ceci est le nom de notre application.
• short_name :  Ionic => Ceci est notre nom court, utilisé quand il n’y a pas assez d’espace pour le nom. Il est le plus souvent utilisé lorsque l’utilisateur ajoute l’application à l’écran d’accueil.
• start_url : index.html » => C’est l’URL que l’application va ouvrir.
• display :  fullscreen => Définit le mode d’affichage préféré du développeur pour l’application Web. Lorsque vous utilisez fullscreen, toute la zone d’affichage disponible est utilisé, et aucun navigateur est affiché.
• icons vous permet de définir les icônes que votre application utilisera en fonction de la résolution de l’écran. L’icône de plus haute résolution (512 × 512) sera également affichée sur l’écran de démarrage de l’application

"icons": [{
  "src": "assets/imgs/logo.png",
  "sizes": "512x512",
  "type": "image/png"
}]

• background_color : #4e8ef7 => Définit la couleur d’arrière-plan attendue pour l’application Web.
• theme_color : #4e8ef7 => Définit la couleur du thème par défaut pour une application. Cela affectera des choses telles que la couleur de la barre de notification sur Android.

Assurez-vous d’ajouter votre logo préféré à src/assets/img/logo.png. C’est le logo que le PWA affichera lorsque l’utilisateur l’ajoutera à l’écran d’accueil, et il s’affichera sur l’écran de démarrage lorsque l’utilisateur ouvre l’application via l’écran d’accueil ou le tiroir d’application d’Android.

Déploiement de votre application

Tapez la commande suivante :

npm run ionic:build -- --prod

Cela prendra du temps, surtout la première fois que vous l’exécuterez, mais cela en vaut la peine. Une fois qu’il est terminé, vous pouvez télécharger votre répertoire www à n’importe quel service d’hébergement (en https) que vous préférez.