5 API JavaScript pour autonomiser vos pages Web mobiles

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.

Les déclarations telles que "le marché mobile se développent" et "Les utilisateurs accédant au réseau via des appareils mobiles (smartphones et tablettes, etc.) dépasseront ceux qui accéderont au réseau via des ordinateurs de bureau ou des ordinateurs portables" ne sont plus impressionnants.

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

Cette API est utile lorsque, par exemple, vous (ou votre utilisateur) avez du mal à utiliser une application Web dans un bus et oublie d'enregistrer les modifications que vous avez apportées. Soudain, votre smartphone se déclenche et vous êtes frustré en perdant beaucoup de temps et tout votre travail. Avec cette API, nous pouvons développer des pages qui peuvent détecter la puissance de la batterie actuelle et enregistrer les changements plus fréquemment pour éviter la perte de données lorsque la puissance de la batterie est faible ou insuffisante.

à 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 vibration

est 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!