7 интересных API на JavaScript для создания веб-сайтов, о которых вы (скорее всего) не знали

Введение

В связи с быстро меняющимися технологиями разработчикам предоставляются невероятные новые инструменты и технологии. Но было замечено, что различные функции и возможности API не так активно используются, и многие даже не знают о них.

Давайте взглянем на некоторые полезные веб-API, которые могут помочь вам поднять ваш сайт до небес!

1. Screen Capture API

Полезная информация: статья на Хабре. В ней вы также можете найти спеку по нему и ссылку MDN.

API Screen Capture, как следует из названия, позволяет захватывать содержимое экрана, что упрощает процесс создания screen recorder. Вам нужен видеоэлемент для отображения захваченного экрана (<video>). Кнопка «Start» запустит захват экрана.

<video id="preview" autoplay>   Your browser doesn't support HTML5. </video> <button id="start" class="btn">Start</button>

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 и своими мыслями в комментариях, а ошибки в статье смело относите ко мне в лс, заранее спасибо!

Похожая статья на Хабре.