Unir les applications Web et natives avec 4 API JavaScript inconnues —

Il y a quelques années, quatre API JavaScript qui ont atterri au bas de l’échelle de notoriété dans l’enquête sur l’état de JavaScript. Je me suis intéressé à ces API car elles ont tellement de potentiel pour être utiles mais n’obtiennent pas le crédit qu’elles méritent. Même après une recherche rapide, j’ai été étonné du nombre de nouvelles API Web ajoutées à la spécification ECMAScript qui ne reçoivent pas leur dû et avec un manque de sensibilisation et de prise en charge des navigateurs.

Cette situation peut être un « catch-22 » :

Une API est intéressante mais manque de notoriété en raison d’un support incomplet, et il n’y a pas de besoin immédiat de la prendre en charge en raison d’une faible notoriété.

La plupart de ces API sont conçues pour alimenter les applications Web progressives (PWA) et combler l’écart entre les applications Web et natives. Gardez à l’esprit que la création d’une PWA implique bien plus que simplement l’ajout d’un fichier manifeste. Bien sûr, c’est une PWA par définition, mais en pratique, elle fonctionne comme un signet sur votre écran d’accueil. En réalité, nous avons besoin de plusieurs API pour obtenir une expérience d’application entièrement native sur le Web. Et les quatre API que j’aimerais mettre en lumière font partie de ce puzzle PWA qui apporte au Web ce que nous pensions autrefois n’être possible que dans les applications natives.

Vous pouvez voir tout cela API en action dans cette démo Au fur et à mesure.

1. API d’orientation de l’écran

Le API d’orientation de l’écran peut être utilisé pour détecter l’orientation actuelle de l’appareil. Une fois que nous savons si un utilisateur navigue en orientation portrait ou paysage, nous pouvons l’utiliser pour améliorer l’UX pour les appareils mobiles en modifiant l’interface utilisateur en conséquence. Nous pouvons également l’utiliser pour verrouiller l’écran dans une certaine positionce qui est utile pour afficher des vidéos et d’autres éléments en plein écran bénéficiant d’une fenêtre d’affichage plus large.

Utiliser le global screen objet, vous pouvez accéder à diverses propriétés que l’écran utilise pour afficher une page, y compris la screen.orientation objet. Il possède deux propriétés :

• type: L’orientation actuelle de l’écran. Ça peut être: "portrait-primary", "portrait-secondary", "landscape-primary"ou "landscape-secondary".
• angle: L’angle d’orientation actuel de l’écran. Il peut s’agir de n’importe quel nombre compris entre 0 et 360 degrés, mais il est normalement défini en multiples de 90 degrés (par exemple, 0, 90, 180ou 270).

Sur les appareils mobiles, si le angle est 0 degrés, le type va le plus souvent évaluer à "portrait" (vertical), mais sur les appareils de bureau, c’est généralement "landscape" (horizontal). Cela rend le type propriété précise pour connaître la véritable position d’un appareil.

Le screen.orientation object a également deux méthodes :

• .lock(): Il s’agit d’une méthode asynchrone qui prend un type valeur comme argument pour verrouiller l’écran.
• .unlock(): Cette méthode déverrouille l’écran dans son orientation par défaut.

Et enfin, screen.orientation compte avec un "orientationchange" événement pour savoir quand l’orientation a changé.

Prise en charge du navigateur

Recherche et verrouillage de l’orientation de l’écran

Codons une courte démo à l’aide de l’API Screen Orientation pour connaître l’orientation de l’appareil et le verrouiller dans sa position actuelle.

Cela peut être notre passe-partout HTML :

<main>
  <p>
    Orientation Type: <span class="orientation-type"></span>
    <br />
    Orientation Angle: <span class="orientation-angle"></span>
  </p>

  <button type="button" class="lock-button">Lock Screen</button>

  <button type="button" class="unlock-button">Unlock Screen</button>

  <button type="button" class="fullscreen-button">Go Full Screen</button>
</main>

Côté JavaScript, on injecte l’orientation de l’écran type et angle propriétés dans notre HTML.

let currentOrientationType = document.querySelector(".orientation-type");
let currentOrientationAngle = document.querySelector(".orientation-angle");

currentOrientationType.textContent = screen.orientation.type;
currentOrientationAngle.textContent = screen.orientation.angle;

Nous pouvons maintenant voir les propriétés d’orientation et d’angle de l’appareil. Sur mon ordinateur portable, ils sont "landscape-primary" et 0°.

