Offline and Local Storage

Assignment 3 - Web Architecture Fall 2011

Assigned: Thursday, October 13th, 2011
Due: Thursday, October 27th, 2011

Introduction:

 The goal of this assignment is to create an application that is offline capable and utilizes localStorage.

Instructions:

Part A

You will create an application that allows a user to enter how they are feeling regardless of whether the application is online or offline. Your application will have one textbox for entering the feeling, one button for storing that feeling to a queue (the key/value dictionary structure of localStorage), and one button for uploading the queue of feelings when the application is online. While the application is offline, the upload button should be disabled, but the add to queue button should be enabled while on- or offline.

Refer to Building iPhone Apps with HTML, CSS, and JavaScript Chapters 5 and 6 for more information on localStorage and the offline application cache.

By testing on your new Droid phone/Smartphone, the application should:

  • Cache the application using a offline.manifest file.
  • Display when it is online and offline.
  • Serve the manifest file with the text/cache-manifest content type by adding an .htaccess file to your Web directory (where you will put your html file) with the following line:
    AddType text/cache-manifest .manifest
  • Display when it is online and offline.
  • Store feelings entered in the textbox to localStorage, using the key/value structure of localStorage.
  • Display the localStorage values when the user clicks add to queue. Display an alert box indicating the number of localStorage values when the user clicks upload.

    You will need to implement some queuing logic for this, such as using numbers as keys. See the localStorage example in Chapter 5 of Building iPhone Apps with HTML, CSS, and JavaScript for more information.

Once complete, submit a link to your application, along with your offline.manifest file to taibah@gmail.com

Sample Assignment Screenshot:

Offline App Demo Screenshot

For extra credit, complete the above, then create a copy of the above assignment and cache the application using a dynamic manifest file manifest.php that reads the contents of your application directory (and its subdirectories) and creates the manifest file list.

Refer to Building iPhone Apps with HTML, CSS, and JavaScript Chapters 5 and 6 for more information on creating a dynamic manifest file.

Submit a link to your application, along with your manifest.php file to taibah@gmail.com

Part B

Identify a case when offline storage would be useful for a mobile user. Using this as a use case, explain in one page or less how you would design and develop an application that utilizes offline storage. What data would you store? How? What form of offline storage would you use and why? Include consideration of storage requirements, such as synchronization, storage capacities and connectivity.

    Evaluation:
  • Use case description.
  • Data to store and how.
  • Type of offline storage and why.
  • Storage requirements consideration.
  • When and how do you synchronize local and server data?

Submit your answer to taibah@gmail.com

Hints:

Supplementary Material
Creative Commons License Please send comments to dilanm@ischool.berkeley.edu
Last modification: Thursday, 13-Oct-2011 11:22:56 MET 		valid CSS! valid XHTML 1.0!