Семь JavaScript Web API для создания футуристического сайта, о которых вы могли не слышать

Разработчики регулярно получают новые инструменты и API. Но было обнаружено, что из более 100+ API только 5% активно используются программистами.

Веб-девелопер и блогер Тапайоти Босе сделал подборку из семи футуристических JavaScript Web API в своем блоге, а мы перевели этот список для вашего комфорта. Апишки помогут сделать ваш сайт еще более крутым и инновационным.

Web Speech

Web Speech API позволяет включать голосовые данные в веб-приложения. Web Speech API состоит из двух частей: Speech Synthesis (превращение текста в речь) и Speech Recognition (асинхронное распознавание речи).

// Speech Synthesis
const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance("Hello World");
synth.speak(utterance);

// Speech Recognition
const SpeechRecognition =
window.SpeechRecognition ?? window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.start();
recognition.onresult = (event) => {
const speechToText = event.results[0][0].transcript;
console.log(speechToText);
};

Примечания:

• Несмотря на то, что Speech Synthesis поддерживается всеми основными браузерами с 96% охватом, Speech Recognition все еще немного рано использовать, потому что оно имеет охват только 86%.
• API нельзя использовать без взаимодействия с пользователем (например, клик, нажатие клавиши и т.п.).

Page Visibility

Page Visibility API позволяет проверить, видима ли страница или нет. Это полезно, когда вы хотите приостановить видео.

Существует два способа выполнить эту проверку:

// Method 1
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === "visible") {
document.title = "Visible";
return;
}
document.title = "Not Visible";
});

// Method 2
window.addEventListener("blur", () => {
document.title = "Not Visible";
});
window.addEventListener("focus", () => {
document.title = "Visible";
});

Разница между этими двумя способами состоит в том, что второй будет активирован, если вы перейдете в другое приложение или на другую вкладку, тогда как первый будет активирован, только если вы перейдете на другую вкладку.

Accelerometer

Accelerometer API позволяет получить доступ к данным ускорения с устройства.

Это можно использовать для создания игр, которые используют управление движением устройства, или добавляют взаимодействие, если пользователь трясет устройство.

const acl = new Accelerometer({ frequency: 60 });

acl.addEventListener("reading", () => {
const vector = [acl.x, acl.y, acl.z];
const magnitude = Math.sqrt(vector.reduce((s, v) => s + v * v, 0));
if (magnitude > THRESHOLD) {
console.log("I feel dizzy!");
}
});

acl.start();

Вы можете запросить разрешение акселерометра с помощью:

navigator.permissions.query({ name: "accelerometer" }).then((result) => {
if (result.state === "granted") {
// now you can use accelerometer api
} 
});

Geolocation

Geolocation API позволяет получить доступ к местонахождению пользователя.

Это может быть очень полезным, если вы создаете что-то, связанное с картами или службами на основе местоположения.

navigator.geolocation.getCurrentPosition(({ coords }) => {
console.log(coords.latitude, coords.longitude);
});

Вы можете запросить разрешение геолокации с помощью:

navigator.permissions.query({ name: "geolocation" }).then((result) => {
if (result.state === "granted") {
// now you can use geolocation api
} 
});

Web Worker

Web Worker позволяет запускать операцию скрипта на фоне, отдельном от основного потока выполнения веб-приложения. Преимуществом этого является то, что трудоемкая обработка может выполняться в отдельном потоке, позволяя главному (обычно пользовательскому интерфейсу) потоку работать без блокировки/замедления.

// main.js
const worker = new Worker("worker.js");
worker.onmessage = (e) => console.log(e.data);
worker.postMessage([5, 3]);

// worker.js
onmessage = (e) => {
const [a, b] = e.data;
postMessage(a + b);
};

Resize Observer

API Resize Observer позволяет наблюдать за размером элемента и легко изменять.

Это очень полезно, если у вас есть сайдбар с переменным размером.

const sidebar = document.querySelector(".sidebar");
const observer = new ResizeObserver((entries) => {
const sidebar = entries[0];
//Do something with the element's new dimensions
});
observer.observe(sidebar);

Notification

Ах, уведомления! Маленькие надоедливые всплывающие окна (или пузырьки дофамина, в зависимости от вашего настроения).

Notification API, как следует из названия, позволяет вам посылать уведомления, чтобы раздражать пользователей (соедините его с Page Visibility API, чтобы раздражать их еще больше 😈).

Notification.requestPermission().then((permission) => {
if (permission === "granted") {
new Notification("Hi there!", {
body: "Notification body",
icon: "https://tapajyoti-bose.vercel.app/img/logo.png",
});
}
});

Примечание

Некоторые из вышеперечисленных API все еще находятся на экспериментальной стадии и поддерживаются не всеми браузерами. Итак, если вы хотите использовать их, вам следует проверить, поддерживает ли их браузер

К примеру:

if ("SpeechRecognition" in window || "webkitSpeechRecognition" in window) {
// Speech Recognition is supported
}

Надеемся, что эти апишки пригодятся вам и сделают ваш сайт лучшим.