We’re here to help

Online/offline content in Web Viewers or Web Overlays

Follow

In a web viewer or web overlay, Twixl Publisher gives you the option to refer to a remote url or to a local web resource.

With a remote url, the user needs to be online in order to see the contents. With a local web resource, the contents is embedded in the publication, 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 web resource instead.

You will need to use some JavaScript to acomplish 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 web site
  • The second article shows a local web resource 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 web resource 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 web resource.

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.

Download the sample files.

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.