Skip to content
Speed up your remote requests by automatically caching them on client and add support for offline navigation.
TypeScript JavaScript
Branch: master
Clone or download
davguij Cold observable (#3)
* Turned the Observable “cold” to mimic the Angular native Http service.

* Paperwork!
Latest commit 0332057 Feb 7, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Cold observable (#3) Feb 7, 2017
.gitignore Initial commit. Jan 28, 2017
LICENSE Initial commit. Jan 28, 2017
README.md Cold observable (#3) Feb 7, 2017
package-dist.json Cold observable (#3) Feb 7, 2017
package.json Cold observable (#3) Feb 7, 2017
rollup.config.js Localforage (#1) Feb 1, 2017
tsconfig.json Localforage (#1) Feb 1, 2017

README.md

Angular HTTP Cache

What's this?

This project adds an "offline-first" approach to the regular Http service. Responses are saved to local persistence and then served from there on subsequent requests.

How does it work?

Basically, the module uses its own extended Http replacement service to save the response to every request into the browser's local persistence.

So for every request, the service will first look for a matching response in its local persistence; if it exists, it will emit that response first.

Regardless of the previous step, the service will perform the HTTP request and will emit updated data if necessary.

How to use it?

The module is a replacement for the native HttpModule, so it's intended to be easy to be dropped in.

Its methods are identical to the native module.

The code works fine with JSON-formatted HTTP responses. It can be also used for other types of responses, such as images, but it hasn't been properly tested yet, so please use with caution.

Installing it

npm install ng-http-cache --save

Importing it

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HttpCacheModule } from 'ng-http-cache';

@NgModule({
  imports: [
    BrowserModule,
    HttpCacheModule
  ]
})
export class ExampleModule { }

Using it

import { Http } from '@angular/http';
export class ExampleComponent implements OnInit {
  constructor(private http: Http) { }

  ngOnInit() {
    this.http.get('http://api.example.com/example')
	  // There's no need to 'map' the response, the service does it for you!
      .subscribe((resp) => { 
        console.log(resp);
      });
  }
}

More stuff

Get in touch

Feel free to drop me a line if you have an issue, doubt, problem or suggestion, even just to tell me what you think. You can leave an issue here or give me a shout on Twitter.

To-do

  1. Check the network status and don't make the request if offline.
  2. Include unit tests.
  3. Add JSONP support.

License

MIT

You can’t perform that action at this time.