recursal/MDN huggingface dataset:
PushManager
===========

La interfaz **`PushManager`** de la API Push proporciona una forma de recibir notificaciones de servidores de terceros, así como solicitar URL para notificaciones push.

Se accede a esta interfaz a través de la propiedad `ServiceWorkerRegistration.pushManager` (en-US).

Propiedades estáticas
---------------------

`PushManager.supportedContentEncodings`

Devuelve una matriz de codificaciones de contenido admitidas que se pueden usar para cifrar la carga útil de un mensaje push.

Métodos de instancia
--------------------

`PushManager.getSubscription()` (en-US)

Recupera una suscripción push existente. Devuelve un objeto `Promise` que se resuelve en un objeto `PushSubscription` (en-US) que contiene detalles de una suscripción existente. Si no existe una suscripción existente, esto se resuelve en un valor `null`.

`PushManager.permissionState()` (en-US)

Devuelve un `Promise` que resuelve el estado de permiso del `PushManager` actual, que será `'granted'`, `'denied'` o `'prompt'`.

`PushManager.subscribe()` (en-US)

Se suscribe a un servicio push. Devuelve un objeto `Promise` que se resuelve en un objeto `PushSubscription` (en-US) que contiene detalles de una suscripción push. Se crea una nueva suscripción push si el trabajador del servicio actual no tiene una suscripción existente.

### Métodos obsoletos

`PushManager.hasPermission()` (en-US) 
Obsoleto

Devuelve un `Promise` que se resuelve en `PushPermissionStatus` de la aplicación web solicitante, que será `granted`, `denied` o `default`. Reemplazado por `PushManager.permissionState()` (en-US).

`PushManager.register()` (en-US) 
Obsoleto

Se suscribe a una suscripción push. Reemplazado por `PushManager.subscribe()` (en-US).

`PushManager.registrations()` (en-US) 
Obsoleto

Recupera suscripciones push existentes. Reemplazado por `PushManager.getSubscription()` (en-US).

`PushManager.unregister()` (en-US) 
Obsoleto

Anula el registro y elimina un extremo de suscripción especificado. En la API actualizada, se anula el registro de una suscripción llamando al método `PushSubscription.unsubscribe()` (en-US).

Example
-------


```js
this.onpush = (event) => {
  console.log(event.data);
  // Desde aquí podemos escribir los datos en una IndexedDB, enviarlos
  // a cualquier ventana abierta, mostrar una notificación, etc.
};

navigator.serviceWorker
  .register("serviceworker.js")
  .then((serviceWorkerRegistration) => {
    serviceWorkerRegistration.pushManager.subscribe().then(
      (pushSubscription) => {
        console.log(pushSubscription.endpoint);
        // Los detalles de suscripción push que necesita el servidor
        // de aplicaciones ahora están disponibles y se pueden enviar
        // mediante, por ejemplo, XMLHttpRequest.
      },
      (error) => {
        console.error(error);
      },
    );
  });
```

Especificaciones
----------------

| Specification |
| --- |
| Push API # pushmanager-interface |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* API Push
* API de Trabajador de Servicio
Almacenamiento
==============

La interfaz `Storage` de la API de almacenamiento web provee acceso al almacenamiento de la sesión o al almacenamiento local para un dominio en particular, permitiéndote por ejemplo añadir, modificar o eliminar elementos de dato almacenados.

Si deseas manipular el almacenamiento de sesión para un dominio, debes llamar al método `Window.sessionStorage`; Si deseas manipular el almacenamiento local para un dominio, debes llamar a `Window.localStorage`.

Propiedades
-----------

`Storage.length` Read only 

Retorna un entero que representa el número de elementos almacenados en el objeto`Storage`.

Métodos
-------

`Storage.key()` (en-US)

Cuando se le pasa un número n, éste método retorna el nombre de la enésima clave en el almacenamiento.


`Storage.getItem()`

Cuando se le pasa un nombre de clave, retorna el valor de esa clave.

`Storage.setItem()`

Cuando se le pasa un nombre de clave y un valor, añade dicha clave al almacenamiento, o la actualiza el valor de la clave si ya existe.

`Storage.removeItem()`

Cuando se le pasa el nombre de una clave, eliminará dicha clave del almacenamiento.

`Storage.clear()`

Cuando es invocado vacía todas las claves del almacenamiento.

Ejemplos
--------

Aquí tenemos un objeto `Storage` al llamar a `localStorage`. Primero probamos si el almacenamiento local contiene elementos de dato usando `!localStorage.getItem('bgcolor')`. Si lo hace, ejecutamos una función llamada `setStyles()` que obtiene los elementos usando `localStorage.getItem()` y utiliza dichos valores para actualizar los estilos de la página. Si no, ejecutamos otra función, `populateStorage()`, que utiliza `localStorage.setItem()` para definir los valores de los elementos, luego ejecuta `setStyles()`.


```js
if (!localStorage.getItem("bgcolor")) {
  populateStorage();
} else {
  setStyles();
}

function populateStorage() {
  localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
  localStorage.setItem("font", document.getElementById("font").value);
  localStorage.setItem("image", document.getElementById("image").value);

  setStyles();
}

function setStyles() {
  var currentColor = localStorage.getItem("bgcolor");
  var currentFont = localStorage.getItem("font");
  var currentImage = localStorage.getItem("image");

  document.getElementById("bgcolor").value = currentColor;
  document.getElementById("font").value = currentFont;
  document.getElementById("image").value = currentImage;

  htmlElem.style.backgroundColor = "#" + currentColor;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute("src", currentImage);
}
```


**Nota:** Para ver la ejecución de esto como un ejemplo funcional completo, mira nuestra Demo de almacenamiento web.

Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # storage |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

Usar la API de almacenamiento Web
BatteryManager
==============

**Obsoleto:** Esta característica ya no se recomienda. Aunque es posible que algunos navegadores aún lo admitan, probablemente ya se ha eliminado de los estándares web relevantes, está en proceso de eliminación o solo se conserva por motivos de compatibilidad. Evite usarlo y actualice el código existente si es posible; consulte la tabla de compatibilidad en la parte inferior de esta página para orientar su decisión. Tenga en cuenta que esta característica puede dejar de funcionar en cualquier momento.

La interfaz `BatteryManager` de la API del Estado de la Batería proporciona la información del nivel de carga de la bateria del sistema. El método `navigator.getBattery()` regresa una promesa que resuelve con la interfaz de `BatteryManager`.

Propiedades
-----------

`BatteryManager.charging` Read only 

Valor booleano que indica si la bateria se está o no cargando.

`BatteryManager.chargingTime` Read only 

Número que indica el tiempo que queda en segundos hasta que la batería esté completamente cargada, o 0 si la batería está completamente cargada.

`BatteryManager.dischargingTime` Read only 

Número que indica el tiempo restante en segundos hasta que la batería esté completamente descargada y el sistema entra en suspensión.

`BatteryManager.level` Read only 

Número que indica el nivel de carga de la batería del sistema, los valores están escalados entre 0.0 y 1.0.

### Eventos del controlador

`BatteryManager.onchargingchange`

Controlador para el evento `chargingchange`; Este evento se envía cuando se actualiza el estado de carga de la batería.

`BatteryManager.onchargingtimechange` (en-US)

Controlador para el evento `chargingtimechange`; Este evento se envía cuando se actualiza el tiempo de carga de la batería.

`BatteryManager.ondischargingtimechange` (en-US)

Controlador para el evento`dischargingtimechange`; Este evento se envía cuando se actualiza el tiempo de descarga de la batería.

`BatteryManager.onlevelchange`

Controlador para el evento `levelchange`; Este evento se envía cuando se actualizael nivel de la batería.

Métodos
-------

*Hereda métodos de su interfaz padre:* `EventTarget`.

Especificaciones
----------------

| Specification |
| --- |
| Battery Status API # the-batterymanager-interface |

Compatibilidad del navegador
----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* La API del Estado de la Batería
* `navigator.getBattery`
GamepadButton
=============

La interfaz **`GamepadButton`** define un botón individual de un gamepad u otro control, dando acceso al estado actual de diferentes tipos de botones disponibles en el dispositivo de control.

Un objeto `GamepadButton` se devuelve al solicitar cualquier valor del array devuelto por la propiedad `buttons` de la interfaz `Gamepad` (en-US).

**Nota:** Este es el caso en Firefox Gecko 28 en adelante; Chrome y versiones anteriores de Firefox continúan devolviendo un array de valores dobles cuando se accede a esta propiedad.

Propiedades
-----------

`GamepadButton.value` (en-US) Read only 

