Сім 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
} 
});

Geo-location

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
}

Сподіваємося, що ці апішки стануть вам у нагоді і зроблять ваш сайт найкращим.