Search
Clear search
Close search
Google apps
Main menu

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 packaged 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

Generate a basic kiosk app using Chrome App Builder

Chrome App Builder gives you a fast and easy way to create, preview, and build a Chrome kiosk-enabled app that can be used on Chrome kiosks.

Create a simple kiosk app using a text editor or Chrome developer tools

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.

Add the app as a kiosk app

In your Admin console, there are 2 ways to add kiosk apps:

  • Device settings let you add multiple kiosk apps at once.
  • App management lets you add one kiosk app at a time. Use this option if you have other settings to configure for the app.
Device settings
  1. Sign in to your Admin console.
  2. Click Device management > Chrome management > Device settings and click Manage Kiosk Applications in the Kiosk Apps section. 
    Single app kiosk setting
  3. If you're hosting a public or unlisted app in the Chrome Web Store, search for the app there and click Add.
    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.
      search Chrome Web Store
  4. If your're hosting a trusted tester app in the Chrome Web Store, enter the app ID and this URL https://clients2.google.com/service/update2/crx in the Specify a Custom App dialog, and click Add
    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 and click Add.
App management
  1. Sign in to the Admin console.
  2. Click Device management > Chrome management > App management and select the app. 
  3. Click Kiosk settings.
  4. Select the organizational unit where you want to deploy the kiosk app and click Save
    Kiosk settings

(Optional) Set the kiosk app to launch automatically

By setting the kiosk app to launch automatically when the device starts, 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 starts. 

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

  • If you added the kiosk app in Device settings, go to Kiosk Settings on the Device settings page, and select the kiosk app you want to launch automatically from the drop-down list.
  • If you added the kiosk app in App management, you can click the device settings page link to go to the Kiosk Settings.
Auto-launch kiosk

(Optional) Allow your app to control the Chrome OS version

You can enable an auto-launched app to control the Chrome OS version of the device it’s running on by specifying a required platform version in the app’s manifest file. This prevents devices running in kiosk mode from updating to versions of Chrome beyond the version number specified by the app, and can improve stability of your kiosk if the app, or certain features in the app, are not compatible with the latest Chrome OS release.

We recommend that you add the Chrome OS version to your app when you need to ensure that devices running the app use a specific Chrome OS version.

Before you begin

Set the OS version in the kiosk app’s manifest file
  1. Identify the right Chrome OS version.

    To find the right value for required_platform_version, see CrOS-OmahaProxy CSV Viewer. Use the value in the chromeos_version column for the most commonly used device by your customers.

    For example: "required_platform_version”: “8131.0.0”

  2. Decide to use major or minor builds.

    When you specify the required_platform_version setting in the manifest file, you can set up to 3 dot-separated values (major.minor.build). If you set a major value only, the device OS is updated to any version that starts with that value. If you set both a major and minor value, then the device OS is updated to any version that starts with both those values.

    For example:

    • If you specify “required_platform_version” : “8350” then the device OS is updated to anything that starts with 8350, such as 8350.11.0 or 8350.38.1.
    • If you specify “required_platform_version” : “8350.38” then the device OS is updated to anything that starts with 8350.38, such as 8350.38.0 or 8350.38.1.
  3. Set required_platform_version value in the app’s manifest file.

    The required_platform_version you specify must be within the last 3 Chrome releases. For more information, see Common scenarios and expected behaviour.

    OS Version Control is a feature that launched in Chrome OS version 52. All Chrome OS releases before 52 will not be able to use this feature.

    In this example, you set the required_platform_version to 8172.60.0.

    {
    "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
    “kiosk”: { 
      “required_platform_version”:”8172.60.0” 
    }
    }
    
    
Common scenarios and expected behaviour

This table describes different scenarios where kiosk apps are configured to control the OS version on a device.

Scenario Result
The Chrome OS version is less than 52 and Allow Kiosk App to Control OS version is enabled in the Admin console. The client device stays with its current OS version.
Allow Kiosk App to Control OS version is enabled, and the auto-launched Kiosk app’s manifest file does not have the required_platform_version manifest key. The client device will auto-update itself to the latest Chrome OS version when it becomes available.
The app’s manifest file has an invalid required_platform_version setting. The app developer sees an error message in chrome://extensions when they try to load the app. The required_platform_version must be valid for the app to get installed or updated from the Chrome Web Store.
The required_platform_version value is lower than the device’s current platform version. The app is installed but the device OS will not get updated, unless the required_platform_version value is updated to a version higher than the current device OS version.

Note: The first time an App is pushed from the Chrome Web Store, the required_platform_version value is verified, but not compared to the device’s current platform version.

The required_platform_version is updated to a lower value than the device’s current platform version. The App is not installed and the client device continues to run the older version of the App.
Confirm device settings

To confirm that a device is set up correctly to allow an app to control the Chrome OS version, go to to chrome://policy and verify that the AllowKioskAppControlChromeVersion and DeviceAutoUpdateDisabled settings are both set to TRUE.

Best practices for kiosk apps

References

Was this article helpful?