Get best of the week

Almacenamiento web



Buen dia amigos.

Les presento la traducción del artículo "Almacenamiento para la Web" de Pete LePage.

Existen varias tecnologías para almacenar datos en un navegador. ¿Cuál es mejor?

Una conexión a Internet puede ser deficiente o incluso estar ausente en ciertos lugares. Por lo tanto, el soporte fuera de línea es una de las características clave de las aplicaciones web progresivas . Incluso con una conexión de alta velocidad, es prudente utilizar el almacenamiento en caché y otras técnicas para mejorar la experiencia del usuario. Hay varias formas de guardar archivos (HTML, JavaScript, CSS, imágenes, etc.) y datos (datos de usuario, artículos de noticias, etc.). Pero, ¿qué solución es mejor elegir? ¿Y cómo garantizar su durabilidad?

¿Qué usar?


Puedo aconsejar lo siguiente:


IndexedDB y Cache API son compatibles con todos los navegadores modernos. Son asíncronos, es decir. No bloquee el hilo principal (ejecución de código). Están disponibles en el objeto Window, los trabajadores web y los trabajadores de servicios. En otras palabras, se pueden usar en todas partes.

¿Qué pasa con otros mecanismos?


El navegador también tiene otros mecanismos de almacenamiento de datos, pero tienen ciertas limitaciones y pueden ocasionar problemas de rendimiento.


?


Al menos unos cientos de megabytes, potencialmente cientos de gigabytes. Depende del navegador, sin embargo, la cantidad de almacenamiento generalmente se basa en la cantidad de memoria disponible en el dispositivo del usuario.

  • Chrome le permite usar hasta el 60% del espacio en disco. Puede usar la API StorageManager para determinar el límite (cuota).
  • Internet Explorer 10 y versiones posteriores pueden almacenar hasta 250 MB de datos.
  • Firefox te permite almacenar hasta 2 GB de datos. Puede usar la API StorageManager para determinar el límite.
  • Safari (tanto de escritorio como móvil) le permite almacenar hasta 1 GB de datos. Al llegar al límite, Safari le pide permiso al usuario para aumentar la cuota en 200 MB.

En el pasado, cuando se alcanzaba el límite de almacenamiento, los navegadores solicitaban permiso del usuario para aumentar la cantidad de memoria. Por ejemplo, cuando se alcanza un límite de 50 MB, el navegador solicitó permiso del usuario para aumentar la cuota a 100 MB y, por lo tanto, cada 50 MB.

Hoy en día, la mayoría de los navegadores no lo hacen, lo que aumenta automáticamente la cantidad de almacenamiento dentro de la cuota. La excepción es Safari, que, al llegar a 750 MB, solicita permiso del usuario para aumentar el límite a 1.1 GB. Un intento de exceder la cuota terminará en fracaso.

¿Cómo verificar el saldo del límite?


Para esto, en muchos navegadores, puede usar la API StorageManager. Muestra el número total de bytes utilizados por IndexedDB y la API de caché, lo que le permite calcular el resto.

if(navigator.storage && navigator.storage.estimate) {
  const quota = await navigator.storage.estimate()
  // quota.usage ->   
  // quota.quota ->   
  const percentageUsed = (quota.usage / quota.quota) * 100
  console.log(`  ${ percentageUsed}% `)
  const remaining = quota.quota - quota.usage
  console.log(`   ${remaining} `)
}

Tenga en cuenta que la API StorageManager aún no es compatible con todos los navegadores. Sin embargo, incluso si es compatible, se debe proporcionar un controlador de errores. En algunos casos, la cuota puede exceder la capacidad de almacenamiento real.

Inspección


Durante el desarrollo, puede usar las herramientas del navegador para rastrear el estado de varios repositorios y limpiarlos.



Mientras trabajaba en este artículo, escribí esta herramienta simple para probar rápidamente las capacidades de almacenamiento. Esta es una manera rápida y fácil de experimentar con diferentes mecanismos de almacenamiento de datos y ver qué sucede cuando se excede la cuota.

