API de JavaScript que no conoces

1. API de visibilidad de página
   1. Casos de uso
   2. ¿Cómo usarlo?
   3. Apoyo
2. API para compartir web
   1. ¿Qué es?
   2. Casos de uso
   3. ¿Cómo usarlo?
   4. Apoyo
3. API de canal de transmisión
   1. ¿Qué es?
   2. Casos de uso
   3. ¿Cómo usarlo?
   4. Apoyo
4. API de internacionalización
   1. ¿Qué es?
   2. ¿Cómo usarlo?
   3. Apoyo
5. Conclusión

En este artículo, Juan Diego cubre las API menos conocidas pero extremadamente útiles, como la API de visibilidad de página, la API de uso compartido web, la API de canal de transmisión y la API de internacionalización. Juntos veremos qué son, dónde debemos utilizarlos y cómo utilizarlos.

Hace un par de días, revisé la increíble Encuesta sobre el estado de JS de 2021 . El estado de JS es una encuesta en línea que recopila datos de desarrolladores de todo el mundo para ver las tendencias más recientes y futuras en la comunidad de JavaScript. Entre los datos que recopila, una sección está dedicada a las características nativas que proporciona JavaScript, enumeradas por su uso y conocimiento. Como puede imaginar, entre las funciones más utilizadas se encuentran las populares como encadenamiento opcional , fusión nula , Websockets , etc.

Sin embargo, no estaba interesado en las API más utilizadas o conocidas. En cambio, estaba buscando los menos conocidos. Quería saber de qué API no estamos hablando lo suficiente y, entre ellas, encontré cuatro API bastante diferentes que son extremadamente útiles:

• API de visibilidad de página
• API para compartir web
• API de canal de transmisión
• API de internacionalización

En este artículo veremos qué son, dónde debemos utilizarlos y cómo utilizarlos.

Nota : todas estas API están disponibles en esta demostración .

API de visibilidad de página

Esta es una API web poco conocida que ocupa el cuarto lugar en reconocimiento en la encuesta State of JS . Te permite saber cuando un usuario ha abandonado la página. Para ser precisos, la API activa un evento cada vez que cambia el estado de visibilidad de la página, ya sea cuando el usuario minimiza o maximiza la ventana o cambia de pestaña.

En el pasado, había que utilizar trucos para saber si un usuario había cambiado de pestaña o minimizado la ventana. El más popular fue el uso de eventos del navegador blury focus. El uso de estos eventos daría como resultado algo como lo siguiente:

