Debido a que las conexiones a Internet pueden ser débiles o inexistentes, debes considerar el uso sin conexión primero: escribirás tu app como si no tuviera conexión a Internet. Cuando la app funcione sin conexión, agrega lo que sea la funcionalidad de red que necesitas para que tu app realice más acciones cuando está en línea. Sigue leyendo para obtener sugerencias implementar tu app habilitada para el uso sin conexión.
Descripción general
Las Apps de Chrome obtienen lo siguiente de forma gratuita:
- Los archivos de la app: todos sus elementos JavaScript, CSS y fuentes, además de otros recursos que necesita (como imágenes) ya están descargadas.
- Tu app puede guardar y, de manera opcional, sincronizar pequeñas cantidades de datos con la API de Chrome Storage.
- Tu app puede detectar cambios en la conectividad mediante eventos en línea y sin conexión.
Sin embargo, esas habilidades no son suficientes para garantizar que tu app funcione sin conexión. Habilitados para el uso sin conexión la app debe seguir estas reglas:
- Usa datos locales siempre que sea posible.
- Cuando uses recursos de Internet, utiliza
XMLHttpRequestpara obtenerlos y, luego, guarda los datos de forma local. Puedes usar la API de Chrome Storage, IndexedDB o la API del sistema de archivos para guardar 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 ofrecer otras vistas de los datos del usuario. Un framework de MVC puede ayudar debes mantener la IU y los datos separados.
- Supongamos que tu app puede cerrarse en cualquier momento.
- Guardar el estado de la aplicación (de forma local y remota, cuando sea posible) para que los usuarios puedan recoger donde sea que quedaron.
- Prueba tu app en detalle.
- Asegúrate de que la app funcione bien tanto en situaciones comunes como complejas.
Restricciones de seguridad
Las Apps de Chrome están limitadas en cuanto a dónde pueden colocar sus recursos:
- Dado que los datos locales son visibles en la máquina del usuario y no se pueden encriptar de forma segura, los datos sensibles los datos deben permanecer en el servidor. Por ejemplo, no almacenes contraseñas ni números de tarjetas de crédito de forma local.
- Todo el contenido de JavaScript que ejecuta la app debe estar en el paquete de la app. No puede estar intercalado.
Todos los estilos, las imágenes y las fuentes de CSS se pueden ubicar inicialmente en el paquete de la app. o en una URL remota. Si el recurso es remoto, no podrás especificarlo en tu HTML. En su lugar, obtén la datos con
XMLHttpRequest(consulta Cómo hacer referencia a recursos externos). Luego, puedes consultar datos con una URL de BLOB o, mejor aún, guardar y cargar los datos con la API de Filesystem
Sin embargo, puedes cargar grandes recursos multimedia, como videos y sonidos de sitios externos. Uno
El motivo de esta excepción a la regla es que los elementos <video> y <audio> tienen un buen resguardo.
cuando una app tiene conectividad limitada o nula. Otra razón es que la recuperación y entrega
Por el momento, el 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 API de la app de Chrome (consulta 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 la siguiente y no se puede cambiar para 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:;
Especificación sin conexión_habilitado
Se supone que tu app se comporta bien sin conexión. Si no es así, deberías publicitarlo para que
que el ícono de inicio se atenúe cuando el usuario no tiene conexión. Para ello, establece offline_enabled en false.
En el archivo de manifiesto de la app, haz lo siguiente:
{
"name": "My app",
...
"offline_enabled": false,
...
}
Guarda datos de forma local
En la siguiente tabla, se muestran las opciones disponibles para guardar datos de forma local (consulta también Administrar datos).
| API | Mejor uso | Notas |
|---|---|---|
| API de Chrome Storage | Pequeñas cantidades de datos en cadena | Ideal para la configuración y el estado. Es fácil 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 unlimitedStorage. |
| API del sistema de archivos | Algo más | Proporciona un área de zona de pruebas en la que puedes almacenar archivos. Úsalo con el permiso unlimitedStorage. |
Guarda datos de forma remota
En general, tú decides cómo guardar los datos de forma remota, pero algunos frameworks y APIs pueden ayudarte (consulta MVC) Arquitectura). Si usas la API de Chrome Storage, todos los datos sincronizables se se sincroniza cada vez que la aplicación está en línea y el usuario accede a Chrome. Si el usuario no accedió, se le pedirá que acceda a la cuenta. Sin embargo, ten en cuenta que los datos sincronizados del usuario se borran si este desinstala tu app. {QUESTION: true?}
Analiza la posibilidad de ahorrar datos durante al menos 30 días después de desinstalar la aplicación, de modo que los usuarios tendrán una buena experiencia si reinstalan la app.
Separa la IU de los datos
El uso de un framework MVC puede ayudarte a diseñar e implementar tu app para que los datos estén separadas de la vista de la app sobre los datos. Consulta Arquitectura de MVC para obtener una lista de frameworks de MVC.
Si tu app se comunica con un servidor personalizado, este debería proporcionarte datos, no fragmentos de HTML. Piensa en de las APIs de RESTful.
Una vez que los datos se separan de la app, es mucho más fácil proporcionar vistas alternativas de los datos. Por ejemplo, puedes proporcionar una vista de sitio web de todos los datos públicos. La vista de un sitio web no solo puede útil cuando el usuario está lejos de Chrome, pero puede permitir que los motores de búsqueda encuentren los datos.
Prueba
Asegúrate de que tu app funcione bien en las siguientes circunstancias:
- Se instala la app y se desconecta inmediatamente. En otras palabras, cuando se usa la app por primera vez no tiene conexión.
- La app se instala en una computadora y, luego, se sincroniza con otra.
- La app se desinstala y, luego, se vuelve a instalar inmediatamente.
- La app se ejecuta en dos computadoras al mismo tiempo y con el mismo perfil. La app debe comportarse cuando una computadora se desconecta, el usuario hace un montón de cosas en esa computadora y la computadora vuelve a estar en línea.
- La app tiene una conectividad intermitente que suele cambiar entre en línea y sin conexión.
Además, asegúrate de que la aplicación no guarde datos sensibles del usuario (como contraseñas) en la máquina.