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)
Was this article helpful?
Cancel
Thank you!