This document discusses building a mobile application for hydrants using a browser-based approach. It outlines key challenges like geolocation, user persistence without device dependence, and handling offline usage. The document provides code examples for geolocation, local storage, and detecting online status to gracefully handle loss of connectivity. It recommends making the web app feel like a native mobile application through features like home screen icons.

1. Mobile GIS
In the browser
Adam Conner: GeoDecisions

2. Task:
Build a mobile application for hydrant

3. Challenge:
Don’t make it device specific

4. Difficult Features:
• GeoLocation
• User Persistence
• Ease for users new to mobile
• gracefully handling loss of
connectivity

5. GeoLocation:
navigator.geolocation.getCurrentPosition(show_map);

6. User Persistence:
localStorage["bar"] = foo;
(this only stores strings)

7. Ease for users:
Make your web app look like a real application.
Add icon to homescreen run application as full
screen web app
<link rel="apple-touch-icon" href="bookmark-icon.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />

8. Loss of connectivity:
• if(navigator.online){};
• Lots of local storage
• set a timeout on ajax requests and
store data until navigator.online=true;

9. Controller

10. Model

11. Ajax Request

12. Demo