Skip to content

Commit ff9a0ec

Browse files
committed
Update: Docs updated, disable cache method
1 parent 8baadab commit ff9a0ec

File tree

3 files changed

+128
-74
lines changed

3 files changed

+128
-74
lines changed

README.md

+120-73
Original file line numberDiff line numberDiff line change
@@ -1,186 +1,233 @@
1-
# Ionic 2 cache service
1+
# Ionic cache service
22

3-
My Ionic 2 cache service that can cache almost everything, include requests. It's made up to use WebSQL or SQLite
4-
as storage and work well with Observables.
3+
Ionic cache service that can cache almost everything. **It caches request, observables, promises and classic data.** It uses WebSQL or SQLite
4+
as storage and work well with Observables. With few little changes it can be used separatelety in Angular 2 application.
55

6-
**It's not well tested yet, so use it at your own risk.** Please report all bugs to bug report or fix it, or
7-
better fix it and send pull request :)
6+
Key features:
7+
+ Request caching
8+
+ Delayed observable caching (see docs for more info)
9+
+ Don't invalidate cache if is browser offline
10+
+ Set and invalidate groups of entries
11+
12+
Please report all bugs to bug report or fix it, or better fix it and send pull request :)
13+
14+
#### Contributors
15+
16+
Big thanks to all contributors for help. Currently only one Vojta Tranta, but I hope there will be more names in future :)
817

918
## Install
1019

11-
Simple copy file to your providers folder and inject it in *app.js* file.
20+
Via NPM:
1221

13-
```js
14-
import {CacheProvider} from "./providers/cache-provider/cache-provider";
22+
```bash
23+
npm install ionic-cache --save
24+
cordova add plugin cordova-sqlite-storage --save
25+
```
26+
27+
And inject service to your app:
28+
29+
```ts
30+
import {CacheService} from "ionic-cache/ionic-cache";
1531

