So far, we've looked at how you can use Local Storage (and Session Storage) in your projects, as well as determined if your browser even supports the technology. However, this is all good and well if you're using a normal PC, but what about anyone using a mobile platform, such as iPads or smartphones? We need to know if the unit is working offline, particularly in cases of poor reception. Thankfully, it is really easy to fix this, using our good friend Modernizr.
For this recipe, all you will need (in addition to your normal text editor) is two icons—if you have them to hand. The two we used in the Improving detection using Modernizr (Should know) recipe discussed earlier in this book will be perfect.
Perform the following steps, to check whether the user is online or offline:
- Ok, let's make a start. Copy the following code into a new file and save it as
offline.html:<!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta content="charset=utf-8"> </head> </head> <body> <div id="supportdlg"> <div id="details"> <div id="online">Website is offline or JavaScript is not available</div> </div> </div> </body> </html> - We need to initialize two references, one to jQuery and another to Modernizr. So add the following code between the
<head>tags in your code:<script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
- Next comes the meat of the demo. This is the script call to determine if your browser is online or offline:
<script> if(Modernizr.applicationcache) { $('#online').html("Website is online"); } </script> - Finally, we need to add some styling, as the preceding code certainly won't win any style awards:
<style type="text/css"> body { padding: 20px; font-family: Arial; font-size: 16px; } #details { border-radius: 4px; padding: 5px; background-color: green;} #supportdlg { border-radius: 4px; border: 1px solid black; padding: 5px; width: 500px; color: #fff; font-weight: bold; } #online { background-image:url('tick.png'), background-repeat: no-repeat; padding-left: 25px; background-color: green; margin: 5px; } /* No JavaScript Fallback for Modernizr */ .no-js #details { background-color: red;} .no-js #online { background-image:url('cross.png'), background-color: red; } </style> - So, if all is well, you should see either of the following results when previewing in your browser. The first one you will see straightaway:
- The following result will be shown if you select your browser's offline function or disconnect from the Internet:
This recipe works on a simple principle of replacement, but only when JavaScript is available and the browser has not been set to work offline. We set up a basic HTML framework (simplified for the purposes of this recipe), which could easily form the basis for a more complicated project. We then include calls to jQuery and Modernizr, and use Modernizr to ask the browser, "Can I do application cache?" If the answer is yes, we then replace the contents of the #online DIV with appropriate text and styling, otherwise leave it untouched.
When using Modernizr, the normal approach would be to control what happens when a test is proved positive or negative. The drawback of this is a reliance on JavaScript to provide the answer. This may not be ideal if JavaScript is switched off (which of course we're testing anyway).
A better option is to incorporate the fallback into the base code (as we have done here), and then use Modernizr to switch in what should be the normal code to use. This means that if JavaScript is unavailable, it will always show the fallback code, with no reliance on JavaScript to provide the answer! In a sense, this progressive replacement technique is similar to progressive enhancement for CSS, but uses JavaScript in this instance.
Let's take this concept a little further. Now that we can tell if a device is offline or not, what if we could actually still use our website or application while it is offline? Well, you can, with the use of a cache manifest, which is the subject of our next recipe.