10 Tips For Developing Kiosk Web Applications

I thought I would jot down a few tips from my experience of developing Kiosk Web Applications. Could be useful to have a quick look through make sure your next kiosk web application hasn’t overlooked anything. Here they are.

1. Disable text selection

Some kiosks behave in such a way that text can still be selected when dragging your finger, this also depends on what browser/software you are using to display the app.

/* disable text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;

2. Emulate touch device.

While developing use chrome dev tools overrides to simulate your click events and touch/swipe.

3. Force Browser Cache Refresh

Kiosk web applications may be running cached media and to force them to run the latest code you might need to append a variable to static media to force the browser to refresh JS/CSS. You can prepend dynamic variables to static media invidually or if your using PHP, for example index.php you can do something like this:

< ?php
    //currently changes daily at middnight
    $forceNum = '5'; //increment this number to force browser to refresh static media cache(js/css).
    $cacheKey = '?'.strtotime(date('Y-m-d')).$forceNum;
?>
<link href="css/styles.css<?php echo $cacheKey; ?/>" rel="stylesheet">
<script src="js/main.js<?php echo $cacheKey; ?>"></script>

4. Use Google Chrome in Kiosk Mode

Chrome can start in Kiosk mode out of the box. Great for testing. Follow these instructions to find out how to do it -> Chrome Kiosk Mode Setup.

5. Bootstrap with touch support

If your starting from scratch don’t reinvent the wheel! Check out Gumby 2 bootstrap which has touch support out of the box and a customisable bootstrap UI to easily get the web app looking the way you want it. Backbone.js provides the instant view switching and management of templates and data between views.

6. Prevent duplicate swipe script calls

When a user swipes the screen it may fire multiple events and should only fire once. So to keep your application running smoothly use a debounce script.

7. Preload your web app images

Here is a tutorial on how to setup preloading of your web application images. This can dramatically speed up the use of your app and prevent scale loading of larger images.

I’ll update with more once I review the code/functionality. – As always feel free to share your tips and i’ll add them.