Въведение вAPI на браузъра

Пейзажът на уеб разработката се развива бързо. Всяка година браузърите придобиват нови възможности, които могат да опростят процеса на кодиране. С нарастването на модерните уеб приложения разработчиците имат достъп до набор от мощни инструменти директно в браузъра, елиминирайки необходимостта от прекомерни библиотеки и рамки.

В тази статия ще проучим10 недостатъчно използвани API на браузъракоито могат да ви помогнат да решавате често срещани проблеми по-ефективно. Защо да претрупвате проекта си с библиотеки, когато браузърът може да свърши тежката работа?

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

1. API за структурирано клониране

API за структурирано клониране променя играта за копиране на обекти. За много разработчици копирането на обекти винаги е било трудна задача, често изискваща библиотеки или сложни функции. С този API можете да създадете дълбоко копие на обект без усилие:

const копие = structuredClone(оригинал);

Този едноредов ред решава много проблеми:

Обработва сложни типове данни катоКарта, Комплект, иПетно.
Управлява кръгови препратки, без да срива кода ви.
Забележка: Не клонира функции, което е ключов аспект, който трябва да запомните.

Например, помислете кога трябва да копирате сложен обект, който включва вложени масиви или обекти. Използването на традиционни методи като JSON сериализация може да доведе до загуба на данни или грешки, особено при кръгови препратки. API за структурирано клониране елиминира тези опасения, осигурявайки безпроблемен начин за дублиране на вашите данни.

поддръжка:Предлага се в модерни браузъри като Chrome, Firefox и Safari, което го прави безопасен за производствена употреба.

Практически съвет: Когато използвате този API, винаги проверявайте съвместимостта на браузъра, за да сте сигурни, че вашето приложение работи последователно в различни среди.

2. API за производителност

Когато става въпрос за измерване на ефективността, API за ефективност често се пренебрегва. Вместо да разчитате на инструменти на трети страни, можете да използвате този API, за да проследявате и сравнявате ефективността на вашия код:

performance.mark("старт");
// код за измерване
performance.mark("край");
performance.measure("calc", "start", "end");
console.log(performance.getEntriesByName("calc"));

Това може да ви помогне да определите:

Кои функции са по-бързи.
Ако оптимизациите наистина са от полза.
Независимо дали си струва да се внедри Worker или WASM.

Например, ако разработвате сложно уеб приложение, което обработва потребителски данни, можете да използвате API за ефективност, за да сравните специфични функции или функции. Чрез измерване на времето за изпълнение можете да идентифицирате тесните места и да оптимизирате съответно.

В допълнение, API за производителност ви позволява да регистрирате подробни показатели за производителност, които могат да бъдат безценни за отстраняване на грешки или оптимизиране на вашето приложение. Можете да видите тези показатели в инструментите за разработчици на браузъра в раздела за ефективност.

поддръжка:Работи отлично във всички съвременни браузъри.

Практически съвет: Използвайте API за производителност по време на разработката, за да съберете данни за производителността на вашия код. Тази информация може да насочи вашите усилия за оптимизация и да подобри потребителското изживяване.

3. API за видимост на страницата

Някога чудили ли сте се какво се случва, когато потребител превключва раздели? С API за видимост на страницата можете да установите кога вашият раздел е активен или не:

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

Този API е невероятно полезен за:

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

📦

API за структурирано клониране
Копирайте без усилие сложни обекти.

📈

API за производителност
Измервайте и подобрявайте уеб ефективността.

👀

API за видимост на страницата
Открийте кога страницата е видима.

📏

ResizeObserver
Реагирайте на промените в размера на елемента.

🔍

Наблюдател на кръстовището
Следете видимостта на елементите.

Пауза на видеоклипове, когато потребителят не е ангажиран.
Спиране на ненужни заявки за анкета за подобряване на производителността.
Намаляване на използването на процесора за пестене на живота на батерията на мобилни устройства.

Например, ако разработвате приложение за стрийминг на видео, можете да използвате API за видимост на страницата, за да поставите на пауза видеоклип, когато потребителят се отдалечи от раздела. Това не само подобрява потребителското изживяване, но също така запазва честотната лента и сървърните ресурси.

