¿Qué es Firefox OS? y Primeros pasos

La tecnología ya No existe, post solo de referencia

Firefox OS es un sistema operativo de código abierto basado en HTML5 con núcleo Linux; creado para dispositivos móviles, entiéndase smartphones y tablets; las aplicaciones de Firefox OS no son más que Open Web apps, esto no es más que Aplicaciones HTML5 instaladas en un dispositivo que ejecuta Firefox OS; ¿qué significado tiene esto para los desarrolladores web?, que podemos utilizar tecnologías web como HTML5, CSS y JavaScript y poco más para tener lista una aplicación para Firefox OS.

¿Qué quisimos decir con poco más?, simplemente agregando a nuestra aplicación web los metadatos necesarios que permita indicar que la aplicación web en cuestión es una Open Web apps; y por lo tanto podrá ser instalado en un dispositivo con Firefox OS, los metadatos están basados en un archivo manifiesto; como crear el archivo manifiesto lo trataremos en siguientes artículos.

Otro punto importante al que abordaremos en este artículo es la diferencia entre las aplicaciones web y sitios web; ambas son construidas usando tecnologías web estándar. Funcionan en cualquier navegador web; Algunas de las características que distinguen las aplicaciones web de los sitios web son que 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 archivo manifiesto (manifest) en Firefox OS

Un Open Web App manifest contiene información necesaria para convertir una aplicación web en una Open Web App; en otras palabras, en todas las aplicaciones Firefox OS es necesario la presencia de un manifest.webapp ubicada en el directorio raíz de la aplicación; además de esto; el archivo manifest de la aplicación proporciona información útil sobre una aplicación (tal como nombre, autor, icono y descripción); este documento no es más que un archivo JSON con cierta data clave; veamos un ejemplo del mismo:

{
  "name": "Nombre-Aplicación",
  "description": "Descripción Aplicación.",
  "launch_path": "/index.html",
  "icons": {
    "60": "/img/icon-60.png",
    "90": "/img/icon-90.png",
    "120": "/img/icon-120.png",
    "128": "/img/icon-128.png"
  },
  "developer": {
    "name": "Nombre desarrollador",
    "url": "Sitio web desarrollador"
  },
  "default_locale": "es"
}

• name: El nombre de la aplicación.
• description: Una descripción de la aplicación (la longitud máxima es de 1024 caracteres).
• launch_path: La ruta a la página principal de la aplicación; el archivo index de la aplicación.
• icons: Un mapa de diversos tamaños en pixeles del icono de la aplicación; los iconos deben ser cuadrados.
• developer: Aquí daremos información acerca del desarrollador de la aplicación:
  • name: El nombre del desarrollador.
  • url: El sitio web del desarrollador.
• default_locale: Indica en que idioma esta escrito el manifest.

Estos son solo algunos de los campos que podemos colocar en el manifest; la documentación completa de cada uno de ellos la podemos obtener en la página oficial aquí.

Validar el manifest

Para validar el manifest, podemos hacerlo utilizando el manifest validator.

Simulador de Firefox OS

El Simulador de Firefox OS es una valiosa herramienta que permite probar y depurar tu aplicación en el escritorio a través de un simulador; es decir; sin la necesidad de tener un dispositivo físico Firefox OS.

Instalando el Simulador de Firefox OS

¿Cómo podemos obtener el simulador de Firefox OS?; fácil, el simulador no es más que una extensión para el navegador Firefox; el cual podemos instalar desde la siguiente página.

Iniciar el Simulador de Firefox OS

Una vez instalado el Simulador de Firefox OS procedamos a iniciar el mismo; para eso vamos a:

Herramientas >> Desarrollador web >> Simulador Firefox OS:

Veremos todas las opciones que nos ofrece el tablero del Simulador de Firefox OS; entre ellas la opción de correr o iniciar el simulador.

Demosle click en:

Y se abrirá una nueva ventana; en la cual se estará ejecutando el simulador.

Opciones del Simulador de Firefox OS

Ahora veamos otras de las funcionalidades del panel de control Dashboard del simulador.

¿Cómo instalar aplicaciones en el Simulador de Firefox OS?

Muy sencillo; solo debemos de agregar el manifest.webapp de nuestra aplicación:

Para este tutorial instalaré: Madurisimo.

Y veremos una pantalla parecida a la siguiente.

Es muy probable que debas de de refrescar la pestaña del navegador (F5) para ver los cambios.

¿Que podemos hacer con las aplicaciones instaladas?

Luego de instalada la(s) aplicación(es) podemos realizar las siguientes funciones:

• Reinstalar la aplicación a través de la opción Refresh.
• Iniciar el proceso de depuración a través de la opción Connect.
• Desinstalar la aplicación al darle a la X que aparecerá al pasar el cursor por la aplicación.

Conclusiones

El Simulador de Firefox OS es una estupenda herramienta que nos permite adentrarnos en el mundo de Firefox OS y ver que nos ofrece, probar Firefox OS, sus aplicaciones y probar nuestras propias aplicaciones desarrolladas para esta plataforma web.

¿Cómo instalar y verificar si está instalada una aplicación Firefox OS?

Como explicamos en el artículo ¿Qué es Firefox OS?; Las aplicaciones de Firefox OS no son más que aplicaciones Web escritas en HTML, CSS y javaScript; luego de creada la aplicación el siguiente paso sería publicarla en la Web y agregar un botón de instalación a la aplicación en los dispositivos con Firefox OS:

Agregar la opción de instalar la aplicación Web en dispositivos con Firefox OS

Luego de que tengamos nuestra aplicación y manifest.webapp publicados en la Web, debemos hacer uso del API de navigator.mozApps.install para agregar la funcionalidad de instalar la aplicación en dispositivos con Firefox OS; en otras palabras; hacer posible que la aplicación se pueda instalar.

Para este ejemplo usaremos un botón; que al ser pulsado instalará la aplicación en nuestro dispositivo:

<script>
    function install(){
        // el manifest.webapp publicada en nuestra web
        var manifest_url = "http://my.webapp.com/manifest.webapp";

        // instalamos la aplicacion
        var request = navigator.mozApps.install("manifest_url");

        request.onsuccess = function() {
           // perfecto, se ha instalado la aplicacion
        };
        request.onerror = function() {
            alert(this.error.name);
        };
    }
</script>

<button onclick="install(); return false;">
    Instalar
</button>

Un javaScript muy sencillo; solo utilizamos el API de navigator.mozApps.install pasandole como parametro el archivo manifest; y eso sería todo.

Verificando si la aplicación está instalada en el dispositivo

Para verificar si la aplicación esta o no instalada en el dispositivo, haremos uso del API de navigator.mozApps.checkInstalled

            function checkInstalled() {

                // verificamos si esta o no instalado la aplicacion
                var request = navigator.mozApps.checkInstalled(manifest_url);

                request.onsuccess = function() {
                    if (request.result) {
                        // esta instalada
                    } else {
                        // no esta instalada
                    }
                };
                request.onerror = function() {
                    alert(this.error.message);
                };
            }

Como en el caso anterior, solo debemos de pasarle como parámetro el archivo manifest de nuestra aplicación a la función navigator.mozApps.checkInstalled para verificar si está o no instalada la aplicación.