3

I have to build a web app that is fully useable in remote/field/offline environments It looks like HTML5 supports an "offline mode" with a pretty sophisticated caching mechanism.

A few questions:

  1. Beyond caching JS/CSS/image resources, I also need a way to stub/mock/re-route async/ajax calls made after the pages "download". For instance, in "online mode", if the user clicks a button, this would normally send an HTTP POST to the server. But in "off-line mode", I need it to somehow store a stubbed/mocked version of the HTTP POST somewhere locally. Then, when the user resumes "online mode" the app would be intelligent enough to query the cache and fire off the request. Is this possible? If so, what is this mechanism called, and where is it documented?
  2. How are laymen end users expected to find offline HTML5 apps?!? They will know to go to http://www.myapp.example.com in "online mode", but while "off-line" they would normally need to go to some browser URL beginning with file:///some/path/on/their/system/to/the/cached/offline/app, right? Does HTML5 have anything to make this more "user friendly"? For instance, in offline mode could a user still go to the normal online URL (myapp.example.com) but then the browser automatically detects the network outage, and serves back whatever it has in its cache? Or something like that?
Improve this question
3
  • 1
    You should read through this article: diveintohtml5.info/offline.html Commented Sep 26, 2014 at 15:23
  • Thanks @LcLk (+1) - I should have mentioned this, but I already read that article. Unfortunately these are two points that the article doesn't address :-/ Commented Sep 26, 2014 at 15:25
  • ah, I seem to remember it did, let me check that again, maybe I meant to grab a different link from my behemoth of a bookmarks folder... Commented Sep 26, 2014 at 15:37

1 Answer 1

Reset to default
1

Ok so I had infact read the answer to those questions not on the diveintohtml5 article but in the links it referenced:

  1. This linked article described how you can check in JS whether you're currently online or working from the cached page. Now to utilize this fully you should have two versions of your API code( what you are using to GET server resources):

    1. one for online use, with HTTP get/post, which then stores data locally using indexdb
    2. one for offline use, which directly goes to your indexdb or falls back to a resource not available. You should probably also check if the user is back online here and switch to the alternative method.

  2. Once the user visited a page with a cache manifest, and your browser knows how to deal with it, next time you try to access it and you're offline then the browser does it all for you: https://html.spec.whatwg.org/multipage/browsers.html#offline, http://googlecode.blogspot.ie/2009/05/gmail-for-mobile-html5-series-part-3.html

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks again @LcLk (+1) - but for #2, what URL would the user see in their browser address bar when using my app offline?
I have so far only read and not tested any of this but I'm assuming the same url as usual, I have a node server running atm, I'll mock up an example and report back

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.