Розробники регулярно отримують нові інструменти та API. Але було виявлено, що з понад 100+ API лише 5% активно використовуються програмістами.
Веб-девелопер та блогер Тапайоті Босе зробив підбірку з семи футуристичних JavaScript Web API в своєму блозі, а ми переклали цей список для вашого комфорту. Апішки допоможуть зробити ваш сайт ще більше крутим та іноваціним.
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);
};
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 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 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 дає змогу запускати операцію скрипта на фоні, окремому від основного потоку виконання веб-програми. Перевагою цього є те, що трудомістка обробка може виконуватися в окремому потоці, дозволяючи головному (зазвичай інтерфейсу користувача) потоку працювати без блокування/уповільнення.
// 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);
};
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 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
}
Сподіваємося, що ці апішки стануть вам у нагоді і зроблять ваш сайт найкращим.
Парламент розглядає дві моделі економічного бронювання, наразі тривають дискусії. Про це повідомила УП з посиланням…
Сервіс GitHub, який належить Microsoft, випустив Copilot Chat на iOS та Android. GitHub Copilot Chat…
Компанія OpenAI видалила два величезних набори даних «books1» і «books2», які використовувалися для навчання моделі…
В реєстрі військовозообов'язаних «Оберіг» буде відображатися статус отримання повістки. Але цей процес буде відбуватися згідно…
Корпорація Microsoft в світлі останніх подій вирішила прив'язати зарплати керівників до функціонування систем безпеки: якщо…
Українські програмісти створили безплатну гру-головоломку Lağoda QT. Кожен рівень — вірш одного з видатних кримськотатарських…