Crear e implementar aplicaciones de kiosco de Chrome

Este artículo está dirigido a administradores y desarrolladores con experiencia en el desarrollo de aplicaciones para Chrome.

Como administrador de Chrome, puedes transformar dispositivos ChromeOS para que tengan una única finalidad, como hacer de pantallas interactivas o cartelería digital. Puedes implementar aplicaciones de kiosco disponibles en Chrome Web Store o crear las tuyas propias.

A partir de la versión 57 de Chrome, algunos dispositivos ChromeOS admiten aplicaciones Android. Para obtener información sobre cómo instalar aplicaciones Android en los dispositivos Chrome gestionados, consulta el artículo Utilizar aplicaciones Android en dispositivos Chrome que funcionan en modo kiosco.

Cuestiones importantes

• Si quieres implementar aplicaciones de kiosco en dispositivos con ChromeOS, primero deberás registrarlos. Para obtener más información, consulta el artículo Registrar dispositivos ChromeOS.
• Puedes usar aplicaciones empaquetadas de Chrome para crear aplicaciones de kiosco, pero no aplicaciones alojadas.
• Usa aplicaciones de Chrome configuradas para ejecutarse a pantalla completa.
• Sigue las prácticas recomendadas para el desarrollo de aplicaciones de Chrome.

Paso 1: Crea una aplicación de kiosco de Chrome

Como desarrollador, tienes dos formas de crear una aplicación de kiosco para implementarla en dispositivos Chrome: puedes usar una aplicación web que ya tengas y empaquetarla como aplicación de kiosco con Creador de aplicaciones de Chrome o crear una aplicación web.

Opción 1: Utilizar una aplicación web que ya tienes

Antes de empezar, en el ordenador en el que vas a crear la aplicación de kiosco, añade Creador de aplicaciones de Chrome al navegador Chrome.

1. En el ordenador en el que vas a crear la aplicación, crea una carpeta para guardar los archivos de la aplicación.
2. Abre Creador de aplicaciones de Chrome.
3. Introduce el nombre y la versión inicial de la aplicación.
   Asigna un número bajo a la versión inicial, como 0.0.0.1. De esta forma, tendrás margen para aumentar el número en las próximas versiones.
4. Introduce la URL de la que ahora es la página principal de la aplicación.
   Esta URL será la página de destino de la nueva aplicación de kiosco.
5. Elige los controles de navegación, como los empleados para ir a la página anterior o a la siguiente, volver a cargar la página y reiniciar la sesión.
6. Especifica los valores de tiempo de espera:
   • Tiempo de espera de inactividad de sesión: el tiempo que la aplicación debe pasar inactiva antes de que se borren los datos de navegación.
   • Tiempo de espera para volver a la página principal: el tiempo que la aplicación debe pasar inactiva antes de volver a la página principal. Los datos de navegación no se borran.
     El valor predeterminado para ambas opciones es de 0 minutos, que significa que la aplicación no tiene tiempos de espera.
7. (Opcional) Para especificar los términos del servicio a los que están sujetos los usuarios de la aplicación, introduce el texto que quieras.
8. (Opcional) Para girar la página principal de forma que se ajuste al dispositivo en el que se ejecutará, selecciona un valor.
   Por ejemplo, gira la aplicación 90 grados para ejecutarla en un dispositivo con orientación vertical.
9. Selecciona Modo kiosco habilitado.
10. Haz clic en Export kiosk app (Exportar aplicación de kiosco).
11. Elige la ubicación donde quieres exportar los archivos de la aplicación y haz clic en Seleccionar.

Después de crear una aplicación de kiosco con Creador de aplicaciones de Chrome, puedes personalizarla añadiendo más archivos.

Opción 2: Crear una aplicación

Usa los archivos de muestra proporcionados en los pasos siguientes para crear una aplicación de kiosco sencilla.

1. En el ordenador en el que vas a crear la aplicación, crea una carpeta para guardar los archivos de la aplicación. 
2. Crea el archivo HTML de la aplicación.
   1. Usa un editor de texto para crear un archivo HTML.
      Aquí tienes un archivo HTML5 de muestra.
   2. En la carpeta de la aplicación, guarda el archivo con el nombre application.html.
3. Crea el archivo de manifiesto.
   1. Con un editor de texto, crea un archivo JavaScript Object Notation (JSON). Aquí tienes un archivo JSON de muestra.
   2. Asegúrate de que kiosk_enabled tenga asignado el valor "true" ("kiosk_enabled": true).
   3. (Opcional) Para impedir que una aplicación se ejecute como aplicación normal, asigna a kiosk_only el valor "true" ("kiosk_only": true).
   4. (Opcional) Para que las páginas tarden menos en cargarse por primera vez en el control WebView de la aplicación de kiosco, especifica partition="persist:" en la etiqueta WebView.
      Para ver más detalles, consulta la información para desarrolladores sobre el atributo partition.
   5. Asegúrate de que el código JSON tenga el formato correcto con la herramienta de validación de JSON de terceros que elijas.
   6. En la carpeta de la aplicación, guarda el archivo con el nombre manifest.json.
