[Перевод] 7 интересных API на JavaScript для создания веб-сайтов, о которых вы (скорее всего) не знали
Введение
В связи с быстро меняющимися технологиями разработчикам предоставляются невероятные новые инструменты и технологии. Но было замечено, что различные функции и возможности API не так активно используются, и многие даже не знают о них.
Давайте взглянем на некоторые полезные веб-API, которые могут помочь вам поднять ваш сайт до небес!
1. Screen Capture API
Полезная информация: статья на Хабре. В ней вы также можете найти спеку по нему и ссылку MDN.
API Screen Capture, как следует из названия, позволяет захватывать содержимое экрана, что упрощает процесс создания screen recorder. Вам нужен видеоэлемент для отображения захваченного экрана (). Кнопка «Start» запустит захват экрана.
const previewElem = document.getElementById("preview");
const startBtn = document.getElementById("start");
async function startRecording() {
previewElem.srcObject =
await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true,
});
}
startBtn.addEventListener("click", startRecording);2. Web Share API
Полезная информация: MDN, Введение в Web Share API.
Web Share API позволяет вам обмениваться текстом, ссылками и даже файлами с веб-страницы с другими приложениями, установленными на устройстве.
async function shareHandler() {
navigator.share({
title: "Tapajyoti Bose | Portfolio",
text: "Check out my website",
url: "https://tapajyoti-bose.vercel.app/",
});
}ПРИМЕЧАНИЕ: Чтобы использовать Web Share API, вам необходимо взаимодействие с пользователем. Например, нажатие кнопки или событие касания.
3. Intersection Observer API
Полезная информация: статья на Хабре, MDN.
Intersection Observer API позволяет вам определять, когда элемент входит в область просмотра или покидает ее. Это полезно для реализации бесконечной прокрутки.
ПРИМЕЧАНИЕ: В демо-версии используется React из-за моих личных предпочтений, но вы можете использовать любой фреймворк (библиотеку) или ванильный JavaScript.
4. Clipboard API
Полезная информация: статья на Хабре, MDN.
Clipboard API позволяет вам считывать и записывать данные в буфер обмена. Это полезно для реализации функции копирования в буфер обмена.
async function copyHandler() {
const text = "https://tapajyoti-bose.vercel.app/";
navigator.clipboard.writeText(text);
}5. Screen Wake Lock API
Полезная информация: MDN.
Вы когда-нибудь задумывались, как YouTube предотвращает выключение экрана во время воспроизведения видео? Ну, это из-за API блокировки пробуждения экрана.
let wakeLock = null;
async function lockHandler() {
wakeLock = await navigator.wakeLock.request("screen");
}
async function releaseHandler() {
await wakeLock.release();
wakeLock = null;
}ПРИМЕЧАНИЕ: Вы можете использовать API блокировки пробуждения экрана только в том случае, если страница уже видна на экране. В противном случае это выдало бы ошибку.
6. Screen Orientation API
Полезная информация: MDN.
API ориентации экрана позволяет вам проверять текущую ориентацию экрана и даже привязывать его к определенной ориентации.
async function lockHandler() {
await screen.orientation.lock("portrait");
}
function releaseHandler() {
screen.orientation.unlock();
}
function getOrientation() {
return screen.orientation.type;
}
7. Fullscreen API
Полезная информация: статья на Хабре (2013 год), MDN.
Fullscreen API позволяет отображать элемент или всю страницу в полноэкранном режиме.
async function enterFullscreen() {
await document.documentElement.requestFullscreen();
}
async function exitFullscreen() {
await document.exitFullscreen();
}ПРИМЕЧАНИЕ: Чтобы использовать Fullscreen API, вам также необходимо взаимодействие с пользователем.
Заключение
Надеюсь, что перевод был полезен, и вы нашли что-то интересное для себя и своих проектов.
Вся 'Полезная информация' в этой статье была предоставлена лично от меня, но я могу также добавить в неё интересные статьи от вас, если вы скинете их мне в лс или комментарии.
Смело делитесь другими API и своими мыслями в комментариях, а ошибки в статье смело относите ко мне в лс, заранее спасибо!
Похожая статья на Хабре.
