Tutorial: Create a Chrome kiosk app

Kiosk Apps allow an admin to run a single app in fullscreen mode on a Chrome device. They are useful for environments that require a user to interact with a single application such as assessments/student testing, guest check-in stations, help desk, manufacturing kiosk, and digital signage in airports and retail stores.

Any Chrome web app can be a kiosk app if you select it to run as a kiosk app, although apps configured to be full-screen work best as kiosk apps. Follow the steps below to build your own kiosk app. For more advanced app building, please see the Chrome Developer site.

Create a Chrome Kiosk App

Create a simple kiosk app by using a text editor to edit the following files and save them in a folder:

File 1: Application.html

Put the name of the app inside the <title> tag. This app also has an optional Reset button that will allow users to end the kiosk session. If you don’t want to allow people to exit the app or session, you can remove this.


<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Kiosk Test App</title>
    <script src="application.js"></script>
    <link rel="stylesheet" type="text/css" href="application.css">
  </head>


  <body>
    <webview id="map" src="https://google.com"></webview>
    <button id="reset">Reset</button>
  </body>
</html>

File 2: manifest.json

In this file you can change the app name next to “name” and version number. Make sure you include "kiosk_enabled": true.



{
"update_url": "https://clients2.google.com/service/update2/crx",


  "name": "Kiosk - Google App Test",
  "version": "1.0",
  "manifest_version": 2,
  "icons": {
    "128": "icon_128.png",
    "16": "icon_16.png"
  },
  "app": {
    "background": {
      "scripts": [ "background.js" ],
      "persistent": false
    }
  },
  "permissions": [
    "webview"
  ],
  "kiosk_enabled": true
}

File 3: application.css

Specify the height and width of the app. Because it’s a kiosk app, it will automatically expand to full-screen.


webview {
 height: 100%;
 width: 100%;
}


button {
> left: auto;
 position: absolute;
 right: 6px;
}

File 4: application.js

This file will allow you to ‘kill/end’ the app.



window.onload = function() {
 document.querySelector('#reset').onclick = function() {
   window.close();
 };
}

File 5: background.js


chrome.app.runtime.onLaunched.addListener(function() {
 var options = {
   'id': 'Test Kiosk App',
   'bounds': {
     'width': 1024,
     'height': 768
   }
 };
 chrome.app.window.create('application.html', (options));
});
Or, create a Chrome kiosk app with navigation controls:

Download this zip file which was uploaded to the Chrome Developer Dashboard for this Chrome kiosk app. This app is similar to the one above but has additional files and controls for navigation and an improved UI for the reset/exit button.

This zip file contains code samples that you can edit to your organization's specifications. Before uploading to the Chrome Web Store, edit the files using a text editor like TextMate or Sublime Text, and upload new icons that fit the Chrome Web Store's branding guidelines.

Publish your app in the Chrome Web Store

  1. When the app files are complete, create app icons: a 128x128 png and a 96x96 png.
  2. Put all of these items into the same folder and compress it into a zip file and follow these instructions to publish your kiosk app on the Chrome Web Store.
  3. Publish the app in the Chrome Web Store with the visibility option set to Public or Unlisted. The kiosk app will not work if you set visibility option to Private.
  4. If you're hosting the app in the Chrome Web Store, search for the app and add it using the Chrome management console.
    Public–Search for the app by name or ID.
    Unlisted–Search for the app using the app ID. 
    Note: Find the app ID by searching for the app on the Chrome Web Store. The app ID is the URL string highlighted in green in this example:
    https://chrome.google.com/webstore/detail/kiosk-google-app-test/lfkjhmmdoiphacoihfjjgcdcjppdogjh
    Trusted tester–Enter the app ID and this URL https://clients2.google.com/service/update2/crx in the Specify a Custom App dialog. 
      Specify a custom Chrome Kiosk App
  5. If you're not hosting the app in the Chrome Web Store, enter the app ID and the URL of the third-party web server in the Specify a Custom App dialog

Add the app as a kiosk app

  1. Sign in to the Admin console.
  2. Click Device management > Chrome management > Device settings and click Manage Kiosk Applications
    Single app kiosk setting
    If the app is unlisted, you will need to enter the app ID into the app search box.

(Optional) Set the kiosk app to launch automatically

By setting the kiosk app to launch automatically when the device boots, you are configuring the app as a Single App Kiosk. You can have many Kiosk Apps deployed to a device but only one can launch automatically when the device boots. 

Auto-Launch Kiosk App is commonly selected when deploying digital signage app or kiosks where user interaction is not controlled through a keyboard and mouse. This setting converts the device into an appliance.

Auto-launch kiosk

FAQs

How can I improve the performance of my kiosk app?

Specifying the "persist:" prefix in the partition attribute can help speed up the the time it takes for web pages to initially load inside of the kiosk app's webview control.

References