Articles on: Kiosk Browser - Advanced

KB: Using a custom error page to reload the home page

In some circumstances standard Android WebView error messages may appear within Kiosk Browser, such as when an internet connection is not available. We generally advise using a custom error page so that end users see a user friendly interface.

Standard Error Page

By default Kiosk Browser will not attempt to reload the home page unless you have automatic page reload options configured. It's possible to include a script within your custom error page to check availability of the Kiosk Url and automatically load it if a response code of 200 is received. An example page (HTML & JS) can be found below.

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Custom Error Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <script type="text/javascript">
	    function callAjax(url, callback){
			var xmlhttp = new XMLHttpRequest();
			xmlhttp.onreadystatechange = function(){
			    if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
			        callback(xmlhttp.responseText);
			    }
			}
			xmlhttp.open("GET", url, true);
			xmlhttp.send();
		}
		
		window.onload = function() {
			setInterval(function() {
				callAjax(Android.getHomePage(), function() {
					Android.loadHomePage();
				});	
			}, 5000);
		}
				
	</script>
    <style type="text/css">
	    body {
		    background-color: #fffff;
		    width: 100%;
		    height: 100%;
	    }
	    
	    .splash {
		    height: 22vh;
		    position: absolute;
		    top: 50%;
		    margin-top: -15vh;
		    text-align: center;
		    width: 100%;
	    }
	    
	    .logo {
		    height: 15vh;
		    margin-bottom: 4vh;
	    }
	    
		.spinner {
		  margin: 0 auto;
		  width: 25vh;
		  text-align: center;
		}
		
		.spinner > div {
		  width: 3vh;
		  height: 3vh;
		  margin: 1vh;
		  background-color: #000000;
		  border-radius: 100%;
		  display: inline-block;
		  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
		  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
		}
		
		.spinner .bounce1 {
		  -webkit-animation-delay: -0.32s;
		  animation-delay: -0.32s;
		}
		
		.spinner .bounce2 {
		  -webkit-animation-delay: -0.16s;
		  animation-delay: -0.16s;
		}
		
		@-webkit-keyframes sk-bouncedelay {
		  0%, 80%, 100% { -webkit-transform: scale(0) }
		  40% { -webkit-transform: scale(1.0) }
		}
		
		@keyframes sk-bouncedelay {
		  0%, 80%, 100% { 
		    -webkit-transform: scale(0);
		    transform: scale(0);
		  } 40% { 
		    -webkit-transform: scale(1.0);
		    transform: scale(1.0);
		  }
		}
	</style>
</head>
<body>

<div class="splash">
	<div class="spinner">
	  <div class="bounce1"></div>
	  <div class="bounce2"></div>
	  <div class="bounce3"></div>
	</div>
</div>
</body>
</html>

Example Custom Error Page (awaiting url response 200)

Updated on: 04/08/2020

Was this article helpful?

Thank you!