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
- La fonctionnalité de géolocalisation obtient la position de l'utilisateur via différents fournisseurs, tels que le satellite ou le Wi-Fi, via l'API Geolocation.
- Caméra et micro : recevoir les flux multimédias des caméras et des micros via l'interface Périphériques multimédias.
- Les capteurs collectent des informations en temps réel provenant de l'accéléromètre, du gyroscope, du magnétomètre et d'autres systèmes à l'aide de l'API Sensors ou d'interfaces plus anciennes, telles que DeviceMotionEvent et DeviceOrientationEvent. Dans Safari, vous devez utiliser une demande de boîte de dialogue d'autorisation non standard.
- Les événements de pointeur et les événements tactiles vous permettent d'accéder aux événements tactiles et au pointeur sur toutes les pressions et tous les clics que vous effectuez avec votre doigt, une souris, un pavé tactile ou un stylo.
- 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
- La synthèse vocale et la reconnaissance vocale utilisent les voix installées sur la plate-forme pour s'adresser à l'utilisateur et reconnaître ce qu'il dit, grâce à l'API Web Speech.
- Partagez le contenu de votre PWA avec d'autres applications et emplacements sur l'appareil grâce à l'API Web Share, comme nous le verrons dans la section sur l'intégration de l'OS.
- Accéder au presse-papiers pour enregistrer et récupérer le contenu du presse-papiers dans différents formats grâce à l'API Presse-papiers, comme je l'ai montré dans la section sur l'intégration du système d'exploitation.
- Gérez les identifiants et les mots de passe des utilisateurs à l'aide de l'API Credential Management.
- Activez la lecture des vidéos Picture-in-picture dans le système d'exploitation à l'aide de l'API Picture-in-picture.
- Affichez le contenu en plein écran grâce à l'API Fullscreen, comme je l'ai montré dans la section Windows.
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
- Commandes avancées de la caméra permettant d'accéder aux commandes de panoramique, d'inclinaison et de zoom, en plus des API Media.
- Bluetooth LE pour communiquer avec les appareils Bluetooth basse consommation à proximité de l'utilisateur à l'aide de l'API Web Bluetooth. Pour en savoir plus, consultez la section Communiquer avec des appareils Bluetooth via JavaScript.
- La communication en champ proche pour échanger des données via NFC via des messages NDEF (léger, au format NFC), tels qu'un tag ou une carte NFC à l'aide de l'API WebNFC. Pour en savoir plus, vous pouvez également lire l'article Interagir avec des appareils NFC sur Chrome pour Android.
Périphérique série pour un accès de bas niveau aux appareils connectés à l'appareil via un port série, un port USB ou série via Bluetooth à l'aide du WPI Web Serial. Le lien suivant vous explique comment lire et écrire sur un port série.
Accès aux appareils USB pour communiquer avec les appareils connectés via l'API WebUSB USB. Pour en savoir plus, consultez Accéder aux appareils USB sur le Web.
Les appareils d'interface humaine permettent à votre PWA d'interagir avec n'importe quel type d'appareil préparé pour les interactions humaines rares, à l'aide de l'API WebHID. Consultez ce guide sur la connexion à des périphériques HID peu courants.
- 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é
orientationdu 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
- Lire et écrire des fichiers sur l'appareil grâce à l'API File System Access, comme nous l'avons vu dans la section Intégration de l'OS
- Récupérer le contenu d'autres applications grâce à Web Share Target (Cible de partage Web), comme je l'ai montré dans la section sur l'intégration du système d'exploitation,
- Obtenez les données des contacts à l'aide de l'API Contact Picker, comme indiqué dans le chapitre Intégration du système d'exploitation.
- Effectuez la synchronisation en arrière-plan lorsque la PWA n'est pas utilisée, grâce à l'API de synchronisation en arrière-plan.
- Planification des tâches lorsque la PWA n'est pas utilisée, grâce à l'API WebPeriodic Background Synchronization
- Envoyez des notifications à l'aide des API Web Push et Web Notifications.
- Transférez des fichiers en arrière-plan lorsque l'utilisateur n'utilise pas votre PWA, grâce à l'API de récupération en arrière-plan.
- Intégrez la lecture de contenus multimédias dans le système d'exploitation à l'aide de l'API Media Session.
- Gérez les paiements dans votre PWA grâce à l'API Payment Request. Apple propose également une bibliothèque JS Apple Pay en plus de l'API Payment Request.
- Interroger l'état du réseau, comme le type de connexion (4G, Wi-Fi) et l'option "Enregistrer les données" à l'aide de l'API Network Information
- Capturez l'écran de l'utilisateur pour l'enregistrer ou le partager à l'aide de l'API Screen Capture.
- Détectez des formes à l'aide de détecteurs avec accélération matérielle sur l'appareil, y compris les codes-barres (la reconnaissance optique des caractères et des visages humains est toujours en cours de développement) à l'aide de l'API Shape Detection.
- Interroger la mémoire d'un appareil à l'aide de l'interface de la mémoire de l'appareil.
- Les mots de passe à usage unique par SMS vous permettent de recevoir automatiquement un code par SMS envoyé depuis votre serveur à l'aide de l'API WebOTP. Safari implémente un sous-ensemble de solutions basé sur l'élément
<input>. Pour en savoir plus, consultez le blog de WebKit. - Gérez le clavier virtuel qui s'affiche sur les écrans des appareils mobiles à l'aide de l'API Virtual Keyboard.