Освен това можете да внедрите функции за анализ, които проследяват ангажираността на потребителите въз основа на промени във видимостта. Тези данни могат да ви помогнат да разберете как потребителите взаимодействат с вашето приложение и кои функции са най-привлекателни.

поддръжка:Съвместим с всички съвременни браузъри.

Практически съвет: Винаги тествайте функцията за видимост в различни сценарии, като превключване на раздели, минимизиране на браузъра или превключване към друго приложение, за да сте сигурни, че се държи според очакванията.

4. ResizeObserver

За адаптивен дизайн следенето на размерите на елементите може да бъде караница. API на ResizeObserver ви позволява да наблюдавате промените в размера на елемент:

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

Този API е облекчение за разработчиците, които са се сблъсквали с тромава логика за преоразмеряване в миналото. Сега браузърът може да се справи вместо вас!

Представете си изграждане на табло за управление с различни джаджи, които трябва да коригират оформлението си въз основа на размера на прозореца за изглед. ResizeObserver може да ви помогне да откриете, когато потребителят преоразмерява прозореца или променя размера на конкретен елемент, което ви позволява да пренаредите потребителския си интерфейс динамично.

поддръжка:Широко достъпен в съвременните браузъри.

Практически съвет: Използвайте ResizeObserver, за да подобрите потребителското изживяване, като гарантирате, че оформлението на приложението ви реагира плавно на промените в размера. Това е особено полезно за адаптивни дизайни, където елементите трябва да се адаптират безпроблемно.

5. Intersection Observer API

Друг мощен инструмент е API на Intersection Observer. Това ви позволява да наблюдавате кога даден елемент влиза или излиза от прозореца за изглед:

const наблюдател = нов IntersectionObserver(записи => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Зареждане на съдържание или задействане на анимации
    }
  });
});
observer.observe(targetElement);

Случаите на употреба включват:

Мързеливо зареждане на изображения за по-добра производителност и по-бързо зареждане на страницата.
Задействане на анимации, когато елементите попаднат в изгледа за по-ангажиращо потребителско изживяване.
Подобряване на потребителското изживяване чрез зареждане на съдържание според нуждите, намаляване на първоначалното време за зареждане.

Например, ако имате дълга статия с изображения, можете да заредите изображения само когато са на път да влязат в прозореца за изглед. Това намалява първоначалното време за зареждане и спестява честотна лента, особено за потребители на мобилни устройства.

Освен това API на Intersection Observer може да помогне с анализите, като проследява колко потребители превъртат до конкретни секции от вашата уеб страница, като ви дава ценна информация за ангажираността на потребителите.

поддръжка:Предлага се в съвременните браузъри.

Практически съвет: Внедрете API на Intersection Observer за оптимизиране на производителността, особено в приложения с голямо съдържание. Това ще ви помогне да създадете по-гладко изживяване за потребителите, като същевременно пестите ресурси.

6. API за извличане

Отминаха дните на XMLHttpRequest. Fetch API опростява процеса на правене на мрежови заявки:

извличане (url)
  .then(response => response.json())
  .then(данни => console.log(данни));

С този API можете лесно:

Обработвайте различни типове отговори, като JSON, текст и петна.
Използвайте async/await за по-чист и по-четлив код.
Задайте персонализирани заглавки за вашите заявки, което го прави гъвкав за различни API.

Например може да се наложи да извлечете потребителски данни от REST API. С Fetch API можете да пишете кратък и четим код, който обработва асинхронния характер на мрежовите заявки без сложността на обратните извиквания.

Освен това Fetch API поддържа обещания, което улеснява работата с верижни заявки или грациозно обработване на грешки. Можете също така лесно да управлявате различни статуси на отговор, осигурявайки стабилен начин за управление на мрежовите взаимодействия.

поддръжка:Поддържа се от всички съвременни браузъри.

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

7. API за уеб съхранение

Запазването на потребителски предпочитания или данни за сесии никога не е било по-лесно с API за уеб съхранение. Предоставя две основни опции за съхранение:

localStorageза постоянни данни, които оцеляват след опресняване на страницата.
sessionStorageза временни данни, които продължават само за продължителността на сесията на страницата.

Пример:

