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));
});
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
- When the app files are complete, create app icons: a 128x128 png and a 96x96 png.
- 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.
- 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.
- Sign in to your Admin console.
- Click Device management > Chrome management > Device settings and click Manage Kiosk Applications in the Kiosk Apps section.
- 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.
- 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.
- 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.
- Sign in to the Admin console.
- Click Device management > Chrome management > App management and select the app.
- Click Kiosk settings.
- Select the organizational unit where you want to deploy the kiosk app and click Save.
(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.
Improve the performance of your kiosk app
- Specify the "persist:" prefix in the partition attribute to speed up the the time it takes for web pages to initially load inside of the kiosk app's webview control.
- Follow the Chrome for Work app development best practices.