Crear e implementar aplicaciones de kiosco de Chrome

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

Como administrador de Chrome, puedes transformar dispositivos con Chrome OS para que tengan una única finalidad, como hacer de pantallas interactivas o cartelería digital. Puedes implementar aplicaciones de kiosco listas para usar desde 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 deberás 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.

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 aún no tienes la extensión Creador de aplicaciones de Chrome, deberás añadirla 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 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 principal 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, como 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 de servicio a las que están sujetos los usuarios de la aplicación.
  8. (Opcional) Gira la página principal 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 Exportar aplicación de kiosco.
  11. Elige la ubicación donde quieres exportar los archivos de la aplicación y haz clic en Seleccionar carpeta.

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 aplicación web

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.
      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 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.
      Para ver más detalles, 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 con el nombre manifest.json.
  4. Especifica el alto y el ancho de la aplicación.
    1. Usa un editor de texto para crear un archivo de Hojas de estilo en cascada (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) Permite que los usuarios finalicen la sesión de kiosco.
    1. Usa un editor de texto para crear un archivo de JavaScript (JS). 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. Usa un editor de texto para crear un archivo JS. 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 128 por 128 píxeles y guárdalo con el nombre 128.png.
    2. Crea un icono de 96 por 96 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 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 nueva pestaña en Chrome y luego haz clic en Aplicaciones  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 a 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.

  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 Dispositivos y luego Administración de Chrome.

    Para ver la sección 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 Aplicaciones y extensiones.
  4. En la parte izquierda, selecciona la unidad organizativa cuyos ajustes quieres configurar.
    Si quieres aplicar los ajustes a todos los usuarios, selecciona el nivel organizativo superior. De lo contrario, selecciona un nivel secundario. En principio, las unidades organizativas heredan los ajustes definidos en su unidad organizativa superior.
  5. En la parte superior, haz clic en Kioscos.
  6. Haz clic en Añadir Añadir y elige Añadir desde Chrome Web Store.
  7. Busca la aplicación que quieras implementar y haz clic en Seleccionar.
  8. Si se te pide, acepta los permisos de la aplicación en nombre de tu organización.
  9. 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
  10. Haz clic en Guardar.

Temas relacionados

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