$http with fallback

AngularJS $http compatible factory which can provide a fallback for failing GET requests.

The goal

Always recieve status 20x on HTTP GET requests.

When you might want to use this

When you're building an AngularJS application with offline support, like a PhoneGap app for example.

What about the browser cache?

What about all those JSON services responding with no-caching headers?

How it works

Whenever a GET request performed by http-with-fallback responds with:

• status 200: the response is stored in the local storage
• status 20x, 30x: just resolve the promise with the given response
• status 40x, 50x: it looks for a successful response in the local storage. When found, resolve the promise with this response. If none found, and the fallbackData config value is set, resolve the promise with a response containing this data.

If the browser has no local storage support, every get() is just passed on to $http.

Usage

Default usage

httpWithFallback.get('/someurl.json')

Config options

There are two optional config options (next to all $http's normal config options): fallback and dontUserStorage.

httpWithFallback.get('/someurl.json', { fallback: { 'key': 'value' }, dontStoreFallback: true });

• fallback: whenever a GET request fails, and there is no stored response, the promise will resolve with this data. When everything fails and there is no fallback given, the promise will reject with the original response.
• dontStoreFallback: when true, don't store succesful 200 OK responses in the local storage for future fallback (default: false)

When a fallback occurs, an extra property isFallback will be added to the response:

httpWithFallback.get('/someurl.json')
                .then(function(response) {
                  // response.isFallback will be true when it's a fallback response
                })

or

httpWithFallback.get('/someurl.json')
                .success(data, status, header, config, isFallback) {
                  // isFallback will be true when it's a fallback response
                })

Build

npm install
grunt

Test

With Karma:

karma start --browser Chrome

Testrunner page:

http://your_checkout_location/test/

Why?

I got inspired by this podcast in which Jake Archibald tells about the Application Cache and the problems he has with it. One thing I particularly don't like is the cache-first approach. http-with-fallback is an experiment to see if I can deal with the offline scenario in a convenient way in AngularJS applications by wrapping some stuff around $http.