Webviewers, online and offline contents

Pieter Claerhout 11-07-2012 How-To

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.

Image 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.

Luckily, both web viewers and web overlays are based on WebKit, which allows you to check this. 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 website
  • 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 website. 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:

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 some contents which is only available online. Using this check, you can show a proper message to the user indicating that they need to be online to view that contents.

Download the sample file for Adobe InDesign CS5, CS5.5 and CS6

Tweet this article: Webviewers, online and offline contents

Share this post to your network.

Download the free trial of Twixl Publisher

Start using Twixl Publisher immediately, preview the result on your own device, share your creations with a colleague or client, get started!
Need any help? Visit our Learning & Support site.

Download the trial Check out the documentation today

× Free trial/download