1632
@App({
17-
templateUrl: "build/app.html",
18-
providers: [CacheProvider]
33+
templateUrl: "build/app.html"
1934
})
2035
class MyApp {
21-
static get parameters() {
22-
return [[IonicApp], [Platform], [CacheProvider]];
23-
}
24-
25-
constructor(app, platform, cache) {
36+
constructor(cache: CacheService) {
2637
...
2738
this.cache = cache;
28-
29-
this.cache.setTTL(60); //set default cache TTL for 1 minute
39+
this.cache.setDefaultTTL(60 * 60); //set default cache TTL for 1 hour
3040
....
3141
}
3242
...
43+
}
44+
ionicBootstrap(MyApp, [
45+
CacheService
46+
]);
3347
```
3448

3549
## Usage
3650

37-
#### Cache request response body
51+
#### Cache request
3852

39-
```js
40-
import {CacheProvider} from '../cache-provider/cache-provider';
53+
```ts
54+
...
55+
import {CacheService} from "ionic-cache/ionic-cache";
4156

4257
@Injectable()
43-
export class CategoryProvider {
44-
static get parameters() {
45-
return [[Http], [CacheProvider]]
46-
}
47-
48-
constructor(http, cache) {
58+
export class SomeProvider {
59+
constructor(http: Http, cache: CacheService) {
4960
this.http = http;
5061
this.cache = cache;
5162
}
5263

5364
loadList() {
54-
let url = "http://google.com";
65+
let url = "http://ip.jsontest.com";
5566
let cacheKey = url;
56-
5767
let request = this.http.get(url).map(res => res.json());
58-
return this.cache.loadItem(cacheKey, request);
68+
69+
return this.cache.loadFromObservable(cacheKey, request);
5970
}
6071
...
6172
```
6273
6374
#### Cache whole request response
6475
6576
Sometimes you need to cache whole response, if you need to look to Headers etc. It can be done only with simple
66-
move *.map(res => res.json())* after *loadItem* method. *LoadItem* returns Observable, so you can also use other
67-
Observable operators
77+
move *.map(res => res.json())* after *loadFromObservable* method. *loadFromObservable* returns Observable, so you can also use other
78+
Observable operators.
6879
6980
```js
7081
...
7182
let request = this.http.get(url);
72-
return this.cache.loadItem(cacheKey, request).map(res => res.json());
83+
return this.cache.loadFromObservable(cacheKey, request).map(res => res.json());
84+
...
85+
```
86+
87+
#### Cache classic data (arrays, objects, strings, numbers etc.)
88+
89+
Cache service works well with observables, but you can cache classic data as well.
90+
91+
```js
92+
...
93+
let key = 'heavily-calculated-function';
94+
95+
this.cache.getItem(key).catch(() => {
96+
// fall here if item is expired or doesn't exist
97+
let result = heavilyCalculatedFunction();
98+
return this.cache.saveItem(key, result);
99+
}).then((data) => {
100+
console.log("Saved data: ", data);
101+
});
102+
...
103+
```
104+
105+
#### Cache promises
106+
107+
```js
108+
...
109+
let key = 'some-promise';
110+
111+
this.cache.getItem(key).catch(() => {
112+
// fall here if item is expired or doesn't exist
113+
return somePromiseFunction().then(result => {
114+
return this.cache.saveItem(key, result);
115+
});
116+
}).then((data) => {
117+
console.log("Saved data: ", data);
118+
});
73119
...
74120
```
75121
76122
#### Cache with custom Observable operators
77123
78-
*LoadItem* method using Observable and return Observable, so you can use lot of Observable operators.
79-
For example error handling (on error, retry request every 6 seconds):
124+
*loadFromObservable* method using Observable and return Observable, so you are free to use all Observable operators.
125+
For example error handling (on error, retry request every 6 seconds if fails):
80126
81127
```js
82128
...
83129
let request = this.http.get(url)
84130
.retryWhen((error) => {
85131
return error.timer(6000);
86132
}).map(res => res.json());
87-
return this.cache.loadItem(cacheKey, request);
133+
return this.cache.loadFromObservable(cacheKey, request);
88134
...
89135
```
90136
91137
#### Cache entries grouping
92138
93-
This is really nice feature. Sometimes you need to invalidate only some group of cache entries.
139+
Sometimes you need to invalidate only some group of cache entries.
94140
For example if you have have long infinite scroll with lots of pages, and user trigger pull to request you want to delete
95-
all cache entries for all pages. So this is time for third parameter groupKey.
141+
all cache entries for all pages. So this is time for third parameter.
96142
97143
```js
98144
...
99145
loadList(pageNumber) {
100146
let url = "http://google.com/?page=" + pageNumber;
101147
let cacheKey = url;
102-
let groupKey = "googleListPages"
148+
let groupKey = "googleSearchPages"
103149

104150
let request = this.http.get(url).map(res => res.json());
105-
return this.cache.loadItem(cacheKey, request, groupKey);
151+
return this.cache.loadFromObservable(cacheKey, request, groupKey);
106152
}
107153
...
108154
```
109155
110-
And on pull to refresh delete all cache entries in group *googleListPages*:
156+
And when pull to refresh is fired, delete all cache entries in group *googleListPages*:
111157
112158
```js
113159
...
114160
pullToRefresh() {
115-
this.cache.removeByGroup("googleListPages");
161+
this.cache.clearGroup("googleSearchPages");
116162
}
117163
...
118164
```
119165
120-
#### Set custom TTL for single request
166+
#### Delayed observable caching
121167
122-
If you want custom TTL for single request, it can by easily done by third parameter.
168+
Features that using full power of observables. When you call this method and it will return data from cache (even if they are expired)
169+
and immediately send request to server and return new data after request successfuly finish. See example for more details:
123170
124171
```js
125172
...
126-
loadList(pageNumber) {
127-
...
128-
let ttl = 60 * 60 * 24 * 7; // TTL in seconds for one week
129-
130173
let request = this.http.get(url).map(res => res.json());
131-
return this.cache.loadItem(cacheKey, request, groupKey, ttl);
132-
}
174+
let delayType = 'all'; // send new request to server everytime, if it's set to none it will send new request only when entry is expired
175+
let response = this.cache.loadFromDelayedObservable(cacheKey, request, groupKey, ttl, delayType);
176+
177+
response.subscribe(data => {
178+
console.log("Data:" data);
179+
});
180+
181+
//result will look like this:
182+
// Data: "Hello world from cache"
183+
// Data: "Hello world from server"
133184
...
134185
```
135186
136-
#### Cache non-observables (arrays, strings etc.)
187+
#### Set custom TTL for single request
137188
138-
You can cache numbers, strings, arrays, objects etc.
189+
If you want custom TTL for single request, it can by easily done by third parameter.
139190
140191
```js
141-
...
142-
let arrayToCache = ["Hello", "World"];
143-
let key = 'test-array';
192+
let ttl = 60 * 60 * 24 * 7; // TTL in seconds for one week
193+
let request = this.http.get(url).map(res => res.json());
144194

145-
this.cache.saveItem(key, arrayToCache, null, 60).then((data) => {
146-
console.log("Saved data: ", data);
147-
});
195+
return this.cache.loadFromObservable(cacheKey, request, groupKey, ttl);
196+
```
148197
149-
this.cache.getItem(key).then((data) => {
150-
console.log('Test of load saved data: ', data);
151-
})
152-
...
198+
#### Set default TTL
199+
200+
```js
201+
this.cache.setDefaultTTL(60 * 60); //set default cache TTL for 1 hour
153202
```
154203
155204
#### Delete expired entries
156205
157206
It's automatically done on every startup, but you can do it manually.
158207
159208
```js
160-
this.cache.removeExpired();
209+
this.cache.clearExpired();
161210
```
162211
163212
#### Delete all entries
164213
165214
```js
166-
this.cache.removeAll();
167-
```
168-
169-
#### Set default TTL
170-
171-
```js
172-
this.cache.setDefaultTTL(60 * 60); //set default cache TTL for 1 hour
215+
this.cache.clearAll();
173216
```
174217
175218
#### Disable cache
176219
177-
If you are using *loadItem* method you can disable cache without any worrying, it will pass origin Observable through.
178-
Other method will return Promise reject.
220+
You can disable cache without any worrying, it will pass origin Observable through and all Promises will be rejected.
221+
Without any errors.
179222
180223
```js
181-
this.cache.enableCache = false; //Disable cache
224+
this.cache.disableCache(true);
182225
```
183226
227+
#### Disable offline invalidate
184228
229+
If you want disable "don't invalidate" when device is offline, you can do it simply.
185230
186-
For more inspiration look into code :)
231+
```js
232+
this.cache.setOfflineInvalidate(true);
233+
```

package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ionic-cache",
3-
"version": "1.0.4",
3+
"version": "1.0.5",
44
"description": "Ionic cache service - cache request, data, promises etc.",
55
"main": "ionic-cache.js",
66
"scripts": {

src/cache.service.ts

+7
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,13 @@ export class CacheService {
3434
}
3535
}
3636

37+
/**
38+
* @description Disable or enable cache
39+
*/
40+
public disableCache(status: boolean = true) {
41+
this.enableCache = !status;
42+
}
43+
3744
/**
3845
* @description Create DB table for cache, if not exists
3946
* @return {Promise<any>}

0 commit comments

Comments
 (0)