Las aplicaciones web son construidas usando tecnologías web estándar. Funcionan en cualquier navegador web moderno y pueden ser desarrolladas usando sus herramientas favoritas. Algunas características que distinguen las aplicaciones web de los sitios web: Las aplicaciones son instaladas por un usuario, son autónomas, no siempre requieren el marco de una ventana del navegador y pueden construirse para ser usadas sin conexión. Gmail, Twitter y Etherpad son aplicaciones web.
El proyecto Mozilla Openv Web Apps propone algunos pequeños agregados a los sitios existentes para convertiros en aplicaciones que funcionen en un entorno rico, divertido y poderoso. Estas aplicaciones se ejecutan en navegadores de escritorio y dispositivos móviles y facilitan al usuario descubrir y abrir sitios web. Tiene acceso a una cantidad creciente de características novedosas como la sincronización a través de todos los dispositivos del usuario.
Antes de comenzar
Si es un programador principiante buscando escribir aplicaciones web, debería verificar el estado de implementación de la API.
Publicando la aplicación
La única cosa que tiene que hacer para crear una aplicación web desde un sitio es agregar un manifiesto de aplicación. Es un archivo JSON que describe la aplicación, incluyendo su nombre, sus íconos y una descripción legible para los humanos.
El manifiesto debe estar alojado en el mismo dominio que el sitio web y debe ser enviado con un Content-Type de application/x-web-app-manifest+json (Nota: actualmente no hace falta cumplirlo en Firefox, pero es necesario para el Marketplace de Firefox OS). Para más detalles sobre el manifiesto, refiérase a la documentación. Hay herramientas para verificar la validez del manifiesto. Vea Validando un manifiesto.
Política de mismo origen
Es importante notar que cada aplicación debería estar alojada en su propio dominio. Aplicaciones diferentes no deberían compartir el mismo dominio. Una solución aceptable es alojar cada aplicación en un subdominio diferente, por ejemplo. Vea Preguntas frecuentes sobre manifiestos de aplicaciones para más información sobre orígenes.
Verificando si la aplicación está instalada
Cuando un navegador carga la página de la aplicación, esa página necesita manejar el caso en que el usuario no tenga la aplicación instalada. Puede verificar si la aplicación está instalada llamando a checkInstalled(), de esta forma:
var request = navigator.mozApps.checkInstalled("https://ruta.a/mi/aplicacion.de.ejemplo");
request.onsuccess = function() {
if (request.result) {
// está instalada
} else {
// no está instalada
}
};
request.onerror = function() {
alert('Error verificando estado de la instalación: ' + this.error.message);
};
Instalando la aplicación
Puede distribuir su aplicación directamente desde su sitio. También es buena idea probar instalarla desde su sitio, para asegurarse que el manifiesto valide, antes de enviarla al Marketplace de Firefox OS.
Solamente construya un botón o enlace que invoque este JavaScript:
var request = navigator.mozApps.install("https://ruta.a/mi/aplicacion.de.ejemplo");
request.onsuccess = function() {
// perfecto - mostrar un mensaje o redirigir a la página inicial
};
request.onerror = function() {
// oops - this.error.name tiene detalles
};
Invocar navigator.mozApps.install() causa que el navegador cargue el manifiesto (ej. aplicacion.de.ejemplo) y pregunte al usuario si quiere instalar la aplicación. Si el usuario aprueba la instalación, la aplicación se instala dentro del navegador. En OS X, la aplicación se instalará en la carpeta "Aplicaciones".
El segundo parámetro es un argumento install_data para navigator.mozApps.install(), que hace persistir alguna información en el almacenamiento de datos de las aplicaciones instaladas por el usuario. Esta información puede ser sincronizada a sus otros dispositivos y puede ser recuperada por la aplicación usando una llamada a checkInstalled() (vea Verificando si una aplicación está instalada). Por ejemplo:
navigator.mozApps.install(
"https://ruta.a/mi/ejemplo.webapp",
{
user_id: "algun_usuario"
}
);
Promocionando la aplicación
Mozilla está construyendo el Marketplace de aplicaciones que se ocupa del descubrimiento, opiniones, valoraciones y facturación, usando una infraestructura abierta que puede ser usada por terceros para crear sus propias tiendas. Pero no es obligatorio listar las aplicaciones en una tienda.
Si desea que las personas paguen por su aplicación, vea Pagos en el Marketplace.
Se espera que el Marketplace de Firefox OS esté disponible pronto. También puede registrarse en el newsletter de disenadores de aplicaciones para recibir noticias sobre el progreso del Marketplace de Firefox OS, como también consejos y trucos para crear aplicaciones.
Ejecutar sin conexión y usar APIs avanzadas de dispositivos
Los navegadores web modernos han agregado muchas características para permitir que las aplicaciones se ejecuten sin conexión o accedan a las capacidades de los dispositivos. Aquí hay algunos enlaces útiles:
- Ejecutando sin conexión: detalles y demostraciones sobre como usar AppCache de HTML5
- Eventos con y sin conexión: detectar cuando un dispositivo cambia su estado entre con conexión y sin conexión
- Usando audio y video en una aplicación
- Dibujando gráficos con Canvas
- Dibujando gráficos 3D con WebGL
- Usando Content-Editable para crear editores de texto enriquecido completos y rápidos en una aplicación
- Usando archivos desde aplicaciones web con la API File de HTML5
- Usando arrastrar y soltar para arrastrar ítems entre y dentro de aplicaciones web
- Detectando orientación del dispositivo
Guardando datos localmente
La API localStorage provee un almacenamiento clave-valor API de datos presistenes que se puede usar para mantener el rastro de datos del usuario entre visitas a la aplicación. Si el usuario tiene un navegador moderno, como Firefox 4 o superio, o Google Chrome, también puede usar IndexedDB, un almacenamiento de datos del lado del cliente de alto rendimiento
Si tiene datos que deberían compartirse entre instancias de la aplicación a través de todos los dispositivos que utilice un usuario, debería emplear el parámetro install_data en la función install() como se describió más arriba.
Ejemplos
Algunos ejemplos de aplicaciones web abiertas:
- MozillaBall Example (usa canvas para dibujar los gráficos y JavaScript API para instalar la aplicación)