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:
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:
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?
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 temporary
storage 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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.