Las Aplicaciones Web Abiertas son simplemente sitios web. Creados usando tecnologías Web standard que funcionan en cualquier buscador y pueden ser desarrolladas utilizando tus herramientas preferidas.
El proyecto Mozilla Labs Open Web Applications propone pequeñas expansiones que permitan convertir sitios existentes en aplicaciones que corran en un entorno de computación rico, divertido y potente. Estas aplicaciones funcionaran tanto en escritorios, buscadores y dispositivos móviles además de ser más faciles de encontrar y ejecutar que un sitio web. Teniendo acceso a un creciente conjunto de novedosas funcionalidades, como la sincronización entre los diferentes dispositivos de usuario.
Describiendo la aplicación
Lo único que debe hacer para crear una aplicación web a partir de un sitio web es añadir el application manifest. Se trata de un archivo JSON que describe su aplicación, incluyendo su nombre, iconos y una descripción legíble.
El manifest debe estar albergado en el mismo dominio que el sitio web y debe servirse con un Content-Type de application/x-web-app-manifest+json.
Para más detalle sobre el manifest vease la documentacion, para ayudarle a arrancar puede probar el online manifest checker.
Publicar la aplicación
- function installCallback(result) {
- // great - display a message, or redirect to a launch page
- }
- function errorCallback(result) {
- // whoops - result.code and result.message have details
- }
- navigator.mozApps.install({
- url: "http://path.to/my/example.webapp",
- onsuccess: installCallback,
- onerror: errorCallback
- });
Invocar navigator.mozApps.install()
hace que el buscador cargue el manifest y pregunte al usuario si desea instalar la aplicación. Si el usuario aprueba la instalación, la aplicación será instalada en el buscador.
Puede opcionalmente pasar el atributo install_data
a la función install(),
para persistir información en el almacén de datos de usuario para aplicaciones instaladas. Esta información puede ser sincronizada con otros dispositivos, pudiendo ser proporcionada por la aplicación empleando la llamada amInstalled()
(Vease Determining whether the app is installed). Por ejemplo:
- navigator.mozApps.install({
- url: "http://path.to/my/example.webapp",
- onsuccess: installCallback,
- onerror: errorCallback,
- install_data: {
- user_id: "some_user"
- }
- });
Derterminar si la aplicación esta instalada
Cuando un buscador carga la página de la aplicación, la página necesita gestionar el caso en que el usuario no haya instalado la aplicación. Es posible comprobar si la aplicación se encuentra instalada mediante la llamada amInstalled()
, de esta manera:
- function getInstalledCallback(data) {
- if (data) {
- // yes, we're installed
- // data.manifest has the manifest
- // data.install_time is when it was installed
- // data.install_origin is the domain that called install
- // data.install_data has the optional data from install
- } else {
- // not installed!
- }
- }
- navigator.mozApps.amInstalled(getInstalledCallback);
Almacenar datos localmente
El localStorage API proporciona almacen de pares llave-valor para información persistente que puede utilizarse para realizar un seguimiento de la información de usuario entre visitas a la aplicación. Si el usuario posee un buscador moderno, como Firefox 4 o posterior, o Chrome, también es posible utilizar IndexedDB, un almacen de datos para el lado del cliente estructurado y de alto rendimiento.
Si posee información que deba ser compartida entre instancias de su aplicación a través de varios dispositivos que utilice el usuario entonces debe usar LA opción install_data
de la función install()
, como indicamos anteriormente.
Ejecución offline y uso de APIs para dispositivos avanzados
- Running offline: detalles y demos que muestran como utilizar HTML5 AppCache
- Online and Offline Events: detección de cambio de estado online offline en el dispositivo
- Utilizar audio y video en su aplicacion
- Drawing Graphics with Canvas
- Drawing 3D Graphics with WebGL
- Utilizar Content-Editable para crear editores de texto completos y rápidos en su aplicación
- Utilizar Archivos de aplicaciones Web con el API de archivos HTML5
- Utilizar Drag and Drop para arrastrar elementos entre y dentro de aplicaciones web
- Detectar la Orientación del Dispositivo