Detecting Connection Status in a Mag+ App

Detecting Connection Status in a Mag+ App

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