Si nous écoutons la fenêtre orientationchange événement, nous pouvons voir comment les valeurs sont mises à jour à chaque fois que l’écran tourne.

window.addEventListener("orientationchange", () => {
  currentOrientationType.textContent = screen.orientation.type;
  currentOrientationAngle.textContent = screen.orientation.angle;
});

Pour verrouiller l’écran, nous devons d’abord être en mode plein écran, nous allons donc utiliser une autre fonctionnalité extrêmement utile : le API plein écran. Personne ne souhaite qu’une page Web apparaisse en mode plein écran sans son consentement. Nous avons donc besoin activation transitoire (c’est-à-dire un clic d’utilisateur) à partir d’un élément DOM pour fonctionner.

L’API Plein écran propose deux méthodes :

1. Document.exitFullscreen() est utilisé à partir de l’objet document global,
2. Element.requestFullscreen() fait passer l’élément spécifié et ses descendants en plein écran.

Nous voulons que la page entière soit en plein écran afin de pouvoir appeler la méthode à partir de l’élément racine au niveau du document.documentElement objet:

const fullscreenButton = document.querySelector(".fullscreen-button");

fullscreenButton.addEventListener("click", async () => {
  // If it is already in full-screen, exit to normal view
  if (document.fullscreenElement) {
    await document.exitFullscreen();
  } else {
    await document.documentElement.requestFullscreen();
  }
});

Ensuite, nous pouvons verrouiller l’écran dans son orientation actuelle :

const lockButton = document.querySelector(".lock-button");

lockButton.addEventListener("click", async () => {
  try {
    await screen.orientation.lock(screen.orientation.type);
  } catch (error) {
    console.error(error);
  }
});

Et faites l’inverse avec le bouton de déverrouillage :

const unlockButton = document.querySelector(".unlock-button");

unlockButton.addEventListener("click", () => {
  screen.orientation.unlock();
});

Ne pouvons-nous pas vérifier l’orientation avec une requête multimédia ?

Oui! On peut en effet vérifier l’orientation des pages via le orientation fonctionnalité multimédia dans une requête multimédia CSS. Cependant, les requêtes multimédias calculent l’orientation actuelle en vérifiant si la largeur est « plus grande que la hauteur » pour le paysage ou « plus petite » pour le portrait. Par contre,

L’API d’orientation de l’écran vérifie l’écran qui affiche la page quelles que soient les dimensions de la fenêtre d’affichage, la rendant ainsi résistante aux incohérences pouvant survenir lors du redimensionnement de la page.

Vous avez peut-être remarqué comment les PWA comme Instagram et X forcent l’écran à être en mode portrait même lorsque l’orientation native du système est déverrouillée. Il est important de noter que ce comportement n’est pas obtenu via l’API d’orientation de l’écran, mais en définissant le orientation propriété sur le manifest.json fichier au type d’orientation souhaité.

2. API d’orientation des appareils

Une autre API que j’aimerais aborder est l’API d’orientation des appareils. Il donne accès aux capteurs du gyroscope d’un appareil pour lire l’orientation de l’appareil dans l’espace ; quelque chose qui est utilisé tout le temps dans les applications mobiles, principalement les jeux. L’API rend cela possible avec un deviceorientation événement qui se déclenche à chaque mouvement de l’appareil. Il possède les propriétés suivantes :

• event.alpha: Orientation le long de l’axe Z, allant de 0 à 360 degrés.
• event.beta: Orientation le long de l’axe X, allant de -180 à 180 degrés.
• event.gamma: Orientation le long de l’axe Y, allant de -90 à 90 degrés.

Prise en charge du navigateur

Déplacer des éléments avec votre appareil

Dans ce cas, nous créerons un cube 3D avec CSS qui pourra être tourné avec votre appareil ! Les instructions complètes que j’ai utilisées pour créer le cube CSS initial sont attribuées à David De Sandro et peut être trouvé dans son introduction aux transformations 3D.

Vous pouvez voir le HTML brut complet dans la démo, mais imprimons-le ici pour la postérité :

<main>
  <div class="scene">
    <div class="cube">
      <div class="cube__face cube__face--front">1</div>
      <div class="cube__face cube__face--back">2</div>
      <div class="cube__face cube__face--right">3</div>
      <div class="cube__face cube__face--left">4</div>
      <div class="cube__face cube__face--top">5</div>
      <div class="cube__face cube__face--bottom">6</div>
    </div>
  </div>
  <h1>Device Orientation API</h1>
  <p>
    Alpha: <span class="currentAlpha"></span>
    <br />
    Beta: <span class="currentBeta"></span>
    <br />
    Gamma: <span class="currentGamma"></span>
  </p>
