iPhone offline webapps


Published on

Published in: Technology, News & Politics
  • 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  Yes  No
    Your message goes here
  • Apple’s New iPod Touch
    A Worthy Innovation or a High Priced Techno Overload?
    Are you sure you want to  Yes  No
    Your message goes here
  • This is great information.
    Are you sure you want to  Yes  No
    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  Yes  No
    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  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

iPhone offline webapps

  1. 1. How to build a offline webapp for the iPhone ... By Bert Timmermans
  2. 2. 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
  3. 3. Overview Main introduction ✤ Step 1 The interface ✤ Step 2 The database ✤ Step 3 Making it available offline ✤
  4. 4. Introduction Mobile Safari ✤ Html 5 & Javascript ✤ Local database ✤ Caching the webapp for offline use ✤
  5. 5. Example Checklist berttimmermans.com/checklist
  6. 6. 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; />
  7. 7. 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; }
  8. 8. Step 1 The interface Javascript solutions ✤ jQuery, mootools, ... ✤ Fixed header ✤ Rotation detection ✤ Location detection using free appstore app ✤ ... ✤
  9. 9. 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 ✤
  10. 10. 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;); }
  11. 11. 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
  12. 12. 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
  13. 13. One more thing ... tinyurl.com/1morething
  14. 14. Tweetwall Your mobile twitter wall berttimmermans.com/tweetwall
  15. 15. The end
  16. 16. Barcamp Antwerp 2009 was sponserd by