Използване на API за структурирано клониране

Създайте оригинален обект

Дефинирайте обекта за копиране.

Извикване на structuredClone()

Използвайте API, за да клонирате обекта.

Сложни типове дръжки

Поддържа Map, Set и Blob.

Избягвайте клонирането на функции

Не забравяйте, че не клонира функции.

localStorage.setItem('ключ', 'стойност');
const value = localStorage.getItem('ключ');

Този API е особено полезен за:

Съхраняване на потребителски предпочитания, като например настройки на тема или избор на език.
Управление на данни от сесията, като потребителски токени за удостоверяване.
Проследяване на артикулите в количката за пазаруване, без да е необходимо решение от страна на сървъра.

Например, ако изграждате сайт за електронна търговия, можете да използвате API за уеб съхранение, за да запомните артикулите, които потребителят добавя в количката си, дори ако напусне или обнови страницата.

поддръжка:Поддържа се от всички съвременни браузъри.

Практически съвет: Използвайте localStorage за данни, които искате да запазите през сесиите, и sessionStorage за данни, които са подходящи само по време на едно посещение. Винаги имайте предвид последиците за сигурността, когато съхранявате чувствителна информация.

8. API за уеб известия

API за уеб известия позволява на уеб приложенията да показват известия на потребителите. Тази функция може да подобри ангажираността на потребителите, като ги държи информирани дори когато не използват активно вашето приложение:

if (Notification.permission !== "granted") {
  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(response => {
        връщане на отговор || извличане (event.request);
      })
  );
});

С Service Workers можете:

Кеширайте ресурси, за да направите приложението си достъпно офлайн.
Прихващане на мрежови заявки за обслужване на кеширано съдържание или резервни отговори.
Активирайте насочените известия, за да поддържате ангажираността на потребителите.

Например, ако създавате прогресивно уеб приложение (PWA), Service Workers са от съществено значение за осигуряване на безпроблемно офлайн изживяване. Потребителите могат да продължат да взаимодействат с вашето приложение дори без интернет връзка и всички промени ще се синхронизират, след като отново са онлайн.

поддръжка:Поддържа се в съвременните браузъри, но винаги проверявайте съвместимостта преди внедряване.

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

10. API за уеб споделяне

API за уеб споделяне позволява на потребителите да споделят съдържание от вашето уеб приложение с други приложения на устройството си, като например социални медии:

navigator.share({
  заглавие: „API за уеб споделяне“,
  текст: 'Вижте това съдържание!',
  url: 'https://example.com',
}).тогава(() => {
  console.log('Съдържанието е споделено успешно!');
}).catch((грешка) => {
  console.error('Грешка при споделяне:', грешка);
});

Основните характеристики на API за уеб споделяне включват:

Лесно споделяне на текст, URL адреси и други формати на данни.
Роден диалогов прозорец за споделяне, който се интегрира с устройството на потребителя.
Подобрена ангажираност на потребителите чрез насърчаване на споделянето.

Например, ако имате публикация в блог, можете да позволите на потребителите да я споделят в своите социални медии директно от вашия уебсайт. Тази функция може значително да увеличи обхвата и ангажираността на вашето съдържание.

поддръжка:Предлага се в повечето съвременни браузъри с мобилна поддръжка.

Практически съвет: Преди да използвате API за уеб споделяне, проверете дали устройството на потребителя го поддържа. Осигурете резервна опция за споделяне, ако API не е наличен, за да осигурите безпроблемно изживяване.

Заключение

Използването на API на браузъра може значително да подобри вашите уеб приложения без необходимост от допълнителни библиотеки. В тази статия разгледахме 10 мощни API, включително Structured Clone API, Performance API и др. Всеки от тези инструменти може да помогне за опростяване на вашия код и подобряване на производителността.

Готови ли сте да пренесете уменията си за уеб разработка на следващото ниво? Разгледайте тези API в следващия си проект и вижте как могат да работят за вас. За допълнително четене относно инструменти, които могат да подобрят вашата продуктивност, вижте нашияконвертор на изображение в GIFибезплатен конвертор на видео в mp3.

За повече информация относно най-новите постижения в уеб технологиите посететеOpenAIиПрегръщащо лице.