Вступ доAPI браузера

Ландшафт веб-розробки швидко розвивається. Щороку браузери отримують нові можливості, які можуть спростити ваш процес кодування. З появою сучасних веб-додатків розробники мають доступ до набору потужних інструментів безпосередньо в браузері, що усуває потребу в надмірних бібліотеках і фреймворках.

У цій статті ми розглянемо10 недостатньо використовуваних API браузераякі можуть допомогти вам ефективніше вирішувати типові проблеми. Навіщо захаращувати свій проект бібліотеками, якщо браузер може виконати важку роботу?

Незалежно від того, чи ви досвідчений розробник, чи тільки починаєте працювати, ці API можуть здивувати вас своєю простотою та потужністю. Давайте поглибимося безпосередньо та побачимо, як ці інструменти можуть покращити ваші веб-програми.

1. Structured Clone API

Structured Clone API змінює гру для копіювання об’єктів. Для багатьох розробників копіювання об’єктів завжди було складним завданням, яке часто вимагало бібліотек або складних функцій. За допомогою цього API ви можете легко створити глибоку копію об’єкта:

const copy = structuredClone(оригінал);

Цей однорядковий вирішує багато проблем:

Обробляє складні типи даних, наприкладКарта, встановити, іБлоб.
Керує циклічними посиланнями без збою коду.
Примітка. Функції не клонуються, про що важливо пам’ятати.

Наприклад, подумайте, коли вам потрібно скопіювати складний об’єкт, який містить вкладені масиви або об’єкти. Використання традиційних методів, таких як серіалізація JSON, може призвести до втрати даних або помилок, особливо з циклічними посиланнями. Structured Clone API усуває ці проблеми, надаючи простий спосіб дублювати ваші дані.

підтримка:Доступний у сучасних браузерах, таких як Chrome, Firefox і Safari, що робить його безпечним для робочого використання.

Практична порада: використовуючи цей API, завжди перевіряйте сумісність браузера, щоб переконатися, що ваша програма працює однаково в різних середовищах.

2. API продуктивності

Коли справа доходить до вимірювання продуктивності, Performance API часто ігнорують. Замість того, щоб покладатися на інструменти сторонніх розробників, ви можете використовувати цей API для відстеження та порівняння продуктивності свого коду:

performance.mark("початок");
// код для вимірювання
performance.mark("кінець");
performance.measure("calc", "start", "end");
console.log(performance.getEntriesByName("calc"));

Це може допомогти вам визначити:

Які функції швидше.
Якщо оптимізація дійсно приносить користь.
Незалежно від того, чи варто впровадження Worker або WASM.

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

Крім того, Performance API дозволяє реєструвати докладні показники продуктивності, які можуть бути безцінними для налагодження чи оптимізації вашої програми. Ви можете переглянути ці показники в інструментах розробника веб-переглядача на вкладці продуктивності.

підтримка:Чудово працює у всіх сучасних браузерах.

Практична порада: використовуйте Performance API під час розробки, щоб збирати дані про продуктивність коду. Ця інформація може керувати вашими зусиллями з оптимізації та покращити взаємодію з користувачем.

3. API видимості сторінки

Ви коли-небудь замислювалися, що відбувається, коли користувач перемикає вкладки? За допомогою API видимості сторінки ви можете визначити, активна чи ні ваша вкладка:

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    video.pause();
  }
});

Цей API неймовірно корисний для:

Ключові API браузера, які варто знати

📦

Structured Clone API
Копіюйте складні об’єкти без зусиль.

📈

API продуктивності
Вимірюйте та покращуйте веб-продуктивність.

👀

API видимості сторінки
Визначати, коли сторінка видима.

📏

ResizeObserver
Реагувати на зміни розміру елемента.

🔍

Перехрестя Спостерігач
Контроль видимості елементів.

Призупинення відео, коли користувач не залучений.
Припинення непотрібних запитів на опитування для підвищення продуктивності.
Зменшення використання процесора для збереження заряду акумулятора на мобільних пристроях.

Наприклад, якщо ви розробляєте програму потокового відео, ви можете використовувати API видимості сторінки, щоб призупинити відео, коли користувач відходить від вкладки. Це не тільки покращує взаємодію з користувачем, але й зберігає пропускну здатність і ресурси сервера.

Крім того, ви можете реалізувати функції аналітики, які відстежують залучення користувачів на основі змін видимості. Ці дані можуть допомогти вам зрозуміти, як користувачі взаємодіють із вашою програмою та які функції є найбільш привабливими.

підтримка:Сумісний з усіма сучасними браузерами.

Практична порада. Завжди перевіряйте функцію видимості в різних сценаріях, наприклад перемикання вкладок, згортання браузера або перемикання в іншу програму, щоб переконатися, що вона працює належним чином.

4. ResizeObserver

Для адаптивного дизайну відстеження розмірів елементів може бути складним завданням. API ResizeObserver дозволяє відстежувати зміни розміру елемента:

