In this tutorial you will create a simple jQuery Mobile app with features that can be used without an active connection with a remote server, and features that require an active connection. If the app is offline and the user tries to access an online-only feature, you will pop up a message letting the user know that the feature will become available when the app is back online. To achieve this you will override the default “page load failed” behavior in jQuery Mobile.
This example is based on one of my recent projects; a service calls app where features such as creation of estimates and updating of job statuses are used on the field and without an active connection to the server in the office, while backoffice features that handle sensitive information – clients, users, and roles administration – require an active connection.
The mobile app you will build in this tutorial is a hypothetical service calls app that consists of four html files and a manifest file:
- index.html: This file will contain a jQuery Mobile page that will function as the homepage of the app, consisting of a menu pointing to the different features.
- jobs.html: This file will contain a jQuery Mobile page for a hypothetical “my jobs” feature. The page will be available even if the app is offline.
- users.html: This file will contain a jQuery Mobile page for a hypothetical “users management” feature. This feature will only be available if the app is online.
- roles.html: This file will contain a jQuery Mobile page for a hypothetical “roles management” feature. This feature will only be available if the app is online.
- cache.manifest: This is the HTML5 offline manifest file where you will define which application resources will be available offline.
Your goal is to design the app so it meets the following requirements:
- The homepage and the “my jobs” page are available when the app is online or offline.
- If the app is offline and the user tries to access the “users management” or “roles management” pages, a message should pop up, stating that the requested page is only available when the app is online.
Creating the Offline-Capable Pages
Let’s get started with the index.html file. Go ahead and pick a directory for this project and in it, create the index.html file. Add the following code to the file:
<!DOCTYPE html> <html manifest="cache.manifest"> <head> <title>Offline/Online Demo</title> <meta name="description" content="This is an example of an offline capable app that alerts the user when the requested page requires the app to be online" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="../../Lib/jQM/1.3.2/jquery.mobile-1.3.2.min.css" rel="stylesheet" /> <script src="../../Lib/jQ/jquery-1.8.2.min.js"></script> <script src="../../Lib/jQM/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div id="main-menu-page" data-role="page"> <div data-role="header" data-theme="b"> <h1>Service Calls</h1> </div> <div data-role="content"> <h2>Main Menu</h2> <ul data-role="listview" data-inset="true"> <li><a href="jobs.html">My jobs</a></li> <li><a href="users.html">Users Management</a></li> <li><a href="roles.html">Roles Management</a></li> </ul> </div> </div> <div id="requires-online-dlg" data-role="dialog" data-transition="pop"> <div data-role="header" data-theme="e"> <h1>Wait!</h1> </div> <div data-role="content"> <p>The feature you are trying to use requires that the app is online.</p> </div> </div> </body> </html>
Index.html contains two jQuery Mobile pages (remember that jQuery Mobile pages and html pages are not the same thing). One is the main page of the application. You can identify it in the code by the id “main-menu-page”. This is a very simple mobile page with a header and a content area. In the content area you placed a jQuery Mobile listview with links to the app’s remaining pages: jobs, users and roles.
The second jQuery Mobile in the index.html file contains the message that will pop up when the user tries to access the online-only pages while the app is offline. On this mobile page, identified with the id “requires-online-dlg”, you will use the jQuery Mobile attributes data-role=”dialog” and data-transition=”pop” to instruct jQuery Mobile to render the page as a dialog using a pop transition. This will show the alert as depicted in the screenshot below:
One last detail about the index.html file. Note that the html tag contains a reference to the cache.manifest file, which is the offline manifest you will use to declare the resources the browser should cache for offline access. You will create this file in a few minutes.