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.
emulate-touch-events

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.

Frequently Asked Questions (FAQs) on Developing Kiosk Web Applications

What are the key considerations when developing a kiosk web application?

When developing a kiosk web application, there are several key considerations to keep in mind. Firstly, you need to ensure that the application is user-friendly and intuitive. This means that the user interface should be simple and easy to navigate. Secondly, the application should be designed to run in full-screen mode, without any browser controls visible. This is to prevent users from navigating away from the application. Thirdly, the application should be designed to handle touch input, as most kiosks use touch screens. Lastly, the application should be robust and able to handle errors gracefully, to prevent any disruptions in service.

How can I make my kiosk web application run in full-screen mode?

To make your kiosk web application run in full-screen mode, you can use the HTML5 Fullscreen API. This API allows you to programmatically enter and exit full-screen mode, as well as detect when the browser is in full-screen mode. However, keep in mind that the Fullscreen API is not supported by all browsers, so you may need to provide a fallback for browsers that do not support it.

How can I handle touch input in my kiosk web application?

Handling touch input in a kiosk web application can be done using the HTML5 Touch Events API. This API provides a set of events that you can listen for in your application, such as touchstart, touchmove, and touchend. By listening for these events, you can respond to user input in a way that is appropriate for a touch screen.

How can I make my kiosk web application robust and error-resistant?

Making your kiosk web application robust and error-resistant involves a combination of good design practices and thorough testing. On the design side, you should aim to keep your application as simple as possible, to reduce the potential for errors. On the testing side, you should test your application under a variety of conditions, to ensure that it can handle unexpected situations gracefully.

Can I use any web development framework to build a kiosk web application?

Yes, you can use any web development framework to build a kiosk web application. However, some frameworks may be better suited to this task than others. For example, frameworks that support single-page applications (SPAs) can be a good choice for kiosk web applications, as they allow for a seamless user experience without any page reloads.

How can I prevent users from navigating away from my kiosk web application?

One way to prevent users from navigating away from your kiosk web application is to hide the browser controls. This can be done using the HTML5 Fullscreen API, as mentioned earlier. Another way is to disable the right-click context menu, which can be done using JavaScript.

What are some common challenges in developing kiosk web applications?

Some common challenges in developing kiosk web applications include handling touch input, running in full-screen mode, preventing users from navigating away from the application, and ensuring that the application is robust and error-resistant. These challenges can be addressed through careful design and thorough testing.

How can I test my kiosk web application?

Testing a kiosk web application can be done in a variety of ways. One common approach is to use a combination of unit tests, integration tests, and end-to-end tests. Unit tests can be used to test individual components of the application, integration tests can be used to test how these components work together, and end-to-end tests can be used to test the application as a whole.

Can I use a content management system (CMS) to build a kiosk web application?

Yes, you can use a content management system (CMS) to build a kiosk web application. A CMS can provide a user-friendly interface for managing the content of your application, as well as a variety of tools and plugins that can help with the development process.

How can I optimize the performance of my kiosk web application?

Optimizing the performance of a kiosk web application can involve a variety of techniques, such as minifying your JavaScript and CSS files, optimizing your images, and using a content delivery network (CDN) to serve your static files. Additionally, you should aim to keep your application as lightweight as possible, to ensure that it loads quickly and runs smoothly.