Offline and Local Storage

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.

If you think writing code from scratch for the assignment will be too difficult for you, please email Prateek, and we will provide you a template to start with.

Once complete, submit a link to your application, along with your offline.manifest file to prateekk@ischool.berkeley.edu

Sample Assignment Screenshot:

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 prateekk@ischool.berkeley.edu

Supplementary Material

• W3C:HTML 5 Offline Web applications.
• Building iPhone Apps with HTML, CSS, and JavaScript.
• HTML/CSS: W3Schools and Head First HTML with CSS, XHTML.
• JavaScript: Head First JavaScript.