Points clés
- API d'état de la batterie: Fournit des informations sur la batterie ou l'état, aide à enregistrer les modifications plus fréquemment lorsque le niveau de la batterie est faible, empêchant la perte de données.
- API de notification Web: Normalise comment les développeurs informent les utilisateurs, permettant d'émettre des alertes (telles que la livraison par e-mail) en dehors du contexte de la page Web. Cependant, les styles d'affichage de différents navigateurs peuvent varier.
- API du capteur de proximité: détecter la distance entre un objet et l'appareil exécutant une page Web, actuellement pris en charge uniquement par Firefox.
- API de vibration: permet au dispositif de vibrer et peut être utilisé pour simuler des effets spécifiques dans le jeu. L'API de direction de l'appareil détecte la direction de l'appareil, qui est propice aux applications et jeux de navigation.
De nos jours, nous (au moins devons) réaliser que le marché mobile est crucial lors du développement de quoi que ce soit pour le Web.
Depuis de nombreuses années, les discussions et les opinions sur les applications natives et les applications Web varient considérablement, et il a été controversé lequel est le meilleur. Quel que soit votre point de vue, il est vrai que les applications mobiles natives ont pu accéder aux composants matériels auxquels les pages Web ne peuvent pas accéder dans le passé. Mais cet écart est-il toujours valable aujourd'hui? La technologie Web a-t-elle développé suffisamment pour nous permettre, en tant que développeurs, de coder uniquement en utilisant HTML, CSS et JavaScript?
Dans cet article, je présenterai des API JavaScript qui permettent à vos pages Web d'accéder aux composants matériels de votre appareil mobile, ou d'améliorer les fonctionnalités de vos applications Web sur votre appareil mobile.
API d'état de la batterie
L'API d'état de la batterie fournit des informations sur le niveau de batterie ou l'état du système. Avec cette API, vous pouvez savoir si la batterie est chargée, combien de temps il restera avant que la batterie ne soit complètement déchargée, ou tout simplement sa capacité actuelle. Ces détails sont accessibles via quatre propriétés appartenant à l'objet. Cette API définit également les événements qui peuvent être déclenchés lorsque les propriétés ci-dessus changent. window.navigator.battery
à ce jour, l'API d'état de la batterie n'est pris en charge que par Firefox, mais il est très facile de détecter la prise en charge de cette API, comme indiqué ci-dessous:
if (window.navigator && window.navigator.battery) {
// API 受支持
} else {
// 不受支持
} Un exemple simple de l'utilisation de cette API est le suivant: if (window.navigator && window.navigator.battery) {
// API 受支持
} else {
// 不受支持
}
Si vous voulez essayer cette API, nous avons une démo pour vous. Si vous souhaitez rechercher davantage, nous avons introduit l'API d'état de la batterie sur SitePoint ici.
API de notification Web
Sur les appareils mobiles, nous connaissons le concept de notifications et de nombreuses applications qui ont été installées sur les notifications de mise en ?uvre de l'appareil. Sur le Web, les sites Web les implémentent de différentes manières. Pensez à Google et à Twitter, ils ont tous les deux des mécanismes de notification, mais ils les mettent en ?uvre différemment.
L'API de notification Web est une API créée à cet effet pour normaliser la fa?on dont les développeurs informent les utilisateurs. Les notifications permettent aux utilisateurs de rappeler à un utilisateur un événement en dehors du contexte de la page Web, tels que la livraison des e-mails. Alors que les développeurs créent des notifications de la même manière, la spécification ne décrit pas comment et où l'interface utilisateur doit les afficher. Cela signifie que nous verrons différents styles sur différents navigateurs. Par exemple, sur les appareils mobiles, nous pourrions les voir dans la barre de notification.
L'API de notification Web est exposée via l'attribut window de l'objet Notification. Il s'agit d'un constructeur qui nous permet de créer des instances de notification. Pour créer une nouvelle notification, nous pouvons écrire le code suivant:
// 打印電池是否正在充電
console.log("電池" + (navigator.battery.charging ? "" : "未") + "充電");
Actuellement, Chrome, Firefox et Safari soutiennent cette API. Les navigateurs mobiles qui prennent en charge l'API de notification Web comprennent Firefox, Android 4.4 et BlackBerry. Avez-vous vu quelque chose d'étrange? Chrome Mobile ne prend pas en charge cette API! Triste mais c'est vrai.
Parce que les navigateurs qui prennent en charge cette API couvrent plus de la moitié du marché, mais pour nous assurer que notre code JavaScript n'essaie pas d'appeler des méthodes non soutenues, nous devons tester la situation d'assistance. Nous pouvons le faire en utilisant l'extrait de code suivant:
var notification = new Notification('收到電子郵件', {
body: '您收到了一封電子郵件。立即閱讀！'
});
excité par cette API? Très bien! Vous pouvez en savoir plus dans l'article en train de démarrer avec l'API de notification Web, et vous pouvez également essayer la démo en direct.
API du capteur de proximité
L'API du capteur de proximité est une API JavaScript que nous pouvons utiliser pour détecter la distance entre un objet et l'appareil exécutant une page Web. La distance est mesurée par le capteur de proximité (si votre appareil a un capteur de proximité). L'API du capteur de proximité ne fournit pas d'attributs ou de méthodes, ne déclenche que deux événements sur l'objet window. Nous pouvons les écouter pour effectuer des opérations. Le premier événement deviceproximity fournit des informations sur la distance réelle entre l'appareil et les objets à proximité, tandis que le deuxième événement userproximity spécifie uniquement s'il y a des objets à proximité.
Le seul navigateur qui prend en charge cette API est Firefox (bureau et mobile), à ??commencer par la version 15. Malheureusement, comme de nombreux ordinateurs portables et ordinateurs de bureau n'ont pas de capteurs de proximité, nous ciblons principalement les appareils mobiles.
Détection du support pour cette API:
if ('Notification' in window) {
// API 受支持
} else {
// 不受支持
}
Un exemple simple d'utilisation est le suivant:
if ('ondeviceproximity' in window) {
// API 受支持
} else {
// 不受支持
}
Si vous voulez en savoir plus sur l'API du capteur de proximité, j'ai écrit un article intitulé "En commen?ant par l'API du capteur de proximité". Si vous voulez réellement le faire, vous pouvez utiliser cette démo.
API de vibration
L'API de vibrationest une API très simple qui contient une méthode qui nous permet de faire vibrer les appareils. Une utilisation évidente est dans le jeu où nous pouvons reproduire les effets introduits par certaines consoles il y a une décennie. Cependant, ce n'est pas le seul objectif possible de cette API.
Comme je l'ai mentionné, l'API de vibration expose uniquement une méthode appelée vibrate(). Ce dernier appartient à l'objet window.navigator, dans sa forme la plus simple, accepte un entier qui spécifie le nombre de millisecondes que le dispositif doit vibrer.
Outre Internet Explorer et Safari, cette API est prise en charge par tous les principaux navigateurs. Pourtant, peut-être le bon moment pour l'utiliser pour votre prochain projet. En fait, s'il est pris en charge, vous offrez à l'utilisateur une meilleure expérience (sauf si vous abusez de cette fonctionnalité). Le support de détection est très facile, comme indiqué ci-dessous:
if (window.navigator && window.navigator.battery) {
// API 受支持
} else {
// 不受支持
}
Une utilisation très simple du Un moyen très simple d'utiliser l'API est la suivante:
// 打印電池是否正在充電
console.log("電池" + (navigator.battery.charging ? "" : "未") + "充電");
Pour en savoir plus sur cette API, lisez l'article "Comment utiliser l'API de vibration HTML5" et n'oubliez pas d'essayer la démo.
API de direction de l'appareil
La dernière API dont je souhaite discuter est l'API de direction de l'appareil. La détection de l'orientation de l'appareil est utile pour une variété de situations, des applications de navigation aux jeux. Cette API définit plusieurs événements qui fournissent des informations sur l'orientation physique et le mouvement de l'appareil. Cette API est un projet de travail W3C, ce qui signifie que la spécification est instable et nous pouvons nous attendre à des changements à l'avenir.
L'API expose les trois événements suivants: deviceorientation, devicemotion et compassneedscalibration. Le premier événement est déclenché lorsque l'accéléromètre détecte un changement dans la direction de l'appareil. Un deuxième événement est déclenché chaque fois que l'appareil accélère ou décélère. Le dernier événement est déclenché lorsque l'agent utilisateur détermine que la boussole doit être calibrée.
Presque tous les principaux navigateurs (sauf Safari) soutiennent cette API, mais le support est partiel ou il y a des incohérences. Par exemple, au moment de la rédaction, peu de navigateurs prennent en charge les événements compassneedscalibration. Ma suggestion est donc de tester chaque événement pour voir s'il est pris en charge. Pour tester l'existence des événements deviceorientation, vous pouvez écrire:
var notification = new Notification('收到電子郵件', {
body: '您收到了一封電子郵件。立即閱讀！'
});
ou:
if ('Notification' in window) {
// API 受支持
} else {
// 不受支持
}
Par exemple, si vous souhaitez tester l'événement devicemotion, vous pouvez écrire:
if ('ondeviceproximity' in window) {
// API 受支持
} else {
// 不受支持
}
Si vous souhaitez utiliser cette API, nous avons une démo que vous pouvez utiliser. Si vous voulez l'apprendre, nous avons l'article "en utilisant l'orientation de l'appareil dans HTML5".
Conclusion
Dans cet article, je vous montre des API qui peuvent améliorer les pages Web de visiteurs mobiles.
Les cas d'utilisation de ces API sont infinis, tout dépend de votre imagination et du type d'application ou de site Web que vous développez. J'espère que vous avez apprécié ce post, faites-moi savoir quelles autres API utiles que vous pensez peut être.
Des questions fréquemment posées sur l'API mobile Web JavaScript
Que sont les API JavaScript et comment améliorent-ils les pages Web mobiles?
L'API JavaScript (interface de programmation d'application) est un ensemble de règles et de protocoles qui permettent à différentes applications logicielles de communiquer entre elles. Ils améliorent les pages Web mobiles en permettant aux pages Web mobiles d'interagir avec le matériel de l'appareil et d'autres applications logicielles, améliorant ainsi leur fonctionnalité et leur expérience utilisateur. Par exemple, l'API JavaScript peut permettre aux pages Web d'accéder à la caméra de l'appareil, à l'emplacement géographique et même à l'état de la batterie. Cela crée plus de possibilités pour les développeurs d'interagir, d'engager et de pages Web mobiles conviviales.
Comment utiliser l'API Geolocation dans ma page mobile?
L'API de géolocalisation est un outil puissant qui vous permet d'accéder à la géolocalisation de votre appareil. Pour l'utiliser, vous devez d'abord vérifier si le navigateur de l'utilisateur le prend en charge. Cela peut être fait en utilisant la propriété navigator.geolocation. S'il retourne true, vous pouvez utiliser la méthode getCurrentPosition() pour obtenir l'emplacement actuel de l'utilisateur. N'oubliez pas d'obtenir toujours l'autorisation de l'utilisateur avant d'accéder aux données de localisation de l'utilisateur.
Quelle est l'API d'état de la batterie et comment l'utiliser?
L'API d'état de la batterie fournit des informations sur l'état de la batterie du périphérique h?te. Ceci est très utile pour optimiser les performances d'une page Web en fonction du niveau de batterie de l'appareil. Par exemple, lorsque la batterie est faible, vous pouvez réduire la fréquence de mise à jour ou désactiver certaines fonctionnalités pour économiser l'énergie. Pour utiliser cette API, vous pouvez utiliser la méthode navigator.getBattery(), qui renvoie une promesse qui se résout à un objet BatteryManager.
Comment utiliser l'API Vibration dans ma page Web mobile?
L'API de vibration vous permet de contr?ler le mécanisme de vibration du dispositif h?te. Ceci est très utile pour fournir des commentaires tactiles à l'utilisateur. Pour utiliser cette API, vous pouvez utiliser la méthode navigator.vibrate(). Vous pouvez transmettre une seule valeur pour vibrer un temps spécifique ou passer une série de valeurs pour créer des modes de vibration et de pause.
Quelle est l'API du capteur de lumière ambiante et comment l'utiliser?
L'API du capteur de lumière ambiante fournit des informations sur le niveau de lumière ambiant de l'appareil. Ceci est utile pour ajuster la luminosité ou le contraste d'une page Web afin d'améliorer la lisibilité dans différentes conditions d'éclairage. Pour utiliser cette API, vous devez créer une nouvelle instance d'objet AmbientLightSensor, puis commencer à détecter le niveau de lumière à l'aide de la méthode start().
Comment utiliser l'API Information Web dans ma page Web mobile?
L'API d'informations réseau fournit des informations sur la connexion réseau de l'appareil. Ceci est très utile pour optimiser les performances d'une page Web en fonction de l'état du réseau. Par exemple, lorsque la connexion réseau est lente, vous pouvez réduire la qualité de vos images ou vidéos pour assurer un chargement fluide. Pour utiliser cette API, vous pouvez utiliser la propriété navigator.connection, qui renvoie un objet NetworkInformation.
Quelle est l'API d'orientation de l'appareil et comment l'utiliser?
L'API de direction de l'appareil fournit des informations sur l'orientation physique de l'appareil. Ceci est très utile pour créer des expériences interactives qui répondent au mouvement des appareils. Pour utiliser cette API, vous pouvez ajouter un écouteur d'événements à l'événement deviceorientation, qui se déclenche lorsque l'orientation de l'appareil change.
Comment utiliser l'API de visibilité de la page dans ma page Web mobile?
L'API de visibilité de la page vous permet de détecter quand une page Web est visible ou masquée. Ceci est utile pour faire une pause ou reprendre l'activité en fonction de la visibilité de la page. Par exemple, lorsque l'utilisateur passe à un autre onglet, vous pouvez suspendre la vidéo et reprendre la vidéo à son retour. Pour utiliser cette API, vous pouvez utiliser l'attribut document.visibilityState et l'événement visibilitychange.
Qu'est-ce qu'une API en plein écran et comment l'utiliser?
L'API plein écran vous permet d'afficher des éléments en mode plein écran. Ceci est très utile pour offrir une expérience plus immersive pour les vidéos ou les jeux, etc. Pour utiliser cette API, vous pouvez utiliser la méthode requestFullscreen() pour n'importe quel élément pour le faire appara?tre en plein écran.
Comment utiliser l'API de notification Web dans ma page mobile?
L'API de notification Web vous permet d'afficher les notifications aux utilisateurs. Ceci est très utile pour rappeler aux utilisateurs des événements importants, même si votre page n'a pas d'objectif. Pour utiliser cette API, vous devez d'abord demander l'autorisation de l'utilisateur à l'aide de la méthode Notification.requestPermission(). Si l'utilisateur accorde l'autorisation, vous pouvez créer un nouvel objet de notification pour afficher les notifications.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!
Article chaud
Outils chauds
Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment faire une demande HTTP dans Node.js?
Jul 13, 2025 am 02:18 AM
Il existe trois fa?ons courantes d'initier des demandes HTTP dans Node.js: utilisez des modules intégrés, Axios et Node-Fetch. 1. Utilisez le module HTTP / HTTPS intégré sans dépendances, ce qui convient aux scénarios de base, mais nécessite un traitement manuel de la couture des données et de la surveillance des erreurs, tels que l'utilisation de https.get () pour obtenir des données ou envoyer des demandes de post via .write (); 2.AXIOS est une bibliothèque tierce basée sur la promesse. Il a une syntaxe concise et des fonctions puissantes, prend en charge l'async / attendre, la conversion JSON automatique, l'intercepteur, etc. Il est recommandé de simplifier les opérations de demande asynchrones; 3.Node-Fetch fournit un style similaire à la récupération du navigateur, basé sur la promesse et la syntaxe simple
Types de données JavaScript: référence primitive vs
Jul 13, 2025 am 02:43 AM
Les types de données JavaScript sont divisés en types primitifs et types de référence. Les types primitifs incluent la cha?ne, le nombre, le booléen, le nul, un non défini et le symbole. Les valeurs sont immuables et les copies sont copiées lors de l'attribution des valeurs, de sorte qu'elles ne se affectent pas; Les types de référence tels que les objets, les tableaux et les fonctions stockent les adresses de mémoire, et les variables pointant vers le même objet s'afferchent mutuellement. Le typeof et l'instance de OFF peuvent être utilisés pour déterminer les types, mais prêtent attention aux problèmes historiques de typeofnull. Comprendre ces deux types de différences peut aider à écrire un code plus stable et fiable.
React vs Angular vs Vue: Quel framework JS est le meilleur?
Jul 05, 2025 am 02:24 AM
Quel framework JavaScript est le meilleur choix? La réponse est de choisir la plus appropriée selon vos besoins. 1.RIATT est flexible et gratuit, adapté aux projets moyens et grands qui nécessitent une personnalisation élevée et des capacités d'architecture d'équipe; 2. Angular fournit des solutions complètes, adaptées aux applications au niveau de l'entreprise et à la maintenance à long terme; 3. Vue est facile à utiliser, adaptée à des projets de petite et moyenne taille ou à un développement rapide. De plus, s'il existe une pile technologique existante, la taille de l'équipe, le cycle de vie du projet et si le RSS est nécessaire sont également des facteurs importants dans le choix d'un cadre. En bref, il n'y a pas absolument le meilleur cadre, le meilleur choix est celui qui convient à vos besoins.
Objet JavaScript Time, quelqu'un construit un site Web Eactexe, plus rapide sur Google Chrome, etc.
Jul 08, 2025 pm 02:27 PM
Bonjour, développeurs JavaScript! Bienvenue dans JavaScript News de cette semaine! Cette semaine, nous nous concentrerons sur: le différend de marque d'Oracle avec Deno, les nouveaux objets Time JavaScript sont pris en charge par les navigateurs, les mises à jour Google Chrome et certains outils de développeurs puissants. Commen?ons! Le différend de marque d'Oracle avec la tentative de Deno Oracle d'enregistrer une marque "JavaScript" a provoqué la controverse. Ryan Dahl, le créateur de Node.js et Deno, a déposé une pétition pour annuler la marque, et il pense que JavaScript est un niveau ouvert et ne devrait pas être utilisé par Oracle
Qu'est-ce que l'API Cache et comment est-elle utilisée avec les travailleurs du service?
Jul 08, 2025 am 02:43 AM
Cacheapi est un outil fourni par le navigateur pour mettre en cache les demandes de réseau, qui est souvent utilisée en conjonction avec travailleur de service pour améliorer les performances du site Web et l'expérience hors ligne. 1. Il permet aux développeurs de stocker manuellement des ressources telles que des scripts, des feuilles de style, des photos, etc.; 2. Il peut faire correspondre les réponses du cache en fonction des demandes; 3. Il prend en charge la suppression des caches spécifiques ou la nettoyage du cache entier; 4. Il peut mettre en ?uvre des stratégies de priorité de cache ou de priorité de réseau grace à l'écoute des événements Fetch; 5. Il est souvent utilisé pour le support hors ligne, accélérez la vitesse d'accès répétée, préchargement des ressources clés et du contenu de mise à jour des antécédents; 6. Lorsque vous l'utilisez, vous devez faire attention au contr?le de la version du cache, aux restrictions de stockage et à la différence entre le mécanisme de mise en cache HTTP.
Gestion des promesses: cha?nage, gestion des erreurs et combinateurs de promesses en javascript
Jul 08, 2025 am 02:40 AM
La promesse est le mécanisme central pour gérer les opérations asynchrones en JavaScript. Comprendre les appels de cha?ne, la gestion des erreurs et les combinants est la clé pour ma?triser leurs applications. 1. L'appel de la cha?ne renvoie une nouvelle promesse à travers. Puis () pour réaliser la concaténation des processus asynchrones. Chaque .then () re?oit le résultat précédent et peut renvoyer une valeur ou une promesse; 2. La gestion des erreurs doit utiliser .catch () pour attraper des exceptions pour éviter les défaillances silencieuses, et peut renvoyer la valeur par défaut dans Catch pour continuer le processus; 3. Combinateurs tels que promesse.all () (réussi avec succès uniquement après tout succès), promesse.race () (le premier achèvement est retourné) et promesse.allsetTled () (en attente de toutes les achèvements)
Tire de tirage.
Jul 06, 2025 am 02:36 AM
Des méthodes intégrées de la matrice JavaScript telles que .map (), .filter () et .reduce () peuvent simplifier le traitement des données; 1) .map () est utilisé pour convertir les éléments un en un pour générer de nouveaux tableaux; 2) .filter () est utilisé pour filtrer les éléments par condition; 3) .reduce () est utilisé pour agréger les données en tant que valeur unique; Une mauvaise utilisation doit être évitée lorsqu'elle est utilisée, entra?nant des effets secondaires ou des problèmes de performance.
JS Roundup: une plongée profonde dans la boucle d'événement JavaScript
Jul 08, 2025 am 02:24 AM
La boucle d'événement de JavaScript gère les opérations asynchrones en coordonnant les piles d'appels, les webapis et les files d'attente de taches. 1. La pile d'appels exécute du code synchrone, et lors de la rencontre de taches asynchrones, il est remis à WebAPI pour le traitement; 2. Une fois que le WebAPI a terminé la tache en arrière-plan, il met le rappel dans la file d'attente correspondante (macro tache ou micro tache); 3. La boucle d'événement vérifie si la pile d'appels est vide. S'il est vide, le rappel est retiré de la file d'attente et poussé dans la pile d'appels pour l'exécution; 4. Micro taches (comme Promise. puis) ??prendre la priorité sur les taches macro (telles que Settimeout); 5. Comprendre la boucle d'événements permet d'éviter de bloquer le thread principal et d'optimiser l'ordre d'exécution du code.
