Embed Size (px)
DESCRIPTION
Citation preview
How to build a offline webapp for the iPhone ...By Bert Timmermans
Bert TimmermansStudent Communicatie Multimedia & DesignFreelance - Nocus Communication - Hasselt
Web design / web developmentiPhone web development projects:
• Keypoint Beta 3• Checklist• ...
Mail: [email protected]: @berttimmermans Website: http://www.berttimmermans.com
✤ Main introduction
✤ Step 1 The interface
✤ Step 2 The database
✤ Step 3 Making it available offline
Overview
✤ Mobile Safari
✤ Html 5 & Javascript
✤ Local database
✤ Caching the webapp for offline use
Introduction
Example
Checklistberttimmermans.com/checklist
✤ Mobile interface
✤ iPhone optimization
✤ iPhone codes
Step 1 The interface
<!-- iPhone codes --><link rel="apple-touch-icon" href="image/icon.png"/><meta name="viewport" content="width=device-width; initial-scale=1.0;" />
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta names="apple-mobile-web-app-status-bar-style" content="black" />
Step 1 The interface
#object {position:absolute;left: 0px;-webkit-transition-property: left;-webkit-transition-duration: 0.5s, 0.5s;}
#object.class {left: 10px;
}
✤ CSS 3 (-webkit-) support
Example
Step 1 The interface✤ Javascript solutions
✤ jQuery, mootools, ...
✤ Fixed header
✤ Rotation detection
✤ Location detection using free appstore app
✤ ...
Step 2 The database✤ Clientside Javascript database
✤ Safari and other webkit based browsers like Google Chrome
✤ An option to sync with a online database
✤ MYSQL commands
✤ User can manage database using preferences
Step 2 The databaseExample code
var db;
try { if (window.openDatabase) { db = openDatabase("Checklist", "1.0", "HTML5 Database API", 200000); if (!db) { alert("Failed to open the database"); } else{ var highestId = 0;
} } else alert("Couldn't open the database. Please try with a WebKit");}
✤ Firefox en iPhone safari
✤ HTML 5 manifest file
✤ Example of a manifest file
Step 3 Caching the webapp
CACHE MANIFEST
css/main.cssimages/main.pngjs/database.js
<html manifest="main.manifest">
✤ IMPORTANT !
The manifest file has to have a text/cache-manifest MIME type
Solution a .htacces
Step 3 Caching the webapp
AddType text/cache-manifest .manifest
One more thing ...tinyurl.com/1morething
TweetwallYour mobile twitter wallberttimmermans.com/tweetwall
The end
Barcamp Antwerp 2009 was sponserd by