const ro = новий ResizeObserver(entries => {
  для (постійний запис записів) {
    console.log(entry.contentRect.width);
  }
});
ro.observe(елемент);

Цей API є полегшенням для розробників, які в минулому мали справу з громіздкою логікою зміни розміру. Тепер браузер може впоратися з цим за вас!

Уявіть, що ви створюєте інформаційну панель із різноманітними віджетами, макет яких потрібно налаштувати відповідно до розміру вікна перегляду. ResizeObserver може допомогти вам виявити, коли користувач змінює розмір вікна або розмір певного елемента, дозволяючи динамічно змінювати ваш інтерфейс користувача.

підтримка:Широко доступний у сучасних браузерах.

Практична порада: використовуйте ResizeObserver, щоб покращити взаємодію з користувачем, гарантуючи, що макет вашої програми плавно реагує на зміни розміру. Це особливо корисно для адаптивних дизайнів, де елементи повинні легко адаптуватися.

5. Intersection Observer API

Іншим потужним інструментом є Intersection Observer API. Це дозволяє відстежувати, коли елемент входить або виходить з вікна перегляду:

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Завантажити вміст або активувати анімацію
    }
  });
});
observer.observe(targetElement);

Варіанти використання включають:

Відкладене завантаження зображень для кращої продуктивності та швидшого завантаження сторінки.
Запуск анімації, коли елементи з’являються в полі зору, для більшої взаємодії з користувачем.
Покращення взаємодії з користувачем шляхом завантаження вмісту за потреби, скорочення початкового часу завантаження.

Наприклад, якщо у вас є довга стаття із зображеннями, ви можете завантажувати зображення лише тоді, коли вони збираються увійти у вікно перегляду. Це зменшує початковий час завантаження та зберігає пропускну здатність, особливо для користувачів мобільних пристроїв.

Крім того, API Intersection Observer може допомогти з аналітикою, відстежуючи, скільки користувачів прокручують певні розділи вашої веб-сторінки, надаючи вам цінну інформацію про залучення користувачів.

підтримка:Доступно в сучасних браузерах.

Практична порада: запровадьте API Intersection Observer для оптимізації продуктивності, особливо в додатках із великим вмістом. Це допоможе вам створити більш зручну роботу для користувачів, а також заощадить ресурси.

6. Fetch API

Часи XMLHttpRequest минули. Fetch API спрощує процес створення мережевих запитів:

вибірка (url)
  .then(response => response.json())
  .then(дані => console.log(дані));

За допомогою цього API ви можете легко:

Обробляти різні типи відповідей, наприклад JSON, текст і blobs.
Використовуйте async/await для більш чистого та читабельного коду.
Встановіть спеціальні заголовки для ваших запитів, що робить його гнучким для різних API.

Наприклад, вам може знадобитися отримати дані користувача з REST API. За допомогою Fetch API ви можете писати стислий і читабельний код, який обробляє асинхронний характер мережевих запитів без складності зворотних викликів.

Крім того, Fetch API підтримує обіцянки, полегшуючи роботу з ланцюжковими запитами або вишукану обробку помилок. Ви також можете легко обробляти різні статуси відповідей, забезпечуючи надійний спосіб керування мережевими взаємодіями.

підтримка:Підтримується всіма сучасними браузерами.

Практична порада: використовуйте Fetch API для всіх ваших мережевих запитів, щоб покращити читабельність і зручність обслуговування. Не забувайте належним чином обробляти помилки, щоб забезпечити безперебійну роботу користувача.

7. API веб-сховища

Збереження налаштувань користувача або даних сеансу ніколи не було таким простим за допомогою API веб-сховища. Він надає два основних варіанти зберігання:

localStorageдля постійних даних, які зберігаються після оновлення сторінки.
sessionStorageдля тимчасових даних, які зберігаються лише протягом сеансу сторінки.

приклад:

Використання Structured Clone API

Створити оригінальний об'єкт

Визначте об’єкт для копіювання.

Виклик structuredClone()

Використовуйте API для клонування об’єкта.

Обробка складних типів

Підтримує Map, Set і Blob.

Уникайте клонування функцій

Пам’ятайте, що він не клонує функції.

localStorage.setItem('ключ', 'значення');
значення const = localStorage.getItem('ключ');

Цей API особливо корисний для:

Зберігання налаштувань користувача, наприклад налаштувань теми або вибору мови.
Керування даними сеансу, як-от маркери автентифікації користувача.
Відстеження товарів у кошику для покупок без використання рішення на стороні сервера.

Наприклад, якщо ви створюєте сайт електронної комерції, ви можете використовувати API веб-сховища, щоб запам’ятовувати товари, які користувач додає до свого кошика, навіть якщо він переходить або оновлює сторінку.

підтримка:Підтримується всіма сучасними браузерами.

