Dado que las conexiones a Internet pueden ser débiles o inexistentes, debes tener en cuenta el uso sin conexión: escribe tu app como si no tuviera conexión a Internet. Una vez que la app funcione sin conexión, agrega las funciones de red que necesites para realizar más tareas cuando esté en línea. Sigue leyendo para obtener sugerencias sobre la implementación de tu app habilitada para uso sin conexión.
Descripción general
Las Apps de Chrome obtienen lo siguiente de forma gratuita:
- Los archivos de tu app (todos sus elementos JavaScript, CSS y fuentes, además de otros recursos que necesita (como imágenes)) ya se descargaron.
- Tu app puede guardar y, opcionalmente, sincronizar pequeñas cantidades de datos con la API de Chrome Storage.
- La app puede detectar cambios en la conectividad mediante la detección de eventos en línea y sin conexión.
Sin embargo, esas capacidades no son suficientes para garantizar que tu app funcione sin conexión. Tu app habilitada sin conexión debe seguir estas reglas:
- Usa datos locales siempre que sea posible.
- Cuando uses recursos de Internet, usa
XMLHttpRequestpara obtenerlos y, luego, guarda los datos de forma local. Puedes usar la API de Chrome Storage, IndexedDB o Filesystem para guardar los datos de forma local. - Separa la IU de tu app de sus datos.
- Separar la IU y los datos no solo mejora el diseño de la app y facilita la tarea de habilitar el uso sin conexión, sino que también te permite proporcionar otras vistas de los datos del usuario. Un framework de MVC puede ayudarte a mantener la IU y los datos separados.
- Supongamos que tu app puede cerrarse en cualquier momento.
- Guarda el estado de la aplicación (de forma local y remota, cuando sea posible) para que los usuarios puedan retomarla donde la abandonaron.
- Prueba tu app en detalle.
- Asegúrate de que tu app funcione bien en situaciones comunes y complicadas.
Restricciones de seguridad
Las Apps de Chrome están limitadas en cuanto a dónde pueden colocar sus recursos:
- Debido a que los datos locales son visibles en la máquina del usuario y no se pueden encriptar de forma segura, los datos sensibles deben permanecer en el servidor. Por ejemplo, no almacenes contraseñas ni números de tarjetas de crédito localmente.
- Todo el contenido de JavaScript que ejecute la app debe estar en el paquete de la app. No puede estar intercalado.
Todos los estilos, imágenes y fuentes de CSS se pueden ubicar inicialmente en el paquete de la app o en una URL remota. Si el recurso es remoto, no puedes especificarlo en tu HTML. En su lugar, obtén los datos mediante
XMLHttpRequest(consulta Cómo hacer referencia a recursos externos). Luego, puedes consultar los datos con una URL de BLOB o (mejor aún) guardar y cargar los datos con la API del sistema de archivos.
Sin embargo, puedes cargar recursos multimedia de gran tamaño, como videos y sonidos de sitios externos. Un motivo de esta excepción a la regla es que los elementos <video> y <audio> tienen un buen comportamiento de resguardo cuando una app tiene conectividad limitada o nula. Otra razón es que, actualmente, recuperar y entregar contenido multimedia con XMLHttpRequest y las URLs de BLOB no permite la transmisión ni el almacenamiento en búfer parcial.
Para proporcionar un iframe de zona de pruebas, puedes crear una etiqueta <webview>. Su contenido puede ser remoto, pero no tiene acceso directo a las APIs de la app de Chrome (consulta Cómo incorporar páginas web externas).
Algunas de las restricciones de las Apps de Chrome se aplican a la Política de Seguridad del Contenido (CSP), que siempre es lo siguiente y no se puede cambiar en las Apps de Chrome:
default-src 'self';
connect-src * data: blob: filesystem:;
style-src 'self' blob: data: filesystem: 'unsafe-inline';
img-src 'self' blob: data: filesystem:;
frame-src 'self' blob: data: filesystem:;
font-src 'self' blob: data: filesystem:;
media-src * data: blob: filesystem:;
Especificando sin conexión_enabled
Se supone que tu app funciona bien sin conexión. De lo contrario, debes anunciarlo para que el ícono de inicio se atenúe cuando el usuario no tenga conexión. Para hacerlo, configura offline_enabled como false en el archivo de manifiesto de la app:
{
"name": "My app",
...
"offline_enabled": false,
...
}
Cómo guardar datos de forma local
En la siguiente tabla, se muestran las opciones disponibles para guardar datos localmente (consulta también Administrar datos).
| API | Uso recomendado | Notas |
|---|---|---|
| API de Chrome Storage | Pequeñas cantidades de datos de cadena | Ideal para la configuración y el estado. Fáciles de sincronizar de forma remota (pero no es necesario) No es recomendable para grandes cantidades de datos debido a las cuotas. |
| API de IndexedDB | Datos estructurados | Permite búsquedas rápidas de datos. Úsalo con el permiso de almacenamiento ilimitado. |
| API de Filesystem | Otros pagos | Proporciona un área de zona de pruebas en la que puedes almacenar archivos. Úsalo con el permiso de almacenamiento ilimitado. |
Guardado de datos de forma remota
En general, tú decides cómo guardar datos de forma remota, pero algunos frameworks y APIs pueden ayudar (consulta Arquitectura de MVC). Si usas la API de Chrome Storage, todos los datos sincronizables se sincronizarán automáticamente cada vez que la app esté en línea y el usuario haya accedido a Chrome. Si el usuario no accedió, se le pedirá que lo haga. Sin embargo, ten en cuenta que los datos sincronizados del usuario se borran si este desinstala tu app. {QUESTION: true?}
Considera guardar los datos de los usuarios durante al menos 30 días después de desinstalar la app para que tengan una buena experiencia si la reinstalan.
Separa la IU de los datos
El uso de un framework de MVC puede ayudarte a diseñar e implementar tu app de modo que los datos estén completamente separados de la vista de la app sobre los datos. Consulta Arquitectura de MVC para obtener una lista de los frameworks de MVC.
Si tu app se comunica con un servidor personalizado, el servidor debería proporcionarte datos, no fragmentos de HTML. Piensa en términos de las APIs de RESTful.
Una vez que tus datos están separados de la app, es mucho más fácil proporcionar vistas alternativas de los datos. Por ejemplo, puedes proporcionar una vista del sitio web de cualquier dato público. La vista de un sitio web no solo puede resultar útil cuando el usuario no usa Chrome, sino que también permite que los motores de búsqueda encuentren los datos.
Prueba la configuración
Asegúrate de que tu app funcione correctamente en las siguientes circunstancias:
- La app se instala y se desconecta de inmediato. En otras palabras, la app se usa por primera vez sin conexión.
- La aplicación se instala en una computadora y luego se sincroniza con otra.
- La app se desinstala y se vuelve a instalar de inmediato.
- La app se ejecuta en dos computadoras a la vez, con el mismo perfil. La app debe comportarse de manera razonable cuando una computadora se desconecta, el usuario realiza varias acciones en esa computadora y, luego, la computadora vuelve a conectarse.
- La app tiene una conectividad intermitente que, a menudo, alterna entre línea y sin conexión.
Además, asegúrate de que la app no guarde datos sensibles del usuario (como contraseñas) en su máquina.