angular-offline

This plugin is no longer actively maintained, you can still use it but issues will not be resolved. If you want the npm name, you can contact me by email.

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');
});

connectionStatus.isOnline()

Test if the navigator is online.

module.run(function (connectionStatus, $log) {
  if (connectionStatus.isOnline())
    $log.info('We have internet!');
});

connectionStatus.$on(event, listener)

Listen "online" and "offline" events to get notified when the navigator become "online" or "offline". A $rootScope.$apply is automatically done.

module.run(function (connectionStatus) {
  connectionStatus.$on('online', function () {
    $log.info('We are now online');
  });

  connectionStatus.$on('offline', function () {
    $log.info('We are now offline');
  });
});

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