</main>

Pour rester bref, je n’expliquerai pas le code CSS ici. Gardez simplement à l’esprit qu’il fournit les styles nécessaires pour le cube 3D et qu’il peut être pivoté sur tous les axes à l’aide du bouton CSS rotate() fonction.

Maintenant, avec JavaScript, nous écoutons le message de la fenêtre deviceorientation événement et accéder aux données d’orientation de l’événement :

const currentAlpha = document.querySelector(".currentAlpha");
const currentBeta = document.querySelector(".currentBeta");
const currentGamma = document.querySelector(".currentGamma");

window.addEventListener("deviceorientation", (event) => {
  currentAlpha.textContent = event.alpha;
  currentBeta.textContent = event.beta;
  currentGamma.textContent = event.gamma;
});

Pour voir comment les données changent sur un appareil de bureau, nous pouvons ouvrir les DevTools de Chrome et accéder au panneau des capteurs pour émuler un appareil rotatif.

Pour faire pivoter le cube, on change son CSS transform propriétés en fonction des données d’orientation de l’appareil :

const currentAlpha = document.querySelector(".currentAlpha");
const currentBeta = document.querySelector(".currentBeta");
const currentGamma = document.querySelector(".currentGamma");

const cube = document.querySelector(".cube");

window.addEventListener("deviceorientation", (event) => {
  currentAlpha.textContent = event.alpha;
  currentBeta.textContent = event.beta;
  currentGamma.textContent = event.gamma;

  cube.style.transform = `rotateX(${event.beta}deg) rotateY(${event.gamma}deg) rotateZ(${event.alpha}deg)`;
});

Voici le résultat :

3. API des vibrations

Tournons notre attention vers l’API Vibration, qui, sans surprise, permet d’accéder au mécanisme de vibration d’un appareil. Cela s’avère pratique lorsque nous devons alerter les utilisateurs avec des notifications dans l’application, par exemple lorsqu’un processus est terminé ou qu’un message est reçu. Cela dit, il faut l’utiliser avec parcimonie ; personne ne veut que son téléphone explose de notifications.

L’API Vibration ne nous offre qu’une seule méthode, et c’est tout ce dont nous avons besoin : navigator.vibrate().

vibrate() est disponible dans le monde entier à partir du navigator objet et prend un argument pour savoir combien de temps dure une vibration en millisecondes. Il peut s’agir d’un nombre ou d’un tableau de nombres représentant un patron de vibrations et de pauses.

navigator.vibrate(200); // vibrate 200ms
navigator.vibrate([200, 100, 200]); // vibrate 200ms, wait 100, and vibrate 200ms.

Prise en charge du navigateur

Démo de l’API de vibration

Faisons une démonstration rapide dans laquelle l’utilisateur saisit le nombre de millisecondes pendant lesquelles il souhaite que son appareil vibre et les boutons pour démarrer et arrêter la vibration, en commençant par le balisage :

<main>
  <form>
    <label for="milliseconds-input">Milliseconds:</label>
    <input type="number" id="milliseconds-input" value="0" />
  </form>

  <button class="vibrate-button">Vibrate</button>
  <button class="stop-vibrate-button">Stop</button>
</main>

Nous ajouterons un écouteur d’événement en un clic et invoquerons le vibrate() méthode:

const vibrateButton = document.querySelector(".vibrate-button");
const millisecondsInput = document.querySelector("#milliseconds-input");

vibrateButton.addEventListener("click", () => {
  navigator.vibrate(millisecondsInput.value);
});

Pour arrêter de vibrer, nous remplaçons la vibration actuelle par une vibration de zéro milliseconde.

const stopVibrateButton = document.querySelector(".stop-vibrate-button");

stopVibrateButton.addEventListener("click", () => {
  navigator.vibrate(0);
});

Autrefois, seules les applications natives pouvaient se connecter aux « contacts » d’un appareil. Mais nous avons maintenant la quatrième et dernière API que je souhaite examiner : la API du sélecteur de contacts.

L’API accorde aux applications Web l’accès aux listes de contacts de l’appareil. Plus précisément, nous obtenons le contacts.select() méthode asynchrone disponible via le navigator objet, qui prend les deux arguments suivants :

