Qu'est-ce que le « navigateur » dans les applications Web progressives ?

Comment le « navigateur » permet d'améliorer progressivement vos applications Web

Qu'est-ce que le « navigateur » dans les applications Web ?

S'il est pris en charge, l'objet global « fenêtre » dans votre application Web permet d'accéder à l'objet « navigateur ». Le « navigateur » contient à la fois potentiellement beaucoup d'informations sur l'application et peut vous donner accès à certains événements auxquels vous abonner. Il vous aide à écrire des applications Web vraiment modernes qui peuvent sembler presque natives.

Une instance du « navigateur » est directement liée à l'agent utilisateur, qui est l'application qui exécute votre application Web - le navigateur.

Comment le « navigateur » peut progressivement améliorer votre application

« Amélioration progressive » signifie que le « navigateur » offre un certain ensemble de fonctionnalités basées sur le navigateur qui héberge l'application. Par exemple, Chrome de Google a toujours mis en œuvre le plus de fonctionnalités, même les plus instables, car Google repousse constamment les limites des applications Web progressives.

Comme vous le verrez dans tous les exemples de la documentation de MDN, vous devez vous assurer que la variable ou la fonction à laquelle vous souhaitez accéder est réellement disponible sur le « navigateur ».

// Just a simple example of how
// to check for availability 
// of features.


function checkNetwork(){
  if("connection" in navigator){
    // Now it's safe to use 'navigator.connection'.
    // 👉 https://developer.mozilla.org/en-US/docs/Web/API/Navigator/connection
  }
  
  // Alternative if you're using:
  // 'navigator?.connection'
}

Quelques informations que le « navigateur » vous permet de consommer dans votre application :

  • nombre de cœurs de processeur
  • informations détaillées sur le réseau
  • état de la batterie de l'appareil qui exécute votre application, par exemple la tablette ou le smartphone
  • lecture et suivi de la géolocalisation actuelle
  • utiliser le menu natif de l'hôte pour partager du contenu
  • contrôler la session média

Vous pouvez réellement voir certaines de ces fonctionnalités en direct et en action sur cette même PWA. Faites simplement défiler jusqu'à la fin de n'importe quelle page, où vous pouvez voir quelques-unes des implémentations de métriques matérielles disponibles, par exemple le nombre de cœurs de processeur.

Travailler avec le « navigateur »

Cet article vise uniquement à vous donner une très brève introduction aux possibilités offertes par le « navigateur » pour les applications Web progressives. MDN a une excellente page de présentation ainsi que des documentations sur chacune des fonctionnalités disponibles.

Pour Chrome de Google, il existe également le « Project Fugu », qui implémente de nouvelles fonctionnalités expérimentales, uniquement disponibles derrière un indicateur de fonctionnalité sur les navigateurs Chromium.