4. Especifica el alto y el ancho de la aplicación.
   1. Con un editor de texto, crea un archivo CSS. Aquí tienes un archivo CSS de muestra.
   2. En la carpeta de la aplicación, guarda el archivo con el nombre application.css.
      Nota: Las aplicaciones de kiosco se muestran automáticamente en pantalla completa.
5. (Opcional) Para que los usuarios puedan finalizar la sesión de kiosco:
   1. Con un editor de texto, crea un archivo JavaScript. Aquí tienes un archivo JS de muestra.
   2. En la carpeta de la aplicación, guarda el archivo con el nombre application.js.
6. Crea la secuencia de comandos en segundo plano:
   1. Con un editor de texto, crea un archivo JavaScript. Aquí tienes un archivo JS de muestra.
   2. En la carpeta de la aplicación, guarda el archivo con el nombre background.js.
7. Crea los iconos de la aplicación y guárdalos en su carpeta:
   1. Crea un icono de 128x128 píxeles y guárdalo con el nombre 128.png.
   2. Crea un icono de 96x96 píxeles y guárdalo con el nombre 96.png.

Si lo prefieres, usa este archivo zip de muestra, que contiene los archivos de una aplicación de prueba con controles de navegación y un botón de restablecimiento. En Chrome Web Store hay una versión publicada de la aplicación, Chrome Browser Kiosk App 1.0. Puedes editar los archivos con cualquier editor de texto.

Paso 2: Prueba la aplicación de kiosco

Como desarrollador, asegúrate de que la aplicación de kiosco funciona correctamente en un dispositivo ChromeOS.

1. En un dispositivo Chrome, inicia sesión en tu cuenta de Google.
2. Guarda la carpeta de la aplicación en tu dispositivo de prueba.
3. Ve a chrome://extensions/.
4. En la parte superior derecha, activa el modo desarrollador.
5. Haz clic en Cargar descomprimida.
6. Busca y selecciona la carpeta de la aplicación.
7. Abre una pestaña nueva en el navegador Chrome y haz clic en Aplicaciones  la aplicación. Asegúrate de que se carga y funciona correctamente.
8. Si fuera necesario, modifica el archivo manifest.json, aloja la carpeta de la aplicación y realiza de nuevo la prueba. Repite la prueba hasta que la aplicación funcione correctamente.

Paso 3: Publica tu aplicación en Chrome Web Store

Como desarrollador, puedes hacer que las aplicaciones y las extensiones estén disponibles para todo el mundo o controlar quién puede instalarlas. Hay dos formas de publicar aplicaciones de kiosco en Chrome Web Store:

• Públicas: cualquier usuario puede ver e instalar la aplicación.
• Ocultas: solo los usuarios que dispongan del enlace de la aplicación podrán verla e instalarla. La aplicación no aparece en los resultados de búsqueda de Chrome Web Store. Puedes compartir el enlace a la aplicación con usuarios ajenos a tu dominio.

Para añadir una aplicación de kiosco a Chrome Web Store, sigue estos pasos:

1. Comprime la carpeta que contiene los archivos de la aplicación.
2. Sigue los pasos que se indican en el artículo sobre cómo publicar aplicaciones en Chrome Web Store. 

Paso 4: Implementa la aplicación de kiosco

Como administrador, puedes añadir la aplicación de kiosco a la consola de administración de Google.

1. Inicia sesión en la consola de administración de Google.

   Utiliza tu cuenta de administrador (no termina en @gmail.com).

2. En la consola de administración, ve a Menú  DispositivosChromeAplicaciones y extensionesKioscos.
3. To apply the setting to all users, leave the top organizational unit selected. Otherwise, select a child organizational unit.
4. Coloca el cursor sobre Añadir y haz clic en Añadir desde Chrome Web Store.
5. Busca la aplicación que quieres implementar y haz clic en Seleccionar.
6. Si se te pide, acepta los permisos de la aplicación en nombre de tu organización.
7. En el panel de la derecha, define las políticas de la aplicación y la extensión. Más información sobre cada ajuste
8. Haz clic en Guardar.

Temas relacionados

• Aplicaciones de kiosco
• Crea tu primera aplicación
• Configuración de kiosco
• Gestionar la configuración de las aplicaciones de kiosco de Chrome
• Programar y mostrar contenido con Chrome Sign Builder

Google y las marcas y los logotipos relacionados son marcas de Google LLC. Los demás nombres de empresas y de productos son marcas de las empresas a las que están asociados.