Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Working with images in HTML5 offline application?

We've successfully created an offline application using HTML5. What it does is store data in indexedDB or in localStorage, when online, the local storage and online database will be synchronized. Everything's fine until we decided to add functionality to upload images.

1) Since the app works offline, we cannot upload images in the server, where are we going to put them?

Possible Solutions:

  • when offline, save the path, when the user gets online, upload the images by creating input elements and assigning the path to its value attribute. The problem with this approach is that we cannot change value attribute of input element and we cannot get the full path of the image to be uploaded. It seems like this solution is not really possible.
  • save the image in indexedDB or localStorage, is this possible?

2) If we successfully save the image in indexedDB or localStorage, how are we going to upload it once the user gets online?

Possible Solutions:

  • WebSocket - I haven't touch this yet.
  • Flash - will it work on iPhone? Probably not.

3) If we successfully saved the image in indexedDB or localStorage, how are we going to display it on the page? Image elements use src attribute to determine which image to display, is there any other methods like using image binary?

If you have faced the same situation before, what workaround did you do to achieve your goal?

like image 603
dpp Avatar asked Aug 29 '13 07:08

dpp


People also ask

What allows HTML5 application to work in an offline state?

Offline web applications are available through the new HTML Offline Web Application API, also known as HTML Application Cache. Beyond simply serving pages to the user when an Internet connection is unavailable, often an offline application requires storage of user's information.

Can HTML work offline?

Of course, you can't. But you can download when you're online. And that's how HTML5 offline applications work. At its simplest, an offline web application is a list of URL s — HTML , CSS , JavaScript, images, or any other kind of resource.

How do offline web applications work?

Offline Application Caching APIs The mechanism for ensuring Web applications are available even when the user is not connected to their network is the manifest attribute on the html element. This file specifies several files to cache, and then specifies that server.


1 Answers

Use FileAPI available in HTML5. You can "upload" your images there, and then, when the server is back online, you can transfer them, even using traditional XHR.

FileAPI is safe to use as most of the major browsers support it: http://caniuse.com/#feat=fileapi

Detailed:

1) Write the file to permament or temporary storage (as defined by our application). Note that temporarystorage is cleared when the session exits (at the browsers discretion).

See here for tutorial: http://www.html5rocks.com/en/tutorials/file/filesystem/?ModPagespeed=noscript

2) I would use traditional XHRequests to transmit them. It's easier and well-tested (you don't have to design a new protocol from scratch).

3) That's the best thing :) You can get correct URLs right from the File API, so the images are displayed from your cache. See here: http://www.html5rocks.com/en/tutorials/file/filesystem/?ModPagespeed=noscript#toc-filesystemurls

like image 105
thriqon Avatar answered Oct 05 '22 01:10

thriqon