window.addEventListener("focus", function () { // User is back on the page // Do Something});window.addEventListener("blur", function () { // User left the page // Do Something});

El código anterior funciona pero no según lo previsto. Dado que el blurevento se activa cuando la página pierde el foco, se puede activar cuando el usuario hace clic en la barra de búsqueda, en un cuadro de diálogo de alerta, en la consola o en el borde de la ventana. Entonces, blury focussolo dinos si la página está activa pero no si el contenido de la página está oculto o visible.

Casos de uso

En general, queremos utilizar la API de visibilidad de página para detener procesos innecesarios cuando el usuario no ve la página o, por otro lado, para realizar acciones en segundo plano. Algunos casos específicos pueden ser:

• pausar vídeos, carruseles de imágenes o animaciones cuando el usuario abandona la página;
• si la página muestra datos en vivo de una API, detenga este comportamiento temporalmente mientras el usuario esté ausente;
• para enviar análisis de usuario.

¿Cómo usarlo?

La API de visibilidad de página trae dos propiedades y un evento para acceder al estado de visibilidad de la página:

• document.hidden
  Está disponible globalmente y es de solo lectura. Intente evitarlo ya que ahora está en desuso, pero cuando se accede, regresa truesi la página está oculta y falsesi está visible.
• document.visibilityState
  Es la versión actualizada de document.hidden, pero al acceder devuelve cuatro valores posibles según el estado de visibilidad de la página: - visible
  La página está visible, o para ser exactos, no está minimizada ni en otra pestaña. - hidden
  La página no es visible; está minimizado o en otra pestaña. - prerender
  Este es el estado inicial de una página visible cuando se está prerenderizando. El estado de visibilidad de una página puede comenzar en prerendery luego cambiar a otro estado, pero no puede cambiar de otro estado a prerender. - unloaded
  La página se está descargando de la memoria.
• visibilitychange
  Es un evento proporcionado por el documentobjeto que se activa cuando visibilityStatecambia la página.

document.addEventListener("visibilitychange", () = { if (document.visibilityState === "visible") { // page is visible } else { // page is hidden }});

Para ver cómo usar la API de visibilidad de página, usémosla para pausar un video y dejar de obtener recursos de una API cuando el usuario abandona la página. Para comenzar, usaré vite.js , que es una herramienta increíble para comenzar un nuevo proyecto rápidamente:

npm create vite@latest unknown-web-apis

Cuando se le solicite seleccionar un marco, seleccione Vanilla para crear un proyecto de JavaScript Vanilla. Y una vez terminado, vaya a la nueva carpeta, instale los npmpaquetes necesarios e inicie el servidor de desarrollador:

 cd unknown-web-apis npm install npm run dev

Vaya a localhost:3000/ y verá su proyecto Vite en funcionamiento.

En primer lugar, nos dirigiremos al /main.jsarchivo y eliminaremos todo el texto estándar. En segundo lugar, abriremos /index.htmly dentro de la #appetiqueta div, agregaremos un elemento de video con cualquier archivo de video que desee. Usé uno de Yoshi bailando. 🙂

div video controls source src="./yoshi.mp4" / /video/div

Volviendo a /main.js, agregaremos un detector de eventos al documentobjeto que escucha el visibilitychangeevento. Luego podemos acceder a la document.visibilityStatepropiedad para ver cuándo la página está visible u oculta.

document.addEventListener("visibilitychange", () = { console.log(document.visibilityState);});

Puede ir a la consola de la página y ver cómo cambia el estado de visibilidad de la página cuando minimiza la ventana o cambia a otra pestaña. Ahora, dentro del detector de eventos, podemos verificar la document.visibilityStatepropiedad, pausar el video cuando sea hiddeny reproducirlo cuando sea visible. (Por supuesto, primero seleccionamos el videoelemento usando document.querySelector()).

const video = document.querySelector("#video");document.addEventListener("visibilitychange", () = { if (document.visibilityState === "visible") { video.play(); } else { video.pause(); }});

Ahora el vídeo se detiene cada vez que el usuario abandona la página. Otro uso de la API de visibilidad de página es dejar de buscar recursos innecesarios cuando el usuario no ve la página. Para ver esto, escribiremos una función para recuperar constantemente una cita aleatoria de la API de quoteble.io y pausar este comportamiento cuando la página esté oculta. En primer lugar, crearemos una nueva etiqueta div para almacenar la cotización /index.html.

div video controls source src="./yoshi.mp4" / /video div/div/div

De vuelta en /main.js, usaremos la API Fetch para realizar una llamada al quotable.iopunto final https://api.quotable.io/random y luego lo insertaremos en el quotediv.

const quote = document.querySelector("#quote");const getQuote = async () = {try {const response = await fetch("https://api.quotable.io/random");const {content, author, dateAdded} = await response.json();const parsedQuote = ` q${content}/q br p- ${author}/pbr pAdded on ${dateAdded}/p`;quote.innerHTML = parsedQuote;} catch (error) {console.error(error);}};getQuote();

Expliquemos brevemente lo que está sucediendo aquí mismo. Primero seleccionamos el quoteelemento del DOM. Luego declaramos la getQuotefunción, que es una asyncfunción que nos permite usar la awaitpalabra clave para esperar hasta que obtengamos los datos de la API. Los datos obtenidos están en formato JSON, por lo que usamos la awaitpalabra clave una vez más para esperar hasta que los datos se analicen en un objeto JavaScript. La quotable.ioAPI nos proporciona, entre otras cosas, las propiedades content, authory dateAddedque inyectaremos y mostraremos en el quotediv. Esto funciona, pero la cotización solo se recupera una vez, por lo que podemos usar setInterval()para llamar a la función cada 10 segundos.

const quote = document.querySelector("#quote");const getQuote = async () = {try {const response = await fetch("https://api.quotable.io/random");const {content, author, dateAdded} = await response.json();const parsedQuote = ` q${content}/q br p- ${author}/pbr pAdded on ${dateAdded}/p`;quote.innerHTML = parsedQuote;} catch (error) {console.error(error);}};getQuote();setInterval(getQuote, 10000);

Si el usuario minimiza la ventana o cambia de pestaña, la página aún buscará las comillas, creando una carga de red innecesaria. Para solucionar esto, podemos comprobar si la página está visible antes de buscar una cotización.

const getQuote = async () = { if (document.visibilityState === "visible") { try { const response = await fetch("https://api.quotable.io/random"); const {content, author, dateAdded} = await response.json(); const parsedQuote = ` q${content}/q br p- ${author}/pbr pAdded on ${dateAdded}/p`; quote.innerHTML = parsedQuote; } catch (error) { console.error(error); } }};getQuote();setInterval(getQuote, 10000);

Ahora, sólo recuperaremos la cotización si la página es visible para el usuario.

Apoyo

Ampliamente apoyado

API para compartir web

¿Qué es?

La API Web Share también se encuentra entre las API menos conocidas, pero es extremadamente útil. Le permite acceder al mecanismo de uso compartido nativo del sistema operativo, que es especialmente útil para los usuarios de dispositivos móviles. Con esta API, puede compartir texto, enlaces y archivos sin la necesidad de crear sus propios mecanismos para compartir o utilizar mecanismos de terceros.

Casos de uso

Se explican por sí solos. Puede usarlo para compartir contenido de su página en las redes sociales o copiarlo al portapapeles del usuario.

¿Cómo usarlo?

La API Web Share nos brinda dos interfaces para acceder al sistema de uso compartido del usuario:

1. navigator.canShare()
   Acepta los datos que desea compartir como argumento y devuelve un argumento booleano dependiendo de si se pueden compartir.

2. navigator.share()
   Devuelve una promesa que se resolverá si el intercambio se realiza correctamente. Invoca el mecanismo de intercambio nativo y acepta los datos que desea compartir como argumento. Tenga en cuenta que solo se puede llamar si un usuario ha presionado un enlace o botón, es decir, requiere activación transitoria . Los datos compartidos son un objeto que puede tener las siguientes propiedades: Todo sobre el cafe

   • url: URL a compartir,
   • text: texto para compartir,
   • title: título para compartir,
   • files: matriz de Fileobjetos que representan archivos que se compartirán.

Para ver cómo usar esta API, reciclaremos nuestro ejemplo anterior y haremos una opción para compartir nuestras cotizaciones usando la API Web Sharing. Para comenzar, primero tenemos que crear un botón de compartir en /index.html:

div video controls source src="./yoshi.mp4" / /video div/div button type="button"Share Quote/button/div

Dirigimos /main.jsy seleccionamos el botón compartir desde el DOM. Luego, creamos una asyncfunción para compartir los datos que queremos.

const shareButton = document.querySelector("#share-button");const shareQuote = async (shareData) = { try { await navigator.share(shareData); } catch (error) { console.error(error); }};

Ahora, podemos agregar un detector de eventos de clic al shareButtonelemento para devolver la llamada a la shareQuotefunción. Nuestro shareData.textvalor será la quote.textContentpropiedad y shareData.urlserá la URL de la página, es decir, la location.hrefpropiedad.

const shareButton = document.querySelector("#share-button");const shareQuote = async (shareData) = { try { await navigator.share(shareData); } catch (error) { console.error(error); }};shareButton.addEventListener("click", () = { let shareData = { title: "A Beautiful Quote", text: quote.textContent, url: location.href, }; shareQuote(shareData);});

Ahora puedes compartir tus cotizaciones con cualquier persona a través de tu sistema operativo nativo. Sin embargo, es importante tener en cuenta que la API Web Share solo funcionará si el contexto es seguro, es decir, si la página se sirve a través https://de wss://URL.

Apoyo

Mal apoyado

API de canal de transmisión

¿Qué es?

Otra API de la que quiero hablar es la API Broadcast Channel . Permite que los contextos de navegación envíen y reciban datos básicos entre sí. Los contextos de navegación son elementos como una pestaña, una ventana, un iframe o cualquier lugar donde se pueda mostrar una página. Por razones de seguridad, no se permite la comunicación entre contextos de navegación a menos que sean del mismo origen y utilicen la API Broadcast Channel. Para que dos contextos de navegación sean del mismo origen, deben compartir en su URL el mismo protocolo (p. ej. http/https), dominio (p. ej. example.com) y puerto (p. ej. :8080).

Casos de uso

La API del canal de transmisión se usa generalmente para mantener sincronizado el estado de una página en diferentes pestañas y ventanas para mejorar la experiencia del usuario o por razones de seguridad. También se puede utilizar para saber cuándo finaliza un servicio en otra pestaña o ventana. Algunos ejemplos son:

• Iniciar o cerrar sesión de un usuario en todas las pestañas.
• Detecta cuándo se carga un activo y muéstralo en todas las páginas.
• Indique a un trabajador de servicio que realice un trabajo de antecedentes.

¿Cómo usarlo?

La API del canal de transmisión implica un BroadcastChannelobjeto que se puede utilizar para enviar mensajes a otros contextos. Su constructor tiene un solo argumento: una cadena que funcionará como identificador para conectarse al canal desde otros contextos.

const broadcast = new BroadcastChannel("new_channel");

Una vez que hayamos creado un BroadcastChannelobjeto con el mismo identificador en dos contextos, el nuevo BroadcastChannelobjeto tendrá dos métodos disponibles para comenzar a comunicarse:

• BroadcastChannel.postMessage()para enviar un mensaje a través de todos los contextos conectados. Toma cualquier tipo de objeto como único argumento para que pueda enviar una amplia variedad de datos.

broadcast.postMessage("Example message");

• BroadcastChannel.close()para cerrar el canal e indicar al navegador que no recibirá más mensajes para que pueda recogerlos en la basura.

Para recibir un mensaje, BroadcastChanneltiene un messageevento que podemos escuchar usando una addEventListenero su onmessagepropiedad. El messageevento tiene una datapropiedad con los datos enviados y otras propiedades para identificar el contexto que envió el mensaje, como origin, lastEventId, sourcey ports.

broadcast.onmessage = ({data, origin}) = { console.log(`${origin} says ${data}`);};

Veamos cómo utilizar la API del canal de transmisión usando nuestro ejemplo anterior. Nuestro objetivo sería crear otro contexto de navegación con el mismo origen y mostrar la misma cita en ambos contextos. Para hacer esto, crearemos una nueva carpeta nombrada new-origincon nuevos /index.htmlarchivos /main.jsdentro.

Habrá /new-origin/index.htmlun nuevo texto estándar HTML con un #quotediv dentro:

!DOCTYPE htmlhtml head meta charset="UTF-8" / link rel="icon" type="image/svg+xml" href="../favicon.svg" / meta name="viewport" content="width=device-width, initial-scale=1.0" / titleVite App/title /head body div/div script type="module" src="./main.js"/script /body/html

En el /new-origin/main.jsarchivo, crearemos un nuevo canal de transmisión y seleccionaremos el #quoteelemento del DOM:

const broadcast = new BroadcastChannel("quote_channel");const quote = document.querySelector("#quote");

Y en nuestro /main.jsarchivo anterior, crearemos un nuevo BroadcastChannelobjeto y lo conectaremos al archivo "quote_channel". También modificaremos la getQuotefunción para enviar la cotización como mensaje a otros contextos.

const broadcast = new BroadcastChannel("quote_channel");//...const getQuote = async () = {try {const response = await fetch("https://api.quotable.io/random");const {content, author, dateAdded} = await response.json();const parsedQuote = ` q${content}/q br p- ${author}/pbr pAdded on ${dateAdded}/p`;quote.innerHTML = parsedQuote;broadcast.postMessage(parsedQuote);} catch (error) {console.error(error);}};

De vuelta en el /new-origin/main.jsarchivo, escucharemos el messageevento y lo cambiaremos quote.innerHTMLcada vez que se envíe una nueva cotización.

const broadcast = new BroadcastChannel("quote_channel");const quote = document.querySelector("#quote");broadcast.onmessage = ({data}) = { quote.innerHTML = data;};

Ahora puede ver cómo la cita en https://localhost:3000/new-origin/ cambia a la cita en https://localhost:3000 . También puede observar cómo la cita no cambia cuando la pestaña https://localhost:3000 está oculta, ya que solo obtiene una cita cuando el estado de visibilidad de la página es visible.

Apoyo

Ampliamente apoyado

API de internacionalización

¿Qué es?

Al desarrollar una página web o una aplicación, es muy común necesitar traducir su contenido a otros idiomas para llegar a un público más amplio. Sin embargo, simplemente traducir el texto de su página al idioma que necesite no es suficiente para que su contenido esté disponible para los hablantes de ese idioma, ya que cosas como fechas, números, unidades, etc., son diferentes entre países y pueden causar confusión a sus usuarios.

Supongamos que desea mostrar la fecha “8 de noviembre de 2022” en su página web como “8/11/22”. Estos datos se pueden leer de tres formas distintas según el país del lector:

• “8 de noviembre de 2022” o DD/MM/AA para personas de EE. UU.
• “11 de agosto de 2022” o DD/MM/AA por personas de Europa y Latam.
• “22 de agosto de 2011” o AA/MM/DD por personas de Japón, China y Canadá.

Aquí es donde la API de internacionalización (o API I18n ) llega para resolver problemas de formato en diferentes idiomas y regiones. La API I18n es una herramienta increíble que tiene varios usos, pero no profundizaremos en ellos para no complicar demasiado este artículo.

¿Cómo usarlo?

La API I18n utiliza identificadores locales para funcionar. Un identificador local es una cadena que expresa el idioma, país, región, dialecto y otras preferencias del usuario. Para ser precisos, un identificador local es una cadena que consta de subetiquetas separadas por guiones. Las subetiquetas representan preferencias del usuario como idioma, país, región o escritura y tienen el formato siguiente:

1. “zh”: chino (idioma);
2. “zh-Hant”: chino (idioma) escrito en caracteres tradicionales (escritura);
3. “zh-Hant-TW”: chino (idioma) escrito en caracteres tradicionales (escritura) tal como se utiliza en Taiwán (región).

Hay más subetiquetas para abordar las preferencias de más usuarios (si desea obtener más información, puede consultar la definición RFC de etiquetas de idioma), pero para ser breve, la API I18n utiliza estos identificadores locales para saber cómo formatear todos los idiomas. -informacion delicada.

Para ser más precisos, la API I18n proporciona un Intlobjeto que reúne un grupo de constructores especializados para trabajar con datos sensibles al lenguaje. En mi opinión, algunos de los constructores más útiles Intlpara la internacionalización son:

• Intl.DateTimeFormat()
  Se utiliza para formatear fechas y horas.
• Intl.DisplayNames()
  Se utiliza para dar formato a los nombres para mostrar de idioma, región y escritura.
• Intl.Locale()
  Se utiliza para construir y manipular etiquetas de identificación local.
• Intl.NumberFormat()
  Se utiliza para formatear números.
• Intl.RelativeTimeFormat()
  Se utiliza para dar formato a descripciones de tiempo relativo.

Para nuestro ejemplo, nos centraremos en el Intl.DateTimeFormat()constructor para formatear la propiedad de la cotización dateAddedsegún la configuración regional del usuario. El Intl.DateTimeFormat()constructor toma dos argumentos: la localecadena que define la convención de formato de fecha y los optionsobjetos para personalizar cómo formatear las fechas.

El Intl.DateTimeFormat()objeto creado tiene un format()método que toma dos argumentos: el Dateobjeto que queremos formatear y el optionsobjeto para personalizar cómo mostrar la fecha formateada.

const logDate = (locale) = { const newDate = new Date("2022-10-24"); // YY/MM/DD const dateTime = new Intl.DateTimeFormat(locale, {timeZone: "UTC"}); const formatedDate = dateTime.format(newDate); console.log(formatedDate);};logDate("en-US"); // 10/24/2022logDate("de-DE"); // 24.10.2022logDate("zh-TW"); // 2022/10/24

Nota: En el argumento Intl.DateTimeFormatdel constructor options, configuramos la timeZonepropiedad "UTC"para que la fecha no tenga el formato de la hora local del usuario. En mi caso, la fecha se analiza como “23/10/2022” sin la timeZoneopción.

Como puede ver, dateTime.format()cambia la fecha según la convención de formato de fecha de la configuración regional. Podemos implementar este comportamiento en la fecha de las cotizaciones usando la navigator.languagepropiedad global, que contiene la configuración regional preferida del usuario. Para hacer esto, crearemos una nueva función que toma una cadena de fecha (en formato AAAA-MM-DD) y devuelve la fecha formateada según la configuración regional del usuario.

const formatDate = (dateString) = { const date = new Date(dateString); const locale = navigator.language; const dateTimeFormat = new Intl.DateTimeFormat(locale, {timeZone: "UTC"}); return dateTimeFormat.format(date);};

Podemos agregar esta función dentro de la getQuote()función para analizar la dateAddedfecha.

const getQuote = async () = { if (document.visibilityState === "visible") { try { const response = await fetch("https://api.quotable.io/random"); const {content, author, dateAdded} = await response.json(); const parsedQuote = ` q${content}/q br p- ${author}/pbr pAdded on ${formatDate(dateAdded)}/p`; quote.innerHTML = parsedQuote; broadcast.postMessage(parsedQuote); } catch (error) { console.error(error); } }};

¡Con esto, nuestras cotizaciones están traducidas al idioma preferido del usuario! En mi caso, mi navigator.languagevalor es "en", por lo que mis fechas tienen el formato MM/DD/AA.

Apoyo

Ampliamente apoyado

Conclusión

Después de leer este artículo, ahora puede saber más sobre la existencia de estas API y cómo usarlas. Aunque ocuparon el último lugar en conocimiento en la Encuesta sobre el estado de JS , son extremadamente útiles y saber cómo usarlos definitivamente mejorará su experiencia de desarrollo. El hecho de que estas potentes API no sean muy conocidas significa que todavía hay API útiles que usted y yo todavía no conocemos, por lo que es el momento perfecto para explorar y encontrar esa API que simplificará su código y le ahorrará un montón de tiempo en desarrollo.

Espero que te haya gustado este artículo y ¡hasta la próxima!

(vf, yk, il)Explora más en

• API
• Aplicaciones
• Herramientas
• Guías
• javascript

Tal vez te puede interesar:

1. ¿Deberían abrirse los enlaces en ventanas nuevas?
2. 24 excelentes tutoriales de AJAX
3. 70 técnicas nuevas y útiles de AJAX y JavaScript
4. Más de 45 excelentes recursos y repositorios de fragmentos de código

API de JavaScript que no conoces

API de visibilidad de páginaAPI para compartir webAPI de canal de transmisiónAPI de internacionalizaciónConclusiónSmashingConf UX y diseño, Amberes 2024

programar

es

https://aprendeprogramando.es/static/images/programar-api-de-javascript-que-no-conoces-1156-0.jpg

2025-01-08

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente