The document introduces Mobile Safari and its capabilities including geolocation support and client-side storage using SQLite. It demonstrates how to use the geolocation API and storage capabilities. A note taking web app is presented as an example that allows writing and localizing notes offline on the iPhone using these Mobile Safari features. Further development ideas are discussed like account systems and server synchronization.

1. Introduction to
Mobile Safari
Alberto, Gilles and Marc

2. Mobile Safari
24/10/2009
Content
- Introduction
- Mobile Safari
- GIS
- Client-side storage
- Demo
www.antistatique.net 2

3. Mobile Safari
24/10/2009
Introduction
- About us
- Web guru
- iPhone fans
- Symfony framework
www.antistatique.net 3

4. Mobile Safari
24/10/2009
Mobile Safari
- CSS (animations)
- Geolocalisation support (OS 3.x)
- Client-Side Storage (OS 2.1)
www.antistatique.net 4

5. Mobile Safari
24/10/2009
Geolocalisation
navigator.geolocation.getCurrentPosition(
successCallback,
errorCallback,
option
)
www.antistatique.net 5

6. navigator.geolocation.getCurrentPosition(
function(pos){
var lat = pos.coords.latitude;
var lng = pos.coords.longitude;
},
function(error){
switch(error.code){
/*[...]*/
}
},
{
enableHighAccuracy: true,
timeout: 45000, // in millisecond
maximumAge: 60000
};
);

7. Mobile Safari
24/10/2009
Client-side storage
- 5 Mb
- SQLite
www.antistatique.net 7

8. //// OPEN LOCAL DATABASE
var db;
if (window.openDatabase)
db = openDatabase("as_note", "1.0", "AS Note", 200000);
//// DO A SELECT
db.transaction(function(tx) {
tx.executeSql("SELECT id, note FROM MyTable WHERE id = ?",
[27], function(tx, rs) {
for (var i = 0; i < rs.rows.length; ++i) {
/* ... */
renderNote(rs.rows.item(i));
}
}, function(tx, error) {
/* ... */
});
});

9. //// CREATE TABLE IF NOT EXISTS
function init()
{
db.transaction(function(tx) {
tx.executeSql("SELECT COUNT(*) FROM MyTable", [],
function(result) {
doSomething();
}, function(tx, error) {
tx.executeSql("CREATE TABLE MyTable (
id INTEGER PRIMARY KEY,
note TEXT,
timestamp REAL)", [],
function(rs){
doSomething();
});
});
});
}

10. Mobile Safari
24/10/2009
Little web app
- Write notes
- Localize them
- Do it offline
- Take your iPhone : http://note.antistatique.net
www.antistatique.net 10

17. Mobile Safari
24/10/2009
Further development
- Account system
- Server synchronisation
www.antistatique.net 17

18. Mobile Safari
24/10/2009
Benefits of webApps
- Easy to develop, update
- No install required
- Apple free ~
www.antistatique.net 18

19. Mobile Safari
24/10/2009
Backwards
- Interactions with native apps
- Animation
- More
www.antistatique.net 19

20. Mobile Safari
24/10/2009
Sources
- http://developer.apple.com/
- Safari and iPhone
- http://dev.w3.org/geo/api/spec-source.html
- Geolocation API Specification
- http://www.w3.org/TR/offline-webapps/
- Offline Web Applications
- http://www.jqtouch.com/
- plugin for mobile web development on the iPhone,
Android, Palm Pre
www.antistatique.net 20