Hemos dado por obsoleto este artículo, ya que en en 2020, Google finalizó el soporte para Chrome Apps en Windows, Mac y Linux. Google ha estado impulsando el desarrollo de PWA como el futuro de las aplicaciones web en todas las plataformas, debido a su capacidad de ofrecer una experiencia de usuario más rica y eficiente. De hecho, si quieres que una aplicación se instale en Chrome deberías hacer una PWA. Tenemos un manual dedicado a las Progressive Web Apps. Incluso, con tu PWA consigues que tu aplicación pueda ser usada en cualquier dispositivo (ordenador, tablet o móvil) con un navegador moderno, no solo en Chrome. Otra posibilidad sería crear una extensión de Chrome, pero los objetivos y posibilidades serían distintos.

Los primeros años en que salieron los navegadores no se pensaba que dentro del mismo se llegarían a crear aplicaciones que realizan alguna función extra, aparte de navegar por Internet, tema que en la actualidad es algo normal, y llegan las grandes preguntas: ¿cómo se puede hacer eso? o ¿tendrá la persona que aprender algún lenguaje en especial que forme parte del navegador?

Para muchos que están en el mundo del desarrollo web, saben que los navegadores implementan extensiones que realizan funciones específicas, como la interacción con redes sociales como Facebook, Twitter, etc. Por otro lado, hay otras extensiones que sincronizan los marcadores entre el navegador y un servidor que los guarda. En conclusión, un sinfín de extensiones que ayudan al usuario a tener una mejor experiencia usando el navegador preferido.

La finalidad de este artículo es presentar que el famoso navegador Google Chrome va más allá de la extensiones. En él pueden desarrollar aplicaciones que para muchas personas sería algo nuevo, pero lo es relativamente, debido a que recientemente Google lanzó la versión número 23 de Chrome, la cual soporta las nuevas APIs para desarrollar, y la última actualización ha sido la versión 25, lo que hace que existan nuevas API’s y las actuales sean más maduras y que las betas lo sean menos.

Para los que somos seguidores de Chrome no es nada nuevo, ya que en el evento de Google IO 2012 pudimos ver la presentación llamada “La próxima generación de las aplicaciones de Chrome”, donde ingenieros que trabajan en Google presentaron espectaculares ejemplos donde cualquier desarrollador empedernido quedaría con las ganas de hacer una para gustos propios o para algún cliente.
Lo más llamativo de todo esto es que Google le ha dado una fuerte promoción a estas APIs a través de manuales, vídeos y teleconferencias, para que los fanáticos y desarrolladores vean los ejemplos y que los mismos muestran, por ejemplo:

• Cliente TCP
• Servidor web
• Editor de texto
• Arduino servo control
• Calculadora
• ...y muchas más

Con los nombres que se pueden ver en la lista se llega a la conclusión de que Google ha creado APIs con mucho alcance y con estas sólo falta proponerse un proyecto, abrir nuestro editor de texto favorito y escribir código.

En el siguiente enlace que te tiene la presentación en el evento se podrán ver algunos de los ejemplos mencionados en la pequeña lista de ejemplos. Pero el vídeo está en inglés. Hasta el día de hoy no existe una versión traducida o subtitulada, que sería la ideal para comunidad de habla hispana. Con este otro enlace se puede ver una lista de vídeo con muchos ejemplos, eso sí, todo en inglés.

La duda que viene a la mente es si necesitaría aprender un nuevo lenguaje de programación extra. De ninguna manera, solamente con tener conocimientos en los siguientes lenguajes de programación, ya se tiene un paso adelantado:

• HTML (lenguaje de etiquetas)
• JAVASCRIPT (lenguaje de scripting del lado del cliente)
• CSS (Hojas de estilos)
• JSON (Javascript Object Notation)

Con estos conocimientos en sencillo poder crear el clásico "Hola mundo" que siempre hace cualquier programador cuando aprende un nuevo lenguaje o tecnología.

Con las instrucciones mencionadas no tendrás problemas si estas usando una API experimental.

En el siguiente ejemplo se hará el clásico “Hola Mundo” que es muy usado por las personas cuando empiezan una nueva aventura de código, lo mejor es iniciar por una aplicaciones sencilla.

Los siguientes archivos son los que usaremos en nuestra app, además se explicará su función específica.

• manifest.json
• main.js
• index.html
• main.css

Códigos:

manifest.json

{
"manifest_version": 2,
"name": "Hello World",
"version": "1",
"minimum_chrome_version": "23",
"icons": {
   "16": "icon_16.png",
   "128": "icon_128.png"
},
"app": {
   "background": {
   "scripts": ["main.js"]
   }
}
}

Explicación:
EL código es el corazón de la aplicación, ya que establece los requisitos que se necesitan para que el resultado esperado se muestre.

• “manifest_version”: se debe utilizar la versión 2 que el navegador lo exige para poner en marcha nuestro aplicativo
• “name”: Es el nombre que se brinda de parte del desarrollador
• “version”: Parámetro que es abierto a la apreciación del programador, si se desea se puede iniciar desde 0.1
• “minimun_chrome_version”: Se refiere a la versión mínima de navegador que puede usar este programita
• “icons”: Obtiene las rutas de los iconos que forman parte de nuestro programa
• “scripts”: Están las rutas de los códigos Javascript que realizarán el trabajo de conexión con los APIs y manipulación de los datos

main.js

chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html',
   {width: 500, height: 309});
});

Explicación:
El código muestra 3 líneas que realizarán los eventos para ver el aplicativo en acción.

• “chrome.app.runtime”: manipula el ciclo de vida de la aplicación, además de la instalación, los eventos y cerrar la misma
• “chrome.app.window”: Permite crear ventanas fuera del navegador que pueden ser consolas o paneles
• “create('index.html',{width: 500, height: 309})”: El primer parámetro es la URL o archivo que se presenta como ventana, el segundo es para establecer características de la ventana

index.html

<html>
<head>
   <meta charset="utf-8">
   <title>Hello World</title>
   <link href="styles/main.css" rel="stylesheet">
</head>
<body>
   <h1>Hola, Mundo!</h1>
</body>
</html>

Explicación:
Es el clásico código HTML y con el mensaje de “Hola, Mundo!”

main.css:

h1 {
text-align: center;
width: 100%;
line-height: 120%;
padding-top: 200px;
font-family: Arial, sans-serif;
color: rgb(66,66,66);
letter-spacing: -0.05em;
}

Explicación:
Estilos para la etiqueta que tiene el mensaje.

El resultado es el esperado.

Para ver el repositorio que contiene los ejemplos donde se usan estas nuevas apis es el siguiente:

• github.com/GoogleChrome
• github.com/GoogleChrome/chrome-app-samples (se muestran los ejemplos mencionados en la lista anterior)

Por otro lado, si la persona desea una documentación que lo guíe paso a paso y de una forma más clara, puede usar el siguiente enlace developer.chrome.com/apps/about_apps.html, el cual nos brindará la información que necesitamos para hacer nuestros primeros ejemplos.

Con la información brindada solo falta pensar un una aplicación y comenzar a escribir código. Sólo falta decir una frase muy motivadora

“HAPPY CODING”