backbone-fetch-cache-indexeddb

backbone-fetch-cache-indexeddb

This is a plugin for Backbone.js.
It also works with Backbone-based frameworks like Marionette.

It overwrites the fetch Method of Backbone.Model and Backbone.Collection and cachees all fetched data in the browsers IndexedDB.

This can reduces unesseccary API calls significantly!

Status

Installation

npm install --save backbone-fetch-cache-indexeddb

Initialization

Just insert the script after Backbone.

<script src="backbone.min.js"></script>
<script src="dist/backbone.fetch-cache.indexeddb.min.js"></script>

First the IndexedDb needs to be initialized. This is only neccessare once e.g. after loading your Application:

Backbone.fetchcache.init({
	name: "MyApplicationCache",
	enabled: false,
	maxAge: Infinity
})

Options

name

REQUIRED

The Name of your IndexedDB Store. This should be unique to your application.

enabled

OPTIONAL

Enable the cache by default for all requests. This can be overwritten by setting cache:false or cache:true on the inidividual fetch call.
[Default: false]

maxAge

OPTIONAL

Default max age in seconds. This can be overwritten by setting maxAge on the inidividual fetch call.
[Default: Infinity]

Usage

MockyModel = Backbone.Model.extend({
  url: 'http://www.mocky.io/v2/5185415ba171ea3a00704eed'
});

var model = new MockyModel();

// 1. download data from server
model.fetch({
  // Cache this request.
  cache: true
});

// 2. request the data again: it is loaded instantly from cache.
model.fetch({
  // Check is the data is availible in the cache.
  cache: true,
  // Cache expires in seconds. Here one hour.
  maxAge: 60*60
})

// 3. force a refresh from server
model.fetch({
  // Enable chaching for this request
  cache: true,
  // force a refresh from server
  maxAge: -1
})

Events

Backbone.fetchcache extends Backbone.Events and provides the following events.
These events are mainly for logging or debugging puropses:

• getitem: An item was read from the cache. Callback parameters: key, data, maxAge.
• setitem: An item was saved to the cache. Callback parameters: key, data.
• aged: An item was found but is is too old to be valid. Callback parameters: key, data, maxAge.
• notfound: This is event is fired, when the requested item does not exist in the cache. Callback parameters: key.
• clear: The cache was cleared. Callback parameters: none.

In addition to the original events (e.g. sync, error ...) the following events get triggered at the model or collection:

• cacherequest: Like the original request event this is fired, when a request (getItem) to the cache has started. This is usefull e.g. to show a loading-view.

Development

You should never manually change files in the dist folder. They are generated.

After changing the sources in the src folder you can run npm run test to build an test your cahnges.

During development you can start the tests in your local browser with npm run watch. This will also watch for changes in the tests or the sources.

References

• This software is heavily inspired by backbone-fetch-cache.
• This software uses the idb-wrapper to ensure cross-browser support.

License

Licensed under the MIT license 2017 by Alexander Wunschik and contributors.