Crear e implementar aplicaciones de kiosco para 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 con Chrome OS para que tengan una única finalidad, como hacer de pantallas interactivas o facilitar el inicio de sesión 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 con Chrome OS 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 Chrome OS, primero es necesario registrar los dispositivos. Para obtener más información, consulta el artículo Registrar dispositivos Chrome.
  • Puedes usar aplicaciones empaquetadas de Chrome para crear aplicaciones de kiosco. Sin embargo, no puedes utilizar 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 para Chrome

Como desarrollador, hay dos formas de crear una aplicación de kiosco para implementarla en dispositivos Chrome. Puedes utilizar una aplicación web existente o crear una nueva.

Tengo una aplicación web

Si tienes una aplicación web, puedes usar el Creador de aplicaciones de Chrome para empaquetarla como aplicación de kiosco.
  1. En un ordenador, crea una carpeta para guardar los archivos de la aplicación.
  2. Abre la extensión Creador de aplicaciones de Chrome.
    Si no la tienes, tendrás que añadir la extensión Creador de aplicaciones de Chrome a tu navegador Chrome.
  3. Introduce el nombre y la versión inicial de tu aplicación de kiosco.
    Asigna un número bajo a la versión inicial como, por ejemplo, 0.0.0.1. De esta forma, tendrás margen para aumentar el número de la versión cuando subas nuevas versiones de tu aplicación.
  4. Introduce la URL de la página de inicio actual de la aplicación.
    Será la página de destino de la nueva aplicación de kiosco.
  5. (Opcional) 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. (Opcional) 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 (la caché y las cookies de la aplicació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 (la aplicación no tiene tiempos de espera).
  7. (Opcional) Introduce las condiciones del servicio para los usuarios de la aplicación.
  8. (Opcional) Gira la página de inicio para que se ajuste al dispositivo en el que se ejecutará.
    Por ejemplo, gira la aplicación 90 grados para ejecutarla en un dispositivo con diseño vertical.
  9. Selecciona Modo kiosco habilitado.
  10. Haz clic en la opción para exportar la aplicación de kiosco.
  11. Exporta los archivos de la aplicación y haz clic en Seleccionar.

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

Quiero crear una nueva aplicación

Usa los archivos de muestra proporcionados en los pasos siguientes para crear una aplicación de kiosco sencilla.
  1. En un ordenador, 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.
      En este enlace encontrarás un archivo HTML5 de muestra.
    2. En la carpeta de la aplicación, guarda el archivo como application.html.
  3. Crea el archivo de manifiesto.
    1. Con un editor de texto, crea un archivo JavaScript® Object Notation (JSON). En este enlace encontrarás un archivo JSON de muestra.
    2. Asegúrate de que kiosk_enabled tenga el valor true; "kiosk_enabled": true.
    3. (Opcional) Para impedir que una aplicación se ejecute como aplicación normal, establece kiosk_only con el valor; "kiosk_only": true.
    4. (Opcional) Para acelerar el tiempo que tardan las páginas en cargarse inicialmente en el control WebView de la aplicación de kiosco, especifica partition="persist:" en la etiqueta webview.
      Si quieres saber más, consulta la información para desarrolladores sobre el atributo partition.
    5. Utiliza una herramienta de validación de JSON de terceros, como JSONLint, para asegurarte de que el código JSON tenga un formato correcto.
    6. En la carpeta de la aplicación, guarda el archivo como manifest.json.
  4. Especifica la altura y el ancho de la aplicación.
    1. Usa un editor de texto para crear un archivo de hojas de estilo en cascada (CSS). En este enlace encontrarás un archivo CSS de muestra.
    2. En la carpeta de la aplicación, guarda el archivo como application.css.
      Nota: Las aplicaciones de kiosco se expanden automáticamente a pantalla completa.
  5. (Opcional) Permite que los usuarios finalicen la sesión de kiosco.
    1. Usa un editor de texto para crear un archivo de JavaScript (JS). En este enlace encontrarás un archivo JS de muestra.
    2. En la carpeta de la aplicación, guarda el archivo como application.js.
  6. Crea la secuencia de comandos en segundo plano.
    1. Usa un editor de texto para crear un archivo JS. En este enlace encontrarás un archivo JS de muestra.
    2. En la carpeta de la aplicación, guarda el archivo como background.js.
  7. Crea los iconos de la aplicación y guárdalos en su carpeta.
    1. Crea un icono de 128 por 128 píxeles y guárdalo como 128.png.
    2. Crea un icono de 96 por 96 píxeles y guárdalo como 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 tu aplicación de kiosco funcione en un dispositivo que ejecute Chrome OS.

  1. Inicia sesión en tu cuenta de Google desde un dispositivo Chrome.
  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 Chrome y luego haz clic en Aplicaciones y luego haz clic en 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 de la aplicación con usuarios que no pertenezcan a tu dominio.

Para añadir una aplicación de kiosco a Chrome Web Store, comprime la carpeta que contiene los archivos de la aplicación. A continuación, publícala 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. Si tienes varias aplicaciones, puedes añadirlas todas a la vez con políticas predeterminadas. O si lo prefieres, puedes añadirlas de una en una para definir políticas específicas.

Añadir varias aplicaciones

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

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

  2. En la página principal de la consola de administración, ve a Administración de dispositivos y luego Administración de Chrome.

    Para ver Administración de dispositivos en la página principal, es posible que tengas que hacer clic en la opción Más controles situada en la parte inferior.

  3. Haz clic en Configuración de dispositivo.
  4. A la izquierda, selecciona el nivel organizativo en el que quieres configurar políticas.
    Si quieres aplicar el ajuste a todos los usuarios, selecciona el nivel organizativo superior. De lo contrario, selecciona un nivel secundario.
  5. Ve a Configuración de kiosco.
  6. En Aplicaciones del kiosco, haz clic en Administrar aplicaciones del kiosco.
  7. Para añadir una aplicación, haz clic en Chrome Web Store y busca la aplicación de kiosco:
    • Si es una aplicación pública, busca el nombre o el ID de la aplicación.
    • Si es una aplicación oculta, busca el ID de la aplicación.
  8. Para añadir manualmente una aplicación, haz clic en Especificar una aplicación personalizada:
    • Si es una aplicación de tester de confianza de Chrome Web Store, introduce el ID de la aplicación y la URL https://clients2.google.com/service/update2/crx.
    • Si es una aplicación que no está alojada en Chrome Web Store, introduce el ID de la aplicación y la URL del servidor web de terceros.
  9. Haz clic en Añadir y luego Guardar.
  10. Haz clic en Guardar para confirmar.

Añadir aplicaciones individuales

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

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

  2. En la página principal de la consola de administración, ve a Administración de dispositivos y luego Administración de Chrome.

    Para ver Administración de dispositivos en la página principal, es posible que tengas que hacer clic en la opción Más controles situada en la parte inferior.

  3. Haz clic en Administración de aplicaciones.
  4. A la izquierda, en el menú del filtro Tipo de aplicación, selecciona Aplicaciones de Chrome.
  5. Haz clic en la aplicación que quieres configurar.
  6. Haz clic en Configuración de kiosco.
  7. A la izquierda, selecciona la organización en la que quieres que los usuarios ejecuten la aplicación de kiosco.
    Si quieres aplicar el ajuste a todos los usuarios, selecciona el nivel organizativo superior. De lo contrario, selecciona un nivel secundario.
  8. Establece las políticas de aplicaciones y extensiones. Más información sobre cada ajuste
  9. Haz clic en Guardar.

Temas relacionados

¿Te ha resultado útil esta información?
¿Cómo podemos mejorar esta página?