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?
Thank you!