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.

  1. Create the Chrome kiosk app. See instructions below.
  2. 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.
  3. If this app is public, you can search for it and add it using the Chrome management console. If it's unlisted, you need to 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
  4. Add the app as a kiosk app in the management console by clicking on Manage Kiosk Applications.
    Single app kiosk setting
    (Optional) If the app is unlisted, you will need to enter the app ID and this URL https://clients2.google.com/service/update2/crx in the URL field before clicking Add.
    Specify a custom Chrome kiosk app
  5. You can set the app to ‘auto launch’ as well if you would like. If you put “0” seconds, the app will automatically launch the kiosk app when the device boots.
    Auto-login to kiosk app setting

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.

Submit your app to the Chrome Web Store

  1. Once these 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.

References