Image caching for Ionic 1.x applications.
Ionic directive to cache images or element background images on first load. Working on top of imgcache.js library.
This library works with Ionic Framework (v >= 1.0), the supported platforms being:
Install
npm
npm install --save ionic-img-cache
yarn
yarn add ionic-img-cache
Bower
bower install --save ionic-img-cache
Add imgcache.js and ionic-img-cache.min.js files to your app index.html file.
Install required cordova plugins:
cordova plugin add cordova-plugin-device
cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-file-transfer
Inject as dependency into your app, example:
angular.module('app', [
'ionic',
'ionicImgCache'
])
<access origin="*"/>
<access origin="cdvfile://*"/>
<allow-intent href="cdvfile://*"/>
<preference name="AndroidPersistentFileLocation" value="Compatibility" />
<preference name="iosPersistentFileLocation" value="Library"/>
Just add ion-img-cache
attribute to img
tag you want to cache.
Example:
Image:
<img ion-img-cache ng-src="{{ imagePath }}"/>
Background image:
<div ion-img-cache-bg>Element with background image set with css or ng-style</div>
Component:
Note: Components are supported with angular >=1.5.0, if older version used without component
polyfill, component can't be used.
<ion-img-cache-component img-src="{{ imagePath }}" alt="my fancy picture"></<on-img-cache-component>
All methods are async, wrapped into angular $q
service.
Adds file to local cache.
Example:
angular.module('app')
.controller('Ctrl', function(ionImgCacheSrv) {
ionImgCacheSrv.add('path/to/my/asset.jpg')
.then(function(path) {
console.log('File cached in ' + path);
})
.catch(function(err) {
console.error(err);
})
});
Gets file local url if it present in cache.
Example:
angular.module('app')
.controller('Ctrl', function(ionImgCacheSrv) {
ionImgCacheSrv.get('path/to/my/asset.jpg')
.then(function(path) {
console.log('File found in cache ' + path);
})
.catch(function(err) {
console.error(err);
})
});
Removes file from local cache if it present.
Example:
angular.module('app')
.controller('Ctrl', function(ionImgCacheSrv) {
ionImgCacheSrv.remove('path/to/my/asset.jpg')
.then(function() {
console.log('File removed from cache');
})
.catch(function(err) {
console.error(err);
})
});
Checks file cache status by url.
Example:
angular.module('app')
.controller('Ctrl', function(ionImgCacheSrv) {
ionImgCacheSrv.checkCacheStatus('path/to/my/asset.jpg')
.then(function(path) {
console.log('File added/found in/to cache' + path);
})
.catch(function(err) {
console.error(err);
})
});
Checks elements background file cache status by element.
Example:
angular.module('app')
.controller('Ctrl', function(ionImgCacheSrv) {
ionImgCacheSrv.checkBgCacheStatus(angular.element('#my-element'))
.then(function(path) {
console.log('File added/found in/to cache' + path);
})
.catch(function(err) {
console.error(err);
})
});
Clears all cahced files.
Example:
angular.module('app')
.controller('Ctrl', function(ionImgCacheSrv) {
ionImgCacheSrv.clearCache()
.then(function(path) {
console.log('Cache successuly cleared');
})
.catch(function(err) {
console.error(err);
})
});
Gets local cache size in bytes.
Example:
angular.module('app')
.controller('Ctrl', function(ionImgCacheSrv) {
ionImgCacheSrv.getCacheSize()
.then(function(result) {
console.log('Cache size is ' + result + ' bytes');
})
.catch(function(err) {
console.error(err);
})
});
Caching can be configured via ionicImgCacheProvider
, there are available parameters in this provider:
Type: Boolean
Default value: false
Enables ImgCache debug mode.
Type: Number
Default value: 50
Quota for storage size available for cached images in MB.
Type: Object
Default value: {}
Adds custom request headers.
Type: String
Default value: ion-img-cache
Set name of cached files directory.
Type: Number
Default value: 0
Set quota after which cache folder will be cleared.
Example:
angular.module('app')
.config(function(ionicImgCacheProvider) {
// Enable imgCache debugging.
ionicImgCacheProvider.debug(true);
// Set storage size quota to 100 MB.
ionicImgCacheProvider.quota(100);
// Set folder for cached files.
ionicImgCacheProvider.folder('my-cache');
// Set cache clear limit.
ionicImgCacheProvider.cacheClearSize(100);
});