Cómo hacer una “chrome webapp” que enlace a nuestra página web

Cómo hacer una “chrome webapp” que enlace a nuestra página web

  3/22/2012    vhanla

---

Si utilizas Google Chrome como navegador seguramente habrás visto los iconos de páginas y/o aplicaciones web al abrir una nueva pestaña, y si quieres poner tu propio icono o aún ir más lejos y publicarlo en la misma webstore, aquí les muestro lo sencillo que es hacer eso.

^{chrome web apps}

Primer paso

Para ello sólo necesitamos 3 archivos: 2 iconos en formato PNG preferentemente, y 1 archivo json llamado manifest.json

{
   "app": {
      "launch": {
         "web_url": "http://www.codigobit.info/"
      },
      "urls": [ "http://www.codigobit.info/" ]
   },
   "description": "Codigobit - web tutoriales y software",
   "icons": {
      "128": "icon_128.png",
      "24": "icon_24.png"
   },   
   "name": "Codigobit",   
   "version": "1"
}

^{archivo: manifest.json}

Como ven, esas son las sencillas líneas de código que utiliza para agregar nuestra página web como aplicación web para Google Chrome. Claro está que reemplazamos a gusto los valores.

 

Segundo paso – probarlo

Para probarlo, utilizamos el mismo navegador. Nos dirigimos a chrome://settings/extensions y el botón Cargar extensión descomprimida… y luego escribimos la dirección a la carpeta que contiene los tres archivos.

Hacemos clic en Aceptar y ya podremos ver nuestro icono que enlaza a nuestra página web en la lista de iconos de speed dial web apps.

Eso es todo, ahora ya podemos acceder a nuestro sitio web presionando su icono personalizado.

 

Tercer paso – subirlo a la webstore

Publicar nuestra “aplicación web” en la Chrome Webstore nos permitirá darle un toque de profesionalismo además de mantener nuestro icono sincronizado a nuestra cuenta de Chrome, de tal manera que siempre tendremos el icono donde sea que utilicemos el navegador Chrome.

Requerimientos:

Para poder publicar nuestra “aplicación web” es necesario validar nuestro sitio en la webstore, es decir el sitio que la aplicación web enlaza, este requisito es necesario ya que no se podrá publicar nuestro icono. Aunque existe métodos para evitar eso y que publiqué en un post anterior.

Estando en la WebStore accedemos a Developer Dashboard y luego agregamos un nuevo ítem (Add new item)

Empacamos esos archivos en formato ZIP par poder subirlo

Y luego llenamos los datos que nos pide en el formulario de publicación.

Los más importantes son:

• Descripción
• Icono
• Screenshot (capturas) al menos uno de 640x400 píxeles
• Una imagen promocional de 440x280 píxeles
• Sitio verificado (verified site) ahí elegimos el sitio que hemos enlazado en nuestra aplicación web
  
• Categorías, al menos la primaria
• Elegir las regiones donde publicarlos
• El idioma

Y ya pueden publicar los cambios

Si no tienen validado el sitio, en la parte superior derecha donde elegimos el sitio se puede agregar nuestro sitio. Y si aún no hemos agregado nuestro sitio ahí nos guiará cómo hacerlo.

Luego de ello nos pedirá que agreguemos un código HTML en el HEAD de nuestra web.

Copiamos dicho código y actualizamos nuestra plantilla de nuestra página web (la página inicial) y regresamos para finalmente validar el sitio.

Volvemos al formulario de publicación de nuestra aplicación web y refrescamos la lista de sitios presionando el enlace correspondiente (parte superior derecha de la lista de sitios).

Una vez publicado ya podremos visualizarlo en la Webstore de Google Chrome. Por ejemplo el mío quedó así

https://chrome.google.com/webstore/detail/hdnckhfgemhcpnjnaeobcllikijhboik

 

Conclusión

Realizar una “aplicación web” para la Chrome Webstore, que únicamente sirva de enlace a nuestra página web resulta ser relativamente muy sencilla. Lo único complicado sería verificar o validar nuestro sitio web y si no saben cómo hacerlo ya mencioné arriba sobre otra método que nos evita realizar ese paso.

Si tienen dudas pueden mencionarlo en los comentarios.