Un valor doble usado para representar el estado actual de botones análogos, así como los gatillos de muchos gamepads modernos. Los valores se normalizan al rango 0.0 —1.0, donde 0.0 representa un botón que no está presionado, y 1.0 representa un botón que está completamente presionado.

`GamepadButton.pressed` (en-US) Read only 

Un valor `Boolean` (en-US) que indica el estado el botón, ya sea que actualmente se encuentre presionado (`true`) o sin presionar (`false`).

Ejemplo
-------

El siguiente código se toma de mi demostración del botón del API de Gamepad (puedes ver el demo en vivo, y encontrar el código fuente en Github.) Nota que el código — en Chrome `Navigator.getGamepads` (en-US) necesita un prefijo `webkit` y los valores del botón serán guardados como un array de valores dobles, mientras qe en Firefox `Navigator.getGamepads` (en-US) no se necesita un prefijo, y los valores de los botones se guardan como un array de objetos `GamepadButton`; estas son las propiedades `GamepadButton.value` (en-US) o `GamepadButton.pressed` (en-US) a las que necesitamos acceder, dependiendo de qué tipo de botones haya. En este simple ejemplo yo solo he permitido estos.


```js
function gameLoop() {
  if (navigator.webkitGetGamepads) {
    var gp = navigator.webkitGetGamepads()[0];

    if (gp.buttons[0] == 1) {
      b--;
    } else if (gp.buttons[1] == 1) {
      a++;
    } else if (gp.buttons[2] == 1) {
      b++;
    } else if (gp.buttons[3] == 1) {
      a--;
    }
  } else {
    var gp = navigator.getGamepads()[0];

    if (gp.buttons[0].value > 0 || gp.buttons[0].pressed == true) {
      b--;
    } else if (gp.buttons[1].value > 0 || gp.buttons[1].pressed == true) {
      a++;
    } else if (gp.buttons[2].value > 0 || gp.buttons[2].pressed == true) {
      b++;
    } else if (gp.buttons[3].value > 0 || gp.buttons[3].pressed == true) {
      a--;
    }
  }

  ball.style.left = a \* 2 + "px";
  ball.style.top = b \* 2 + "px";

  var start = rAF(gameLoop);
}
```

Especificaciones
----------------

| Specification |
| --- |
| Gamepad # gamepadbutton-interface |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Recomendado
-----------

Usando la API de Gamepad (en-US)
Coordinates
===========

La interfaz **`Coordinates`** representa la posición y altitud del dispositivo en la Tierra, así como la precisión con la cual estas propiedades son calculadas.

Propiedades
-----------

*La interfaz `Coordinates` no hereda ninguna propiedad*.

`Coordinates.latitude` Read only 

Devuelve un `double` que representa la latitud de la posición en grados con decimales.

`Coordinates.longitude` (en-US) Read only 

Devuelve un `double` que representa la longitud de la posición en grados con decimales.

`Coordinates.altitude` (en-US) Read only 

Devuelve un `double` que representa la altitud de la posición en metros, relativo al nivel del mar. Este valor puede ser `null` si la implementación no puede proporcionar la información.

`Coordinates.accuracy` (en-US) Read only 

Devuelve un `double` que representa la precisión de las propiedades `latitude` y `longitude`, expresada en metros.

`Coordinates.altitudeAccuracy` (en-US) Read only 

Devuelve un `double` que representa la precisión de la propiedad `altitude` expresada en metros. Este valor puede ser `null`.

`Coordinates.heading` (en-US) Read only 

Devuelve un `double` que representa la dirección en la que el dispositivo está viajando. Este valor, indicado en grados, indica la distancia real a la que el dispositivo se encuentra del norte. `0` grados representa el norte real, y la dirección se determina en el sentido de la agujas del reloj (lo que significa que el este es `90` grados y el oeste es `270` grados). Si `speed` es `0`, `heading` es `NaN` (en-US). En caso de que el dispositivo no pueda proporcionar la información de `heading`, este valor es `null`.

`Coordinates.speed` (en-US) Read only 

Devuelve un `double` que representa la velocidad del dispositivo en metros por segundo. Este valor puede ser `null`.

Métodos
-------

La interfaz `Coordinates` no implementa ni edita ningún método.

Especificaciones
----------------

| Specification |
| --- |
| Geolocation API # coordinates\_interface |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* Utilizando la geolocalización
* La interfaz `Geolocation` que la utiliza.
Document.async
==============

`document.async` es utilizado para indicar cuándo un llamado de `document.load` debe ser sincrónico o asincrónico. `true` es su valor por defecto, indicando que el documento se cargó asincrónicamente.

(Desde la versión 1.4 alpha es posible cargar documentos sincrónicamente)

Ejemplo
-------


```js
function loadXMLData(e) {
  alert(new XMLSerializer().serializeToString(e.target)); // Devuelve los contenidos de querydata.xml como un string
}

var xmlDoc = document.implementation.createDocument("", "test", null);

xmlDoc.async = false;
xmlDoc.onload = loadXMLData;
xmlDoc.load("querydata.xml");
```

Especificación
--------------

* DOM Level 3 Load & Save module
Véase también
-------------

* XML in Mozilla
* `document.load`
ImageBitmapRenderingContext
===========================

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

El interface **`ImageBitmapRenderingContext`** es un lienzo de contexto renderizado que sólo permite la funcionalidad de reemplazar el contenido del lienzo ( `<canvas>` ) con el `ImageBitmap` dado. La identificación de contenido (el primer argumento a `HTMLCanvasElement.getContext()` o `OffscreenCanvas.getContext()` (en-US) es `"bitmaprenderer"`.

Esta interface es posible en ambos , la ventana y el "worker context"(contexto de tabajo).

Métodos
-------

`ImageBitmapRenderingContext.transferFromImageBitmap()` (en-US)

Muestra el `ImageBitmap` en el lienzo asociado con el contexto de renderizado. La propiedad del `ImageBitmap` se transfiere al lienzo. Este se llamaba `transferImageBitmap()`, pero se renombra en un cambio especulativo . El viejo nombre se mantiene como un alias para evitar una ruptura del código.

Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # the-imagebitmaprenderingcontext-interface |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* `OffScreenCanvas` (en-US)
RTCRtpReceiver
==============

La interfaz **`RTCRtpReceiver`** de la WebRTC API gestiona la recepción y decodificación de los datos para una `MediaStreamTrack` a una `RTCPeerConnection`.

Propiedades
-----------

`RTCRtpReceiver.track` (en-US) Read only 

Devuelve el `MediaStreamTrack` asociado con la instancia actual de `RTCRtpReceiver`

`RTCRtpReceiver.rtcpTransport` Read only 

Devuelve la instancia `RTCDtlsTransport` (en-US) en la que se envía y se recibe el RTCP.

`RTCRtpReceiver.transport` (en-US) Read only 

Devuelve la instancia `RTCDtlsTransport` (en-US) en la que se reciben los medios para la pista del receptor.

Métodos
-------

`RTCRtpReceiver.getContributingSources()` (en-US)

Devuelve un array de instancia `RTCRtpContributingSource` (en-US) para cada identificador CSRC (fuente contribuyente) identificador recibido actual `RTCRtpReceiver` en los últimos 10 segundos.

`RTCRtpReceiver.getParameters()` (en-US)

Devuelve un objeto `RTCRtpParameters` que contiene información sobre cómo se van a decodificar los datos de RTC.

`RTCRtpReceiver.getStats()` (en-US)

 Devuelve un `Promise` cuyo controlador de cumplimiento recibe un
 `RTCStatsReport` (en-US) que contiene estadísticas sobre los flujos entrantes y sus dependencias.


`RTCRtpReceiver.getSynchronizationSources()` (en-US)

Devuelve un arreglo que incluye una instancia `RTCRtpSynchronizationSource` (en-US) para cada identificador SSRC (fuente de sincronización) único recibido por el `RTCRtpReceiver` actual en los últimos diez segundos.

Métodos estáticos
-----------------

`RTCRtpReceiver.getCapabilities()` (en-US)

Devuelve la visión más optimista de las capacidades del sistema para recibir medios de comunicación del tipo dado.

Especificaciones
----------------

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # rtcrtpreceiver-interface |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* WebRTC
* `RTCStatsReport` (en-US)
* `RTCRtpSender` (en-US)
* `RTCPeerConnection.getStats()` (en-US)
API del portapapeles
====================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
La **API del portapapeles** permite acceder los comandos del portapapeles (cortar, copiar y pegar), así como leer y escribir de manera asíncrona el portapapeles del sistema. Acceder al contenido del portapapeles está sujeta a la API de permisos (en-US): El permiso `clipboard-write` es concedido automáticamente a las páginas cuando están en la pestaña activa. El permiso `clipboard-read` debe ser solicitado, lo que se puede hacer intentando leer directamente el portapapeles.

Esta API está diseñada para reemplazar el acceso al portapapeles usando `document.execCommand()`.

Accediendo al portapapeles
--------------------------

En vez de instanciar un objeto `Clipboard`, se puede acceder al portapapeles del sistema a través de la variable global `Navigator.clipboard`:


```js
navigator.clipboard
  .readText()
  .then(
    (clipText) => (document.querySelector(".editor").innerText += clipText),
  );
```


Esta pieza de código lee el texto que hay en el portapapeles y lo añade al primer elemento que tenga la clase `editor`. Desde que `readText()` (en-US) (y también `read()` (en-US), de hecho) devuelve una cadena de texto vacía si el contenido del portapapeles no es texto, este código es seguro.

Interfaces
----------

`Clipboard` (en-US) Contexto seguro

Proporciona una interfaz para leer y escribir texto y datos. La especificación se refiere a esto como 'Async Clipboard API.'

`ClipboardEvent` Contexto seguro

Representa la información del evento que se ha disparado. Los eventos que se pueden disparar son: `cortar` (en-US), `copiar` (en-US), y `pegar` (en-US). La especificación se refiere a esto como 'Clipboard Event API'.

`ClipboardItem` (en-US) Contexto seguro

Representa uno de los objetos del portapapeles, usado en la lectura y escritura de datos.

Especificaciones
----------------

| Specification |
| --- |
| Clipboard API and events # clipboard-interface |
| Clipboard API and events # clipboard-event-interfaces |
| Clipboard API and events # clipboarditem |

Compatibilidad con navegadores
------------------------------

### api.Clipboard

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.ClipboardEvent

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.ClipboardItem

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* Permissions API (en-US)
* Using the Permissions API (en-US)
CustomElementRegistry
=====================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
La interfaz **`CustomElementRegistry`** proporciona métodos para registrar elementos personalizados y consultar elementos registrados. Para obtener una instancia, usa la propiedad `window.customElements`.

Métodos de instancia
--------------------

`CustomElementRegistry.define()`

Define un nuevo elemento personalizado.

`CustomElementRegistry.get()` (en-US)

Devuelve el constructor del elemento personalizado nombrado, o `undefined` si el elemento personalizado no está definido.

`CustomElementRegistry.getName()` (en-US)

Devuelve el nombre del elemento personalizado ya definido, o `null` si el elemento personalizado no está definido.

`CustomElementRegistry.upgrade()` (en-US)

Actualiza un elemento personalizado directamente, incluso antes de que se conecte a su shadow root (en-US).

`CustomElementRegistry.whenDefined()` (en-US)

Devuelve un `Promise` vacío que se resuelve cuando un elemento personalizado se define con el nombre dado. Si dicho elemento personalizado ya está definido, la promesa devuelta se cumple de inmediato.

Ejemplos
--------

El siguiente código está tomado de nuestro ejemplo word-count-web-component (véalo también en vivo). Observe cómo usamos el método `CustomElementRegistry.define()` para definir el elemento personalizado después de crear su clase.


```js
// Crear una clase para el elemento.
class WordCount extends HTMLParagraphElement {
  constructor() {
    // Siempre llama super primero en el constructor
    super();

    // contar palabras en el elemento padre del elemento
    const wcParent = this.parentNode;

    function countWords(node) {
      const text = node.innerText || node.textContent;
      return text
        .trim()
        .split(/\s+/g)
        .filter((a) => a.trim().length > 0).length;
    }

    const count = `Palabras: ${countWords(wcParent)}`;

    // Crear una shadow root
    const shadow = this.attachShadow({ mode: "open" });

    // Cree un nodo de texto y agrega el recuento de palabras
    const text = document.createElement("span");
    text.textContent = count;

    // Añádalo a al shadow root
    shadow.appendChild(text);

    // Actualizar el recuento cuando cambia el contenido del elemento
    setInterval(() => {
      const count = `Palabras: ${countWords(wcParent)}`;
      text.textContent = count;
    }, 200);
  }
}

// Definir el nuevo elemento
customElements.define("word-count", WordCount, { extends: "p" });
```


**Nota:** `CustomElementRegistry` está disponible a través de la propiedad `Window.customElements`.

Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # custom-elements-api |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.