Фото до статті
Андрій Губін
Журналіст
Девелопери постійно отримують нові інструменти та програмні інтерфейси. Однак було виявлено, що з понад 100 API лише 5% активно використовуються програмістами.
Веб-розробник та блогер Тапайоті Босе підготував добірку з семи футуристичних JavaScript Web API у своєму блозі, яку ми переклали для вашої зручності. Ці API допоможуть зробити ваш сайт ще більш вражаючим та інноваційним.
Web Speech
Web Speech API надає можливість інтегрувати голосові дані у веб-додатки. Він складається з двох компонентів: Speech Synthesis (синтез мовлення, перетворення тексту на мову) та Speech Recognition (розпізнавання мовлення, перетворення мови на текст, яке відбувається асинхронно).
// Speech Synthesisconst synth = window.speechSynthesis;const utterance = new SpeechSynthesisUtterance(“Hello World”);synth.speak(utterance);// Speech Recognitionconst 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 1document.addEventListener(“visibilitychange”, () => {if (document.visibilityState === “visible”) {document.title = “Visible”;return;}document.title = “Not Visible”;});// Method 2window.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.jsconst worker = new Worker(“worker.js”);worker.onmessage = (e) => console.log(e.data);worker.postMessage([5, 3]);// worker.jsonmessage = (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}
Сподіваємося, ці API стануть вам у нагоді та допоможуть зробити ваш сайт найкращим.
Головна > Веб-розробка > Сім JavaScript Web API для створення футуристичного сайту, про які ви могли не чути