0
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 devel...
Overview
    Main introduction
✤



    Step 1 The interface
✤



    Step 2 The database
✤



    Step 3 Making it availa...
Introduction
    Mobile Safari
✤




    Html 5 & Javascript
✤




    Local database
✤




    Caching the webapp for offl...
Example

Checklist
berttimmermans.com/checklist
Step 1 The interface
     Mobile interface
 ✤




     iPhone optimization
 ✤




          iPhone codes
     ✤



       ...
Step 1 The interface
      CSS 3 (-webkit-) support
  ✤




      Example

      #object {
        position:absolute;
    ...
Step 1 The interface
      Javascript solutions
  ✤




          jQuery, mootools, ...
      ✤




          Fixed header...
Step 2 The database
     Clientside Javascript database
 ✤




     Safari and other webkit based browsers like Google Chr...
Step 2 The database
 Example code

  var db;

  try {
     if (window.openDatabase) {
         db = openDatabase(quot;Chec...
Step 3 Caching the webapp
     Firefox en iPhone safari
 ✤




     HTML 5 manifest file
 ✤




     Example of a manifest ...
Step 3 Caching the webapp
     IMPORTANT !
 ✤




     The manifest file has to have a text/cache-manifest MIME
     type

...
One more thing ...
 tinyurl.com/1morething
Tweetwall
Your mobile twitter wall
berttimmermans.com/tweetwall
The end
Barcamp Antwerp 2009 was sponserd by
Upcoming SlideShare
Loading in...5
×

iPhone offline webapps

53,772

Published on

Published in: Technology, News & Politics
5 Comments
25 Likes
Statistics
Notes
  • 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?
       Reply 
    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?
    http://www.slideshare.net/Zanura/new-i-pod-touch-review
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • This is great information.
       Reply 
    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.
       Reply 
    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 ;)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
53,772
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
481
Comments
5
Likes
25
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×