How do browsers handle URLs in HTML5 offline mode?

Question

I just read the de facto standard for HTML5 offline/localStorage.

It has me curious: if I build my web app to work regardless of whether or not there's an internet connection, and I use HTML5 localStorage to do this, then how are web app URLs affected when in "offline mode"?

For instance, normally my web app's home page might be http://myapp.example.com. How would this change in offline mode; what would the URL be?

I'm hoping that the browser would allow my users to still go to http://myapp.example.com, but then detect no network connection, and attempt to load the site from localStorage.

But it's also possible that, once they load the site from cache, they automatically change the URL to something like file:///path/to/localStorage/homepage.html.

It's also entirely possible I misunderstood that entire article and this is not something that even localStorage can do for me. Any ideas?

Answer 1

localStorage is just a storage location that your web app can access, you still need internet access for everything else unless it has been cached already by the browser.

here's some info I dug up about localStorage:

• localStorage doesn't change the url of your resources to local files, those are still stored in your server or your browser cache.
• you have to access localStorage manually to access the stuff you stored. you do that like so localStorage.getItem('key')

from that, you have to manually code a check to see if you already have the resources you need in localStorage, if not then download it from the server via ajax or whatever you prefer

• herpylderp: Thanks @Maru (+1) - I understand everything you say except for one bit. When you say "localStorage doesn't change the url of your resources to local files..." does that mean the user would still go to http://myapp.example.com? Assuming that all of the resources (HTML/JS/CSS) were already cached, would the browser still call up the site via the "normal" (online) url? Thanks again!
• Maru: @herpylderp you need to explicitly say you want to access or store the info in localStorage otherwise it would still go to http://myapp.example.com for each item it can't find in the cache.
• Bart van Ingen Schenau: @herpylderp: Yes, the browser's cache works in such a way that if you ask for http://myapp.example.com/ then the browser first looks in its cache to see if the requested resource is already retrieved and only after that it goes onto the network. This process is meant to be transparent to the user.
• herpylderp: Thanks again @Maru (+2 for both) - last followup question: does localStorage allow me to store both resources (such as HTML, JS and CSS) as well as app-specific data? For instance could I store myapp.css in the localStorage as well as, say, a numeric variable called fizzBuzz, and then access them from the cache using the same API? For instance, could I retrieve either of them via localStorage.getItem('myapp.css') or via localStorage.getItem('fizzBuzz')? Thanks again!
• Maru: @herpylderp you're welcome, if you're happy with the answer i'd appreciate it if you accepted the answer :D