UNPKG

angular-cached-resource

Version:

An AngularJS module to interact with RESTful resources, even when browser is offline

121 lines (86 loc) 4.14 kB
ngCachedResource [![NPM version][npm-badge]][npm-link] [![Build Status][travis-badge]][travis-link] ============== An [AngularJS][angular] module to interact with RESTful server-side data sources, even when the browser is offline. Uses HTML5 [localStorage][localStorage] under the hood. Closely mimics the behavior of the core [ngResource][ngResource] module. ## A simple example ```javascript var Article = $cachedResource('article', '/articles/:id', {id: "@id"}); // GET requests: var firstArticle = Article.get({id: 1}); firstArticle.$promise.then(function() { // firstArticle came from localStorage, if it has been loaded before }); firstArticle.$httpPromise.then(function() { // Even if firstArticle was loaded before, now it has been fully refreshed // and represents the response from the /articles/1 endpoint }); // POST/PUT/DELETE requests: // If this fails initially, possibly because of a bad connection, we will // try sending it again Article.save({id: 2}, {contents: "Lorem ipsum dolor..."}, function() { // Reaching this callback means it successfully saved. }); ``` ------- ## Usage Provides a factory called `$cachedResource` that returns a "CachedResource" object. ```js $cachedResource(cacheKey, url, [paramDefaults], [actions]); ``` ### Arguments - **cacheKey**, `String`<br> An arbitrary key that will uniquely represent this resource in localStorage. When the resource is instanciated, it will check localStorage for any - **url**, `String`<br> Exactly matches the API for the `url` param of the [$resource][ngResource] factory. - **paramDefaults**, `Object`, _(optional)_<br> Exactly matches the API for the `paramDefaults` param of the [$resource][ngResource] factory. - **actions**, `Object`, _optional_<br> Exactly matches the API for the `actions` param of the [$resource][ngResource] factory. ### Returns A CachedResource "class" object. This object is basically a swap-in replacement for an object created by the `$resource` factory with the following modified or additional properties: - `Resource.$promise`: For GET requests, if anything was already in the cache, this promise is immediately resolved (still asynchronously!) even as the HTTP request continues. - `Resource.$httpPromise`: For all requests, this promise is resolved as soon as the corresponding HTTP request responds. ------ ## Details Asking for a cached resource with `get` or `query` will do the following: 1. If the request has not been made previously, it will immediately return a `resource` object, just like usual. The request will go through to the server, and when the server responds, the resource will be saved in a localStorage cache. 2. If the request has already been made, it will immediately return a `resource` object that is pre-populated from the cache. The request will still attempt to go through to the server, and if the server responds, the cache entry will be updated. Updating a CachedResource object will do the following: 1. Add the resource update action to a queue. 2. Immediately attempt to flush the queue by sending all the network requests in the queue. 3. If a queued network request succeeds, remove it from the queue and resolve the promises on the associated resources (only if the queue entry was made after the page was loaded) 4. If the queue contains requests, attempt to flush it once per minute OR whenever the browser sends a [navigator.onOnline][onOnline] event. ------ ## Development Just make sure you run the tests. ``` npm install npm test ``` ------ ## License MIT. [npm-badge]: https://badge.fury.io/js/angular-cached-resource.png [npm-link]: http://badge.fury.io/js/angular-cached-resource [travis-badge]: https://travis-ci.org/goodeggs/angular-cached-resource.png [travis-link]: https://travis-ci.org/goodeggs/angular-cached-resource [angular]: http://angularjs.org/ [ngResource]: http://docs.angularjs.org/api/ngResource/service/$resource [localStorage]: http://www.w3.org/TR/webstorage/#the-localstorage-attribute [onOnline]: https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine.onLine