In a web viewer or web overlay, you can refer to a remote url or to a local WebResource, depending on whether a user is online or not.
With a remote url, the user needs to be online in order to see the contents. With a local WebResource, the contents is embedded in the InDesign article, so you don’t have to be online in order to see the contents. Imagine you want to mix both options. As you never know upfront if the user’s device is going to be online or not, you would like to have a check that displays a remote URL if the device is online. And if the device is offline, it would be nice if we could show a local WebResource instead. You will need to use some JavaScript to accomplish this though.
The sample file contains a publication with 3 different articles:
- The first article shows a web viewer containing a link to a remote website.
- The second article shows a local WebResource which is embedded in the publication
- The third article is a smart article. It will check if the device is online, and if it is, it will show a link to a remote web site. If the device is offline, it will show a local WebResource which is embedded in the publication.
The way we’ve implemented it in the third article is by adding an extra file called check.html in the WebResources folder for the publication. In that file, we’ve pasted the following HTML code:
<html>
<head>
<title>Check If The Device is Online or Not</title>
</head>
<body>
<script type="text/javascript">
if (navigator.onLine) {
window.location.href = "http://blog.twixlmedia.com/assets/are-we-online/online.html";
} else {
window.location.href = "offline.html";
}
</script>
</body>
</html>Whenever the page gets loaded, it will execute the script. With the call to navigator.onLine (case-sensitive), it will ask the web browser if there is an internet connection. If there is an internet connection, it will redirect to the HTTP url, if not, it will show the local WebResource. If you preview the sample publication on your device, load it first with a network connection. On the third article, it will tell you that an online page was loaded. If you then e.g. turn on Airplane mode in the system settings and open the publication again, the third article will automatically load the offline file. This technique is very handy if you have certain content that is only available online. Using this check, you can show a proper message to the user indicating that he/she needs to be online to view that content.