Практична порада: використовуйте localStorage для даних, які ви хочете зберігати протягом сеансів, і sessionStorage для даних, які є релевантними лише під час одного відвідування. Завжди пам’ятайте про наслідки безпеки під час зберігання конфіденційної інформації.

8. API веб-повідомлень

API веб-сповіщень дозволяє веб-додаткам відображати сповіщення користувачам. Ця функція може посилити залучення користувачів, тримаючи їх в курсі, навіть якщо вони не активно використовують вашу програму:

if (Notification.permission !== "надано") {
  Notification.requestPermission();
}

const notification = new Notification("Привіт!", {
  body: "Це сповіщення!",
});

Варіанти використання включають:

Сповіщення користувачів про нові повідомлення або оновлення в програмі чату.
Сповіщення користувачів про важливі події, як-от нагадування або крайні терміни.
Надання зворотного зв’язку після дії користувача, наприклад надсилання форми.

Наприклад, якщо ви розробляєте програму обміну повідомленнями, ви можете використовувати API веб-повідомлень, щоб сповіщати користувачів про нові повідомлення під час перегляду інших вкладок або програм.

Впровадження сповіщень може значно покращити роботу користувача, гарантуючи, що користувачі залишатимуться в курсі важливих оновлень без необхідності постійно перевіряти програму.

підтримка:Доступний у більшості сучасних браузерів.

Практична порада. Завжди запитуйте дозвіл користувача перед надсиланням сповіщень, щоб забезпечити позитивну взаємодію з користувачем. Надайте значущий вміст у сповіщеннях, щоб заохотити користувачів до взаємодії.

9. Працівники сфери послуг

Service Workers — це потужна функція, яка дозволяє запускати сценарії у фоновому режимі окремо від веб-сторінки. Це вмикає такі функції, як підтримка офлайн і фонова синхронізація:

self.addEventListener('install', event => {
  // Виконання кроків встановлення
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(відповідь => {
        зворотна відповідь || fetch(event.request);
      })
  );
});

З Service Workers ви можете:

Кешуйте ресурси, щоб ваша програма була доступною офлайн.
Перехоплення мережевих запитів для надання кешованого вмісту або резервних відповідей.
Увімкніть push-сповіщення, щоб зацікавити користувачів.

Наприклад, якщо ви створюєте прогресивну веб-програму (PWA), Service Workers необхідні для забезпечення бездоганної роботи в режимі офлайн. Користувачі можуть продовжувати взаємодіяти з вашою програмою навіть без підключення до Інтернету, і будь-які зміни синхронізуються, коли вони знову підключаться до мережі.

підтримка:Підтримується в сучасних браузерах, але завжди перевіряйте сумісність перед впровадженням.

Практична порада: використовуйте API `cache` у своїх Service Workers, щоб зберігати важливі ресурси та покращувати час завантаження для користувачів, які повертаються. Переконайтеся, що ваші Service Workers зареєстровані та активовані правильно для оптимальної продуктивності.

10. Web Share API

API Web Share дозволяє користувачам ділитися вмістом із вашої веб-програми з іншими програмами на своєму пристрої, наприклад соціальними мережами:

navigator.share({
  title: 'Web Share API',
  text: 'Перегляньте цей вміст!',
  url: 'https://example.com',
}).then(() => {
  console.log('Вміст успішно надіслано!');
}).catch((помилка) => {
  console.error('Помилка обміну:', помилка);
});

Основні функції API Web Share включають:

Легкий обмін текстом, URL-адресами та іншими форматами даних.
Власне діалогове вікно спільного доступу, яке інтегрується з пристроєм користувача.
Покращене залучення користувачів шляхом заохочення обміну.

Наприклад, якщо у вас є допис у блозі, ви можете дозволити користувачам ділитися ним у своїх соціальних мережах безпосередньо з вашого веб-сайту. Ця функція може значно збільшити охоплення та залучення вашого вмісту.

підтримка:Доступний у більшості сучасних браузерів із підтримкою мобільних пристроїв.

Практична порада: перед використанням API Web Share перевірте, чи пристрій користувача підтримує його. Надайте резервний варіант для спільного використання, якщо API недоступний, щоб забезпечити безперебійну роботу.

Висновок

Використання API браузера може значно покращити ваші веб-додатки без необхідності використання додаткових бібліотек. У цій статті ми розглянули 10 потужних API, включаючи Structured Clone API, Performance API тощо. Кожен із цих інструментів може допомогти спростити ваш код і підвищити продуктивність.

Ви готові підняти свої навички веб-розробки на новий рівень? Дослідіть ці API у своєму наступному проекті та подивіться, як вони можуть працювати для вас. Щоб дізнатися більше про інструменти, які можуть підвищити вашу продуктивність, перегляньте нашконвертер зображення в GIFібезкоштовний конвертер відео в MP3.

Для отримання додаткової інформації про останні досягнення в області веб-технологій відвідайтеOpenAIіОбіймати обличчя.