Hace unos posts, Jaime nos decía que en Chromium ya vienen las aplicaciones activadas por defecto. Anteriormente, nos dijo como activarlas en la versión de desarrollo de Chrome y usar las tres que vienen de serie para ir viendo de qué va el asunto. Bueno, pues si estamos usando dicha versión, ¿por qué no aprovechamos y creamos nuestras propias aplicaciones?
Lo que vamos a ver es como trastear un poco con el código para crear lo que no será más que un acceso directo (eso sí, un poco más avanzado) a un sitio web. Todo lo que necesitamos para ello es un editor de texto, varios iconos y, por supuesto, Chrome. Para explicarlo mejor, vamos a crear una aplicación para acceder a Genbeta.
Qué es una aplicación web
Podemos crear dos tipos de aplicaciones en Chrome: web y locales. Las web son, por ahora y como ya he dicho, algo así como accesos directos sobredesarrollados, pero tienen sus peculiaridades. Además de que nos aparezcan dentro de esas pestañitas tan monas que se reducen a un icono (pin tabs), éstas sólo podremos usarlas para navegar dentro de la web que indiquemos. Cualquier dirección que coloquemos en ellas se abrirá en una pestaña nueva.
Ojo, la aplicación que vamos a crear no podrá ser instalada por un usuario si la subimos a un sitio web. Por cuestiones de seguridad, Chrome es incapaz de cargarla desde allí. Si lo haces, el usuario deberá descargársela y arrastrarla al navegador para poder instalarla.
El código de una aplicación web
Primero, creamos una carpeta donde vamos a guardar todo lo relacionado con nuestra extensión. Luego, creamos un archivo de texto plano que tenga el siguiente código y lo guardamos como manifest.json:
{
"name": "Genbeta",
"description": "Blog sobre Internet y software",
"version": "1",
"app": {
"urls": [
"https://www.genbeta.com/",
"https://www.genbeta.com/"
],
"browse_urls": [
"https://www.xatakamovil.com/",
"https://www.xataka.com/",
"https://www.applesfera.com/"
],
"launch": {
"web_url": "https://www.genbeta.com/"
}
},
"icons": {
"24": "icon_24.png",
"128": "icon_128.png"
},
"permissions": [
"unlimited_storage"
]
}
Veamos que ha pasado aquí:
-
Los campos name, version y description creo que se explican con su propio nombre, ¿no?
-
En el campo urls, indicamos las direcciones a las que puede acceder la aplicación. Por ejemplo, si por alguna razón un enlace de tu página lleva a otro sitio que no esté indicado en esta lista, (como otra página que esté bajo el dominio pero sin www) debes indicarlo aquí. Toda URL que no esté listada, se abrirá en otra pestaña.
-
El campo brows_urls es opcional y es donde indicamos las direcciones a las que se puede entrar desde la aplicación. Cualquier otra dirección que no esté incluida aquí, se abrirá en otra pestaña. En el código de ejemplo, yo he añadido a nuestro blogs hermanos Xataka Móvil, Xataka y Applesfera. Eso quiere decir que cualquier enlace a esos blogs se abrirá dentro de la misma pestaña.
-
En launch, indicamos la dirección que se abrirá en la aplicación.
-
El campo icons señala los iconos que se utilizarán para mostrar tu aplicación en la pestaña de aplicaciones y en la parte superior de la pestaña. Se pueden indicar cuatro tamaños: 128px, 48px, 32px y 24px. Con 128px y 24px es suficiente. Si no indicas un icono para la pestaña (24px), Chrome usará el favicon del sitio en su lugar.
-
El campo permissions le da a la web varios permisos. En este caso, una cuota ilimitada de almacenamiento de datos locales. Si no se pone, se aplica un límite de 5 MB. Este campo no es obligatorio añadirlo.
A continuación, debemos incluir los iconos que usará nuestra aplicación. Como mínimo, debemos usar uno de 128 px y otro de 48 px. Podemos hacerlos nosotros mismos o buscar por la red, como por ejemplo en Mr. Icons, donde los iconos tienen licencia Creative Commons. Pueden estar en JPG o PNG.
Cargar la aplicación
Ya con nuestra aplicación, podemos hacer dos cosas: cargarla en Chrome desde la carpeta donde la hemos guardado o convertirla a formato CRX (y después cargarla). Mientras estamos desarrollándola, lo más práctico es lo primero, pues si hacemos cualquier cambio en el código, podemos cargarla de nuevo haciendo clic en un enlace.
Para cargar la extensión, vamos al panel de extensiones de Chrome, expandimos el modo de programador y pinchamos en Cargar extensión sin empaquetar. Nos dirigimos a la carpeta donde guardamos nuestra aplicación y la cargamos.
Y ya está listo. Si hemos cometido algún error en el código, Chrome nos avisará de ello. Si no, aparecerá nuestro icono en la lista de aplicaciones que aparece en una nueva pestaña. Al hacer clic en él, el sitio web indicado se abrirá como una aplicación.
Si lo que queremos es obtener un archivo CRX, desde el mismo modo de programador pinchamos en “Extensión de empaque”. Nos aparecerá una ventana donde, en el cuadro “Directorio raíz de la extensión” deberemos seleccionar la carpeta de la aplicación. Esto nos generará el CRX, que podemos usar también para cargar la aplicación. Si luego queremos ver el contenido de este archivo, sólo tenemos que cambiarle la extensión a ZIP y descomprimirlo.
Y eso es todo. Para hacer vuestra propia aplicación, ya sabéis: copiáis el código aquí incluido y sustituís las direcciones por aquellas que vosotros necesitáis. Por ahora, esto no es más que un pequeño juego para ir explorando como funcionan las aplicaciones y, en el fondo, sólo es otra forma más de personalizar vuestro navegador.
Más información | Installable Web Apps – Developer’s Guide
Ver 18 comentarios