• properties: Il s’agit d’un tableau contenant les informations que nous souhaitons récupérer à partir d’une fiche de contact, par exemple : "name", "address", "email", "tel"et "icon".
• options: Il s’agit d’un objet qui ne peut contenir que le multiple propriété booléenne pour définir si l’utilisateur peut ou non sélectionner un ou plusieurs contacts à la fois.

Prise en charge du navigateur

Je crains que la prise en charge du navigateur soit presque nulle sur celui-ci, limitée à Chrome Android, Samsung Internet et au navigateur Web natif d’Android au moment où j’écris ces lignes.

Sélection des contacts de l’utilisateur

Nous ferons une autre démo pour sélectionner et afficher les contacts de l’utilisateur sur la page. Encore une fois, en commençant par le HTML :

<main>
  <button class="get-contacts">Get Contacts</button>
  <p>Contacts:</p>
  <ul class="contact-list">
    <!-- We’ll inject a list of contacts -->
  </ul>
</main>

Ensuite, en JavaScript, nous construisons d’abord nos éléments à partir du DOM et choisissons les propriétés que nous voulons sélectionner parmi les contacts.

const getContactsButton = document.querySelector(".get-contacts");
const contactList = document.querySelector(".contact-list");

const props = ["name", "tel", "icon"];
const options = {multiple: true};

Désormais, nous sélectionnons les contacts de manière asynchrone lorsque l’utilisateur clique sur le bouton getContactsButton.

const getContacts = async () => {
  try {
    const contacts = await navigator.contacts.select(props, options);
  } catch (error) {
    console.error(error);
  }
};

getContactsButton.addEventListener("click", getContacts);

En utilisant la manipulation DOM, nous pouvons ensuite ajouter un élément de liste à chaque contact et une icône au contactList élément.

const appendContacts = (contacts) => {
  contacts.forEach(({name, tel, icon}) => {
    const contactElement = document.createElement("li");

    contactElement.innerText = `${name}: ${tel}`;
    contactList.appendChild(contactElement);
  });
};

const getContacts = async () => {
  try {
    const contacts = await navigator.contacts.select(props, options);
    appendContacts(contacts);
  } catch (error) {
    console.error(error);
  }
};

getContactsButton.addEventListener("click", getContacts);

Ajouter une image est un peu délicat car nous devrons la convertir en URL et l’ajouter pour chaque élément de la liste.

const getIcon = (icon) => {
  if (icon.length > 0) {
    const imageUrl = URL.createObjectURL(icon[0]);
    const imageElement = document.createElement("img");
    imageElement.src = imageUrl;

    return imageElement;
  }
};

const appendContacts = (contacts) => {
  contacts.forEach(({name, tel, icon}) => {
    const contactElement = document.createElement("li");

    contactElement.innerText = `${name}: ${tel}`;
    contactList.appendChild(contactElement);

    const imageElement = getIcon(icon);
    contactElement.appendChild(imageElement);
  });
};

const getContacts = async () => {
  try {
    const contacts = await navigator.contacts.select(props, options);
    appendContacts(contacts);
  } catch (error) {
    console.error(error);
  }
};

getContactsButton.addEventListener("click", getContacts);

Et voici le résultat :

Note: L’API Contact Picker ne fonctionnera que si le contexte est sécurisé, c’est-à-dire que la page est servie sur https:// ou wss:// URL.

Conclusion

Et voilà, quatre API Web qui, je pense, nous permettraient de créer des PWA plus utiles et plus robustes mais sont passés inaperçus pour beaucoup d’entre nous. Ceci est, bien sûr, dû à une prise en charge incohérente du navigateur, j’espère donc que cet article pourra faire connaître les nouvelles API afin que nous ayons une meilleure chance de les voir dans les futures mises à jour du navigateur.

Ne sont-ils pas intéressants ? Nous avons vu combien de contrôle nous avons sur l’orientation d’un appareil et son écran ainsi que le niveau d’accès dont nous disposons pour accéder aux fonctionnalités matérielles d’un appareil, c’est-à-dire les vibrations et les informations d’autres applications à utiliser dans notre propre interface utilisateur.

Mais comme je l’ai dit bien plus tôt, il y a une sorte de boucle infinie où un manque de sensibilisation engendre un manque de prise en charge du navigateur. Ainsi, même si les quatre API que nous avons abordées sont très intéressantes, votre kilométrage variera inévitablement lorsqu’il s’agira de les utiliser dans un environnement de production. Veuillez avancer avec prudence et vous référer à Puis-je utiliser pour obtenir les dernières informations d’assistance, ou vérifiez vos propres appareils en utilisant Vérification de l’API Web.

(gg, ouais)