iPhone offline webapps
Upcoming SlideShare
Loading in...5

iPhone offline webapps






Total Views
Views on SlideShare
Embed Views



13 Embeds 872

http://www.slideshare.net 576
http://blog.vinova.sg 158
http://whatdidijustlearn.blogspot.com 107
http://thejupitech.com 18
http://www.barcampantwerpen.org 3
http://translate.googleusercontent.com 2
http://paper.li 2
http://webcache.googleusercontent.com 1
http://vinova.sg 1
http://www.e-presentations.us 1
http://trunk.ly 1
http://tracker.agiletouch.com:8080 1
http://seoautomated.com 1


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • ur app is gr8 but i have a que about web offline. if my html generate dynamic html means it not a .html file even its a servlet call which base on parameter return generated html content how can we make these kind of sites webapps offline work? any idea?
    Are you sure you want to
    Your message goes here
  • Apple’s New iPod Touch
    A Worthy Innovation or a High Priced Techno Overload?
    Are you sure you want to
    Your message goes here
  • This is great information.
    Are you sure you want to
    Your message goes here
  • Your checklist webapps works well on my iPhone, but if I take all your server files and also having set the mime type for .manifest and run from my own server I get an error message when the phone is offline. The error message is 'Operation could not be complete. Invalid argument' which is the error I get from any document load in offline mode. Any ideas what I need to do - there must be something else for the server.
    Are you sure you want to
    Your message goes here
  • For making a offline web app you need to start from the new HTML5 and some new javascript functions. A offline webapp only needs the manifest file to work but it is best to save all your user generated content in a local db using javascript. The trick behind the manifest file(needed to save files local) is that you have list up ALL files that you want ot cash in this file. A second remark is that you need to make sure that the server handles the manifest file as a manifest file, you can do this by a simple xml file like in the presentation ;)
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

iPhone offline webapps iPhone offline webapps Presentation Transcript

  • How to build a offline webapp for the iPhone ... By Bert Timmermans
  • Bert Timmermans Student Communicatie Multimedia & Design Freelance - Nocus Communication - Hasselt Web design / web development iPhone web development projects: • Keypoint Beta 3 • Checklist • ... Mail: me@berttimmermans.com Twitter: @berttimmermans Website: http://www.berttimmermans.com
  • Overview Main introduction ✤ Step 1 The interface ✤ Step 2 The database ✤ Step 3 Making it available offline ✤
  • Introduction Mobile Safari ✤ Html 5 & Javascript ✤ Local database ✤ Caching the webapp for offline use ✤
  • Example Checklist berttimmermans.com/checklist
  • Step 1 The interface Mobile interface ✤ iPhone optimization ✤ iPhone codes ✤ <!-- iPhone codes --> <link rel=quot;apple-touch-iconquot; href=quot;image/icon.pngquot;/> <meta name=quot;viewportquot; content=quot;width=device-width; initial-scale=1.0;quot; /> <meta name=quot;apple-mobile-web-app-capablequot; content=quot;yesquot; /> <meta names=quot;apple-mobile-web-app-status-bar-stylequot; content=quot;blackquot; />
  • Step 1 The interface CSS 3 (-webkit-) support ✤ Example #object { position:absolute; left: 0px; -webkit-transition-property: left; -webkit-transition-duration: 0.5s, 0.5s; } #object.class { left: 10px; }
  • 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 database Example code var db; try { if (window.openDatabase) { db = openDatabase(quot;Checklistquot;, quot;1.0quot;, quot;HTML5 Database APIquot;, 200000); if (!db) { alert(quot;Failed to open the databasequot;); } else{ var highestId = 0; } } else alert(quot;Couldn't open the database. Please try with a WebKitquot;); }
  • Step 3 Caching the webapp Firefox en iPhone safari ✤ HTML 5 manifest file ✤ Example of a manifest file ✤ <html manifest=quot;main.manifestquot;> CACHE MANIFEST css/main.css images/main.png js/database.js
  • Step 3 Caching the webapp IMPORTANT ! ✤ The manifest file has to have a text/cache-manifest MIME type Solution a .htacces AddType text/cache-manifest .manifest
  • One more thing ... tinyurl.com/1morething
  • Tweetwall Your mobile twitter wall berttimmermans.com/tweetwall
  • The end
  • Barcamp Antwerp 2009 was sponserd by