Fonctionnalités

Les progressive web apps peuvent faire plus que simplement afficher le contenu à l'écran ou se connecter à des services Web. Les PWA peuvent traiter les fichiers du système de fichiers, interagir avec le presse-papiers du système, accéder au matériel connecté à l'appareil, etc. Toutes les API Web sont disponibles pour votre PWA, et des API supplémentaires sont disponibles lorsque votre application est installée.

Consultez la page What Web Can Do Today (Ce que le Web peut faire aujourd'hui) pour découvrir ce qu'il est possible de faire sur chaque plate-forme. Pour les API ou les fonctionnalités individuelles, vous pouvez consulter la page Can I Use ou les tableaux de compatibilité des navigateurs sur la page MDN.

Toujours vérifier la compatibilité des fonctionnalités

La première lettre d'une PWA signifie "progressive". Elle vient du concept d'amélioration progressive et de détection de caractéristiques. Ne vous attendez pas à ce que votre application fonctionne de la même manière sur tous les appareils. La diversité des contextes et des capacités sur des milliards d'appareils dans différents pays fait des PWA une excellente plate-forme, grâce à leur progression.

Cela signifie que vous devez développer votre application dans des couches qui ne sont peut-être pas disponibles sur tous les appareils et vérifier sa disponibilité avant de l'utiliser.

Vous devez vérifier avec JavaScript si une API existe avant de l'utiliser ou demander à une API si un service est disponible sur cet appareil.

Un Web puissant

Aujourd'hui, le Web est super puissant. Exemple :

  • Vous pouvez créer une application de chat vidéo hyperlocalisée avec WebRTC, géolocalisation et messages push.
  • Vous pouvez rendre une application installable.
  • Vous pouvez ajouter des effets vidéo avec WebAssembly.
  • Vous pouvez même l'intégrer en réalité virtuelle avec WebGL et WebXR.

Optimiser votre PWA

Répartissons les API de capacités PWA en quatre groupes:

  • Vert: API disponibles sur tous les navigateurs et sur toutes les plates-formes, dans la mesure du possible La plupart d'entre eux ont été expédiés depuis de nombreuses années. Ils sont considérés comme matures et vous pouvez les utiliser en toute confiance. L'API de géolocalisation est un exemple de ce groupe.
  • Vert clair: les API ne sont disponibles que sur certains navigateurs. Étant donné que certaines plates-formes n'étaient pas compatibles, elles se sont développées dans le sous-groupe de navigateurs compatibles, ce qui vous permet d'utiliser cette fonctionnalité en toute confiance. WebUSB est un exemple d'API de ce groupe.
  • Jaune: API expérimentales. Ces API ne sont pas encore matures. Elles ne sont disponibles que dans certains navigateurs et dans le cadre de tests ou d'essais. Nous avons abordé quelques-unes de ces fonctionnalités dans la section expérimentale.
  • Rouge: groupe des API que vous ne pouvez pas utiliser dans une PWA et pour lesquelles il est encore prévu de les ajouter à long terme Le géorepérage est un exemple d'API de ce groupe.

Fonctionnalités écologiques

Vous trouverez ci-dessous la liste des fonctionnalités les plus importantes que vous pouvez utiliser dans votre PWA.

Principes de base

  • Mettre des fichiers en cache localement à l'aide de l'API Cache, comme indiqué dans le chapitre Mise en cache.
  • Exécuter des tâches dans des threads à l'aide de workers Web, comme nous l'avons vu dans le chapitre Gestion de la complexité
  • Gérer des requêtes réseau avec différentes stratégies chez un service worker, comme indiqué dans le chapitre Service workers
  • 2D Canvas, pour afficher des graphismes 2D à l'écran à l'aide de l'API Canvas
  • Canvas hautes performances 2D et 3D (ou WebGL) pour afficher les graphismes 3D.
  • WebAssembly, ou WASM, pour exécuter du code compilé de bas niveau afin d'améliorer les performances.
  • Communication en temps réel, à l'aide de l'API WebRTC
  • API Web Performance pour mesurer les performances de votre site et offrir une meilleure expérience utilisateur. Pour en savoir plus, consultez le guide de l'API Performance.
  • Stockez les données localement avec IndexedDB et la gestion du stockage pour interroger les quotas et demander un stockage persistant, comme indiqué dans la section Données hors connexion.
  • Audio de faible niveau grâce à l'API Web Audio.
  • Détection de premier plan à l'aide de l'API Page Visibility.
  • Communication réseau à l'aide de l'API Fetch et de l'API WebSocket.

Matériel et capteurs

  • Manettes de jeu pour lire les informations provenant des manettes de jeu standards et des joysticks connectés à l'appareil à l'aide de l'API Gamepad.
  • Authentification biométrique (reconnaissance faciale ou empreinte digitale, par exemple) via l'authentification Web ou WebAuthn.

Intégration du système d'exploitation

Fonctionnalités en vert clair

Voici la liste des fonctionnalités les plus importantes que vous pouvez utiliser dans votre PWA, mais il se peut qu'elles ne soient pas disponibles dans tous les navigateurs.

Principes de base

  • WebGL 2.0, la nouvelle version de la spécification WebGL pour OpenGL 3.0.
  • Codecs : accès de bas niveau aux images individuelles d'un flux vidéo et aux fragments de contenu audio ; utile pour les applications Web qui nécessitent un contrôle total sur le traitement des contenus multimédias via l'API Web Codecs.

Matériel et capteurs

  • La fonctionnalité Lumière ambiante lit le niveau de luminosité ou l'éclairage actuel de la lumière ambiante autour de l'appareil, en plus de l'API Sensors.
  • La fonctionnalité Vibration permet à l'utilisateur d'envoyer un retour haptique en cas d'événement via l'API Vibration (si l'appareil le permet).
  • L'option Recording media capture les données générées par un objet MediaStream ou HTMLMediaElement (tel qu'une balise <video>) à des fins d'analyse, de traitement ou d'enregistrement sur disque, grâce à l'API MediaRecorder.
  • Appliquer un wakelock à l'écran empêche l'appareil de s'assombrir ou de verrouiller l'écran lorsque votre PWA doit continuer à s'exécuter, à l'aide de l'API Screen Wake Lock.
  • La réalité virtuelle vous permet d'utiliser un casque et d'autres appareils dans votre PWA grâce à l'API WebXR Device.
  • Vous pouvez profiter de la réalité augmentée dans votre PWA de différentes manières, par exemple en utilisant l'API WebXR Device ou l'application Safari rapide pour le contenu en RA.
  • Détectez les utilisateurs inactifs avec l'API Idle Detection.
  • Le verrouillage de l'orientation verrouille l'orientation en mode portrait ou paysage lorsque la PWA est à l'écran, grâce à l'API Screen Orientation ou à la propriété orientation du fichier manifeste d'application Web pour les applications installées.
  • Présentez du contenu sur des projecteurs et des écrans secondaires, grâce à l'API Presentation.
  • Verrouillez un pointeur pour recevoir des informations de mouvement delta provenant de souris (souris, pavés tactiles et pointeurs) au lieu de valeurs de position (utile pour certains jeux) grâce à l'API Pointer Lock.

Intégration du système d'exploitation

Ressources