Tutorial: Detecting Connection Status

There are instances in our apps where we are delivering information to our viewers via HTML files, the most common of which is an interactive map but can easily apply to other real-time content. Adding a map is a relatively easy task and once implemented the map can be viewed and interacted with, that is as long as there is a connection to the Internet. The problem arises once that connection ceases to exist and the map is no longer able to provided updated views. In this instance it's preferable to display an alternate image that informs the viewer that an Internet connection is required to view interactive information.

In this tutorial I will demonstrate how to set up an HTML block that detects whether or not the device is online and based on that detection either display a still image, in this case a call to action, or a live interactive map. The tutorial covers the following;

• Downloading the Detection Code
• How it Works
• Setting up the Files
• Applying the Code to a Project
• Adding the Map to a Vertical
• Detecting Connection

The tutorial is available as a YouTube video at http://bit.ly/constatusvideo or in Step-by-Step written instructions at http://bit.ly/connectionstatus. You will also find a link to download a set of Asset Files in the video and Step-by-Step instructions.

I'm relatively new to Mag+ and still learning my way around the platform, so if you find any issues or have any suggestions on improving the tutorial or alternative methods to implement the functionality I'd appreciate the feedback.