7 веб-интерфейсов JavaScript для создания футуристичных сайтов

Добро пожаловать в будущее! Это статья о футуристических веб-интерфейсах JavaScript.

Мы представили 7 передовых веб-интерфейсов JavaScript, которые вы можете добавить в ваш проект и заставить пользователей расстаться со своими деньгами. >:- )

1. Web Speech

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

			// 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);
};
		

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

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

2. Page Visibility

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

Доступно 2 метода для выполнения этой проверки:

			// 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";
});
		

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

3. Акселерометр

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
    } 
  });
		

4. Геолокация

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
    } 
  });
		

5. Веб-воркер

Веб-воркеры позволяют выполнить операцию скрипта в фоновом потоке, отделенном от основного потока выполнения веб-приложения.

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

			// 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);
};
		

6. Наблюдатель изменения размера

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);
		

7. Уведомления

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

API уведомлений, как следует из названия, позволяет отправлять уведомления для раздражения пользователей (объедините его с 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
}
		

Заключение

Мы рассмотрели семь веб-интерфейсов JavaScript, которые могут придать вашим проектам футуристическое ощущение и привлечь ваших пользователей.

От использования голосовой технологии с помощью Web Speech API до работы с акселерометром и геолокацией, эти API предоставляют множество возможностей для улучшения функциональности и интерактивности веб-приложений.

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

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

Не стесняйтесь экспериментировать с этими инструментами и создавать будущее уже сейчас!