I recently had to create a web application that would be used on a public touch screen kiosk. The kiosk had be be secure, and require certain custom functionality - explained below.
The web app would be built using html/php and running on a LAMP stack, nothing too advanced. The most important thing regarding the kiosk way that it offered a very easy way to navigate the application using left/right swipe functionality and that;
- the browser would reset after x minutes of inactivity
- the app needs to be run in full screen mode
- the browser address bar and nav hidden
- right click should be disabled (no keyboard) and access to the file system should be prevented.
Security - we need to allow access to the internet therefore it's important that we monitor who is looking at what and when. This is controlled via group policies in Active Directory as well as a custom proxy server and a browser blacklist.
Now to the kiosk setup - where to start?
The options were to either purchase bespoke kiosk software or use Google Chrome.
Google Chrome already has an in-built 'kiosk mode' - this basically opens the browser in full screen mode and with certain restrictions. More explained here. Sounds good do far?
In order to open the browser in this kiosk mode simply add the following to your target path;
This will open Google in Kiosk mode, full screen and with nav etc hidden.
Since I am using a touch screen monitor I require additional functionality;
- on screen kayboard
- swipe left/right functionality
- auto-reset browser after inactivity
- force all links to open in a new tab
None of the software I looked at offered heavy customisation therefore I decided to go with Chrome as it's pretty easy to install and develop extensions.
Chrome kiosk mode does not incorporate the above functionality as default so I went with third party extensions. The ones I have chosen and an explanation of what they do are below;
Virtual Keyboard - on screen keyboard (popup onclick)
Open Link In Same Tab - forced all links to open in the same window.
Idle Reset - this clears all tabs and windows after 5 seconds of inactivity
Tabtiles - control your tabs with tiles - useful for large monitors and full screen browsing.
Note I had to customise this in order to fir my needs, I removed various settings and added additional css for styling. If anybody needs a copy let me know.
Last Tab Back - Use the back key (or left swipe) to close the tab if there are no pages to go back to. When it closes, go to the tab that created it.
I tried various distros and kiosk applications however they didn't seem as customisable as the method above. It also meant having to setup a VM which I wasn't prepared to do.
I'm sure each has it's own advantages and disadvantages, the above way worked for me!