Chrome Kiosk – A Beginner’s Tutorial

INTRODUCTION

THE HIDDEN GEM

Welcome to a tutorial on how to set up Chrome Kiosk and develop apps for it. Yes, there is a hidden gem called “kiosk mode” in Google Chrome that somehow some developers did not take notice of. It is but a very simple mechanism that sets Chrome into full screen incognito and removes all navigation bars.

That is, we can easily point the Chrome Kiosk to a specially designed website or server within your own network, and that’s it. The project is completed at a very low cost. No need expensive equipment too – Just buy a cheap Chromebook or reuse an old PC to act as the kiosk machine. But just what do we need? How do we develop apps for it? That is what we will walk through in this guide. Read on to find out!

 

 

 

SECTION A

KIOSK ON PC

With that, let us start with Chrome Kiosk on the PC – Windows, Mac, or Linux. Just install a copy of Google Chrome first, and here is how we do the magic.

 

KIOSK MODE ON CHROME BROWSER

If you have not installed Google Chrome Web Browser yet, go ahead, download and install it first. Next, launch the command prompt (or terminal), and run chrome --kiosk "https://your-ninja-site.com".That’s it.

Congratulations, you now have a fully functioning Chrome kiosk… Which is pretty much just Google Chrome in full-screen incognito mode. But here are a couple of things to take note of:

  • If you are using Google Chrome to browse the Internet right now, you need to close it first (or it will not go into kiosk mode).
  • In kiosk mode, there is no way to disable fullscreen, there are no navigation bars, and all the extensions are disabled.
  • Please do take note that the OS shortcut keys will still work. You might want to restrict user access to the keyboard on the actual kiosk itself –
    • alt-tab (command-tab) to switch to another application
    • ctrl-shift-escape (option-command-escape) to fire up the task manager
    • alt-f4 (command-w) will close Chrome.

 

CREATING SHORTCUTS (WINDOWS)

It will make more sense to create a shortcut that will fire up Chrome in kiosk mode (rather than typing in the command every time). Here is how to do it in Windows.

First, right-click in an empty folder (or on the desktop) itself > New > Shortcut.

Browse and select where you have installed Chrome, then append the --kiosk "https://your-ninja-site.com" parameters behind.

Finally, just give the shortcut any name you like. Done – The next time you click on this shortcut, it will fire up Chrome in kiosk mode.

 

 

CREATING SHORTCUTS (LINUX & MAC)

“Shortcuts” are slightly different on the Mac and Linux –

 

HOW ABOUT LOCAL APPS?

What happens if you do not have or do not want to run a server? I.E. You only need a standalone kiosk machine. Sadly, Chrome Apps are no longer supported on Windows, Mac, and Linux. So the two alternatives that I can think of are:

  • Point Chrome to a local file. For example, chrome --kiosk "file:///D:/http/index.html". But take note that several features will be restricted this way, one of them being AJAX calls.
  • Set up localhost by installing packages such as XAMPPchrome --kiosk "http://localhost/". Not that difficult anyway.

 

SECTION B

CHROME OS KIOSK

A Chromebook or Chrome Tablet is where the kiosk mode will shine most, with rather extensive support and features… Yep, Google did something sneaky here.

 

WHAT IS CHROME OS? CHROMEBOOK?

Chrome OS is a Linux kernel-based operating system designed by Google. It is derived from the free software Chromium OS and uses the Google Chrome web browser as its principal user interface.

Wikipedia

For you guys who have not heard of it… In the layman terms, Chrome OS is like the lesser-known cousin of Android. It is pretty much just Google Chrome as the system interface itself. The whole idea of Chrome OS is to create devices that are specialized for the Internet only.

Laptops that run Chrome OS is known as “Chromebook”, and tablets that run Chrome OS is called “Chrome Tablet”.

 

 

KIOSK MODE ON CHROME OS

If you have a Chromebook, here are the compressed instructions from good old Google on how to turn on the kiosk mode:

  • Sign in to the Chromebook, open Chrome.
  • Enter chrome://extensions in the URL to open the extensions screen. Enable Developer Mode (at the top-right corner).
  • Select “Manage kiosk applications”, then enter the ID of the kiosk app.

Yep, you might be wonder “what app ID”? This is the part where Chrome OS is different from the PC. It runs a local installed Chrome App instead of loading a web page. But do not worry, you can use this Kiosk app to load a web page.

 

HOW TO DEVELOP CHROME KIOSK APP?

After turning so many rounds, we have finally come to the “develop a kiosk app” part. I shall let the developers themselves explain how it works – How to create your first app on Google. One thing though… Remember that Google removed Chrome App support from Windows, Mac, and Linux?

While they did mention that they will “continue to support Chrome apps on the Chrome OS for the foreseeable future”, we do not know Google’s definition of “foreseeable”. So yeah, I am personally leaning towards creating a “kiosk-like” website instead. Serve both online orders and walk-in customers, kill two birds with one stone.

 

 

INSTALLING CHROME OS ON YOUR PC?

Well, you can if you really want to, but Chrome OS is a little confusing for the beginners. So here goes – It is actually based on an open-source project called Chromium OS. You can download the source code, but it does need some yoga before you are able to use it.

So the next easiest recommendation is to get CloudReady – A third-party who made things easier. Take note of the license though, for private use only.

 

SECTION C

ANDROID/IOS KIOSK

For this final section – It is nothing but bad news. There is no kiosk mode on mobile devices, but there are alternative ways to do it.

 

APACHE CORDOVA

Aye, there may not be a kiosk mode for mobile Chrome, but we can develop mobile apps using HTML, CSS, and Javascript. If you have not heard of it – Introducing Apache Cordova. As this one is way too long and out of topic for this guide, I will just leave links here if you are interested.

 

CORDOVA CRASH COURSE

 

 

EXTRA

USEFUL BITS & LINKS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

CLOSING

WHAT’S NEXT?

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *