CODEWITHSUNDEEP
htmllocal-storage
anurag
anurag

Reputation: 35

html5 local storage for offline viewing

I have a folder, which contains html files, images, stylesheets, and js. I have uploaded it to the server and when i open it on ipad, all the content should get stored on iPad for offline viewing. How can this be done using webstorage / local storage? I tried with offline cache but it has its limit of 5MB

Upvotes: 3

Views: 1570

Answers (2)

Tejesh Alimilli
Tejesh Alimilli

Reputation: 1800

You have to split your app in two. A downloader and the actual app.

The downloader will download the required files once and save it to localstorage/webstorage. Once saved your app can be loaded from local copy directly. The downloader part will be saved using cache manifest mechanism.

I am currently developing an app which works in the same way.

Note: JS and CSS files can be saved directly to localstorage, but for images you have to convert them to base64 and then use them. Watch out for the base64 size limitations.

http://en.wikipedia.org/wiki/Data_URI_scheme

Upvotes: 2

sascha
sascha

Reputation: 4690

Your webserver has to support this by adding 

AddType text/cache-manifest .manifest

to your .htaccess or server config.

then you need a manifest file, which says the client "store these files locally". Just create a blank file call it something like "data.manifest" and add this:

CACHE MANIFEST

CACHE
index.html
style.css
etc..

There are many more things you can do in this manifest file. I consider using Google or the search for this.

At least you have to edit your <html>-tag for your manifest file to your site.

<html manifest="/data.manifest" />

That's it. The browser should ask you whether it should store data locally.

Upvotes: 3

Related Questions