¿Cómo manejar los errores?


¿Qué hacer cuando se alcanza el límite? Por supuesto, maneje los errores, ya sea QuotaExceededError u otra cosa. Luego, dependiendo del diseño de su aplicación, debe elegir la forma en que se procesan. Puede, por ejemplo, eliminar contenido o datos antiguos según su tamaño, o proporcionar al usuario la capacidad de decidir qué eliminar.

IndexedDB y la API de caché arrojan un DOMError QuotaExceededError cuando se excede una cuota.

Indexeddb


Cuando se alcanza el límite, un intento de escribir datos en IndexedDB fallará. Se llamará al método onabort () con el evento como argumento. El evento contendrá una DOMException en la propiedad de error. Verificar el nombre del error devolverá un QuotaExceededError.

const transaction = idb.transaction(['entries'], 'readwrite')
transaction.onabort = function(event) {
    const error = event.target.error // DOMException
    if(error.name === 'QuotaExceededError') {
        // ...
    }
}

API de caché


Un intento de escribir datos en la API de caché cuando se alcanza el límite se rechazará con una excepción Domotaception QuotaExceededError.

try {
    const cache = await caches.open('my-cache')
    await cache.add(new Request('/sample1.jpg'))
} catch (error) {
    if(error.name = 'QuotaExceededError') {
        // ...
    }
}

¿Cómo funciona la limpieza de almacenamiento?


Los repositorios web se dividen en dos categorías, "autónomo" y "administrado". Independiente significa que el navegador puede borrar el repositorio sin intervención del usuario, sin embargo, es menos adaptable para un uso prolongado, así como en presencia de datos críticos. Las bóvedas gestionadas no se limpian automáticamente cuando están llenas. El usuario debe borrar manualmente dichos almacenamientos (a través de la configuración del navegador).

De forma predeterminada, los almacenes web (IndexedDB, Cache API, etc.) se clasifican como independientes, lo que significa que si el control manual no está instalado , el navegador puede borrar el almacenamiento de forma independiente en ciertas condiciones, por ejemplo, al llenar.

Las condiciones para limpiar el almacenamiento son las siguientes:

  • Cuando el almacenamiento está lleno, Chrome elimina los datos, comenzando por el menos solicitado (el más antiguo en términos de tiempo de uso), hasta que se resuelve el problema de desbordamiento.
  • IE 10+ no borra el almacenamiento, pero bloquea la capacidad de escribir datos.
  • Firefox hace lo mismo que Chrome.
  • Safari no vació previamente la bóveda, pero recientemente agregó un período de retención de datos de siete días.

Comenzando con iOS y iPad 13.4, Safari 13.1 en macOS, hay un período de retención de datos de siete días. Esto significa que si el usuario no accede a los datos dentro de los siete días, se eliminarán. Esta política no se aplica a las aplicaciones agregadas a la pantalla de inicio.

Bonus: Promise Wrap Over IndexedDB


IndexedDB es una API de bajo nivel que requiere cierta configuración antes de su uso, lo que puede ser innecesario si necesita almacenar datos simples. A diferencia de la mayoría de las API modernas basadas en Promise, está basada en eventos. Un contenedor de promesas, como idb, oculta algunas características poderosas de este repositorio, pero, lo que es más importante, también oculta sus complejos mecanismos internos (transacciones, versiones).

Conclusión


Los tiempos de almacenamiento limitado y las solicitudes de permisos de usuario para aumentar el límite se han hundido en el olvido. Los sitios pueden almacenar de manera efectiva todos los recursos y datos que necesitan para funcionar. Con la API StorageManager, puede determinar cuánta memoria se usa y cuánta queda. Y al poner el almacenamiento en modo de control manual, puede proteger los datos contra la eliminación.

Nota por:

  • Aquí puede ver cómo escribir una aplicación para notas usando idb.
  • Aquí puede ver cómo trabajan los trabajadores de servicios.

Gracias por tu tiempo. Espero que haya sido bien aprovechado.

More articles:


All Articles