angular-offline

Offline support for AngularJS applications.

Install

Using npm

npm install angular-offline

Using bower

bower install angular-offline

Usage

module.run(function (offline, $http) {
  offline.start($http);
 
  $http.get('/test.json', {offline: true})
  .then(...);
});

$http

Puting the offline flag to true in $http config will have for effect to activate the angular cache for this request and to add offline behaviour to the request.

offlineProvider.debug(value)

Start or stop debug mode. It adds a lot of additional logs to understand how offline works.

module.config(function (offlineProvider) {
  offlineProvider.debug(true);
});

offline.start(requester)

Start offline with the requester ($http). Usually you will call this method in .run of your application.

module.run(function (offline, $http) {
  offline.start($http);
});

offline.stackCache

Specify a cache to use to stack requests (POST, PUT, DELETE...).

module.run(function (offline, $cacheFactory) {
  offline.stackCache = $cacheFactory('custom-cache');
});

Use with angular-cache

If you want to build an application completely offline, you will need a cache that can be stored in the localStorage. To do that, the recommended method is to use angular-cache.

Specify a TTL for a GET request

You must use maxAge to specify your TTL. If you specify deleteOnExpire to "none", the cache will be served even if your TTL is exceeded.

module.run(function ($http, CacheFactory) {
  $http.get('/test.json', {
    offline: true,
    cache: CacheFactory.createCache('bookCache', {
      deleteOnExpire: 'none',
      maxAge: 60000,
      storageMode: 'localStorage'
    })
  });
});

Specify a default cache for all GET requests

To get more details about this, you can read the official documentation.

module.run(function ($http, CacheFactory) {
  $http.defaults.cache = CacheFactory.createCache('bookCache', {
      deleteOnExpire: 'none',
      maxAge: 60000,
      storageMode: 'localStorage'
    })
  });
});

Use a persistent storage for POST request

You can specify the storageMode to "localStorage" to have a persistent storage for the stack.

module.run(function ($http, CacheFactory) {
  offline.stackCache = CacheFactory.createCache('offlineStack', {
    storageMode: 'localStorage'
  });
});

Play with example

To play with the example, you can start it using the command npm run example, then opening the console and try.

Workflow

- Request GET
  -> interceptor.request
    -> has offline flag and is online
      -> clean cache
- Other requests
  -> interceptor.request
    -> has offline flag and is offline
      -> push request in stack
      -> reject

- "online" event
  -> process stack

Browser support

This library require the online status feature activated, you can refer to caniuse to see exactly what browsers are supported.

License

MIT