Partie 3 / Blogs / Perficient

Bienvenue dans la troisième partie de notre série sur les API Web essentielles ! Si vous n’avez pas encore eu l’occasion d’explorer la deuxième partie, où nous avons abordé en détail les nuances du API d’historique Web et API de stockage Web, je vous encourage à rattraper votre retard ici pour obtenir des informations précieuses sur la gestion efficace de l’historique du navigateur et du stockage des données locales. Et pour les nouveaux arrivants, ne négligez pas la première partie, où nous avons examiné en profondeur les principes fondamentaux de l’API Web Forms, à laquelle vous pouvez accéder ici. Dans ce segment, nous nous aventurerons dans des API Web supplémentaires, notamment Travailleurs du Web, Récupération Webet Géolocalisation Webqui élèvent les possibilités de développement Web.

Commençons notre voyage dans la compréhension de ces outils fondamentaux pour le développement Web.

API des travailleurs Web :

Travailleurs du Web offrent la possibilité d’exécuter du code JavaScript indépendamment en arrière-plan, distinct du thread d’exécution principal. Cela permet d’effectuer des tâches sans bloquer l’interface utilisateur. Voyons un exemple :

Voici un exemple simple démontrant l’utilisation de API des travailleurs Web :

HTML :

<button onclick="startWorker()">Start Worker</button>

Javascript :

let worker;

function startWorker() {
  if (typeof Worker !== "undefined") {
    if (typeof worker == "undefined") {
      worker = new Worker("worker.js");
    }
    worker.onmessage = function (event) {
      console.log("Message received from worker: " + event.data);
    };
  } else {
    console.log("Web Workers not supported in this browser.");
  }
}

Explication:

En HTML, un bouton est créé pour démarrer le web worker. En JavaScript, le ‘startWorker()’ La fonction vérifie si le navigateur prend en charge les Web Workers. Si la fonctionnalité est disponible, elle établit un nouveau Web Worker et désigne un ‘sur message’ gestionnaire d’événements pour accepter les messages du travailleur.

travailleur.js :

setInterval(() => {
  postMessage("Hello from the worker!");
}, 1000);

Explication:

Dans le travailleur.js fichier, nous définissons la tâche en arrière-plan que le travailleur effectuera. Dans ce cas, le travailleur transmet un message « Bonjour de la part du travailleur ! ». Par la suite, les données sont envoyées au script principal à intervalles d’une seconde via le postMessage() méthode. Nous utilisons setInterval() répéter ce processus toutes les secondes.

Sortir:

API de récupération Web :

L’API Fetch fournit un moyen de récupérer des ressources de manière asynchrone, telles que JSON ou HTML, depuis le réseau. Ses capacités dépassent celles de XMLHttpRequête, offrant une approche plus robuste et adaptable pour effectuer des requêtes HTTP. Vous trouverez ci-dessous un résumé de ses capacités opérationnelles :

HTML :

<button onclick="fetchData()">Fetch Data</button>

Javascript :

function fetchData() {
  fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.error("Error fetching data:", error));
}

Explication:

Un clic sur le bouton déclenche le récupérer les données() fonction, qui effectue une requête GET à l’URL spécifiée (dans ce cas, une API gratuite fournie par JSONPlaceholder) en utilisant le aller chercher() fonction. La réponse se transforme en JSON format grâce à l’utilisation du json() méthode. En cas de succès, les données (dans ce cas, les détails d’une publication) sont enregistrées dans la console. Sinon, toutes les erreurs sont détectées et enregistrées.

Sortir:

API de géolocalisation Web :

Les applications Web peuvent obtenir la position géographique de l’appareil d’un utilisateur en utilisant le API de géolocalisation Web. Il possède des fonctionnalités qui permettent à l’utilisateur de voir les changements de localisation au fil du temps, d’accéder à sa position actuelle et d’obtenir des données sur la latitude, la longitude, l’altitude, la direction, la vitesse et la précision. Avec l’aide de cette API, les développeurs peuvent créer des applications Web géolocalisées telles que des prévisions météorologiques, des services de cartographie et des alertes basées sur la localisation.

Explorons certaines des fonctions et propriétés clés ainsi que des exemples de code :

getCurrentPosition() :

Il récupère les coordonnées géographiques actuelles de l’utilisateur, offrant des détails tels que la latitude, la longitude, l’altitude, la précision, la direction, la vitesse et l’horodatage.

Exemple:

//JavaScript
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

function successCallback(position) {
  console.log("Latitude: " + position.coords.latitude);
  console.log("Longitude: " + position.coords.longitude);
}

function errorCallback(error) {
  console.error("Error:", error.message);
}

Sortir:

watchPosition() :

Surveille les changements de position de l’utilisateur au fil du temps, en se mettant continuellement à jour à mesure que l’utilisateur se déplace, permettant un suivi en temps réel dans les applications.

Exemple:

//JavaScript
let watchID = navigator.geolocation.watchPosition(
  successCallback,
  errorCallback
);

function successCallback(position) {
  console.log("Latitude: " + position.coords.latitude);
  console.log("Longitude: " + position.coords.longitude);
}

function errorCallback(error) {
  console.error("Error:", error.message);
}

Sortir:

clearWatch() :

Arrête de surveiller la position de l’utilisateur, mettant ainsi fin à la surveillance en cours initiée par ‘montre claire ().’

Exemple:

//JavaScript
navigator.geolocation.clearWatch(watchID)

coords.latitude et coords.longitude :

Exprimez la position actuelle de l’utilisateur en affichant les coordonnées de latitude et de longitude, offrant des coordonnées géographiques précises.

Exemple:

//JavaScript
console.log("Latitude: " + position.coords.latitude);
console.log("Longitude: " + position.coords.longitude);

coordonnées.précision :

Il s’agit d’une mesure de la fiabilité de la position basée sur l’exactitude des données de position récupérées.

Exemple:

// JavaScript
console.log("Accuracy: " + position.coords.accuracy + " meters");

coords.altitude et coords.altitudePrécision :

Dans cette fonction, le développeur reçoit des informations concernant l’altitude de l’utilisateur et la précision de ses mesures, le cas échéant.

Exemple:

// JavaScript
console.log("Altitude: " + position.coords.altitude + " meters");
console.log("Altitude Accuracy: " + position.coords.altitudeAccuracy + " meters");

coordonnées.titre :

Cela indique la direction dans laquelle l’appareil de l’utilisateur se déplace, présentée en degrés par rapport au nord géographique.

Exemple:

// JavaScript
console.log("Heading: " + position.coords.heading + " degrees");

coordonnées.vitesse :

Désigne la vitesse de mouvement de l’appareil de l’utilisateur, généralement mesurée en mètres par seconde.

Exemple:

// JavaScript
console.log("Speed: " + position.coords.speed + " meters per second");

horodatage :

Fournit l’horodatage indiquant quand les données de position ont été acquises, facilitant l’analyse temporelle ou la synchronisation avec d’autres événements.

Exemple:

// JavaScript
console.log("Timestamp: " + position.timestamp);

Conclusion:

Dans ce segment de notre série, axé sur les API Web cruciales, nous avons approfondi les fonctionnalités dynamiques offertes par les API Web Workers, Web Fetch et Web Geolocation. Ces API élargissent les horizons du développement Web, offrant des solutions pour les tâches en arrière-plan, les requêtes réseau et les fonctionnalités basées sur la localisation. Restez à l’écoute pour plus d’informations et d’exemples pratiques dans notre exploration continue des API Web !