Cómo hacer una Google Chrome Web App

7/11/2010 vhanla

Hace no mucho cuando vimos a Google Chrome OS, podíamos ver un apartado de aplicaciones para el ~~navegador~~ Sistema Operativo. Pues esa opción también estará disponible en Google Chrome, y ya es posible jugar con ella en la versión en desarrollo (Dev channel).

Y qué mejor manera de probarlo, haciendo una aplicación por nosotros mismos.

Esta vez vamos a realizar (en realidad convertir) una app web online en una aplicación, es decir listarla en las aplicaciones.

Si no saben aún cómo activar el modo de Chrome Apps vean el anterior artículo.

De acuerdo, esto va a ser más que fácil, vamos convertir gmail en una aplicación para Chrome Apps, para ello sólo vamos a necesitar tres archivos.

manifest.json (contiene datos que son necesarios para que el navegador lo reconozca como una aplicación)
icon_24.png (para mostrarla en la pestaña)
icon_128.png (para mostrarla en la lista de aplicaciones)

I. Primer paso, creamos una carpeta para nuestra aplicación.

II. Creamos un documento nuevo cuyo nombre será “manifest.json”

Aquí escribimos lo siguiente:

{
  "name": "Google Mail",
  "version": "1",
  "icons": {
    "24": "icon_24.png",
    "128": "icon_128.png"
  },
  "permissions": [
    "unlimited_storage",
    "notifications"
  ],
  "web_content": {
    "enabled": true,
    "origin": "https://mail.google.com",
    "paths": [
      "/mail/"
    ]
  },
  "app":{"launch": {
    "web_url": "https://mail.google.com/mail/"
  }}
}

Guardamos ese contenido, y finalmente colocamos los correspondientes iconos:

^{<-- clic derecho y guardar o arrastrarlas y soltarlas en la carpeta del proyecto}

Y les quedaría algo así

Ahora sólo queda hacerla funcionar mediante chrome://extensions

Para terminar, cargamos la carpeta que contiene nuestro proyecto. Y eso es todo, ya podemos probar nuestra aplicación en Google Chrome.

Para hacer una aplicación que sea offline, es lo mismo guíense de esta plantilla.

{
   "app": {
      "launch": {
         "local_path": "game.html"
      }
   },
   "icons": {
      "128": "icon_128.png",
      "24": "icon_24.png"
   },
   "name": "Adventure Land",
   "permissions": [ "unlimited_storage", "notifications" ],
   "version": "1"
}

No contiene “web_content” ni “web_url”, sino “local_path” con el archivo html que contendrá la página principal de la aplicación.

Para mayores detalles consulten la documentación oficial de Google Chrome

NOTA: Este tutorial puede no funcionar dependiendo de los cambios que Google haga.

This work is licensed under a Creative Commons Attribution Non-commercial Share Alike license.

Otras páginas