Фото до статті
Андрій Губін
Журналіст
Програмісти постійно отримують нові інструменти та програмні інтерфейси. Однак було виявлено, що з понад 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 для створення футуристичного сайту, про які ви могли не чути
Джерело