Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mlzxy/ionic-cache-src

A Ionic Plugin for caching, works for any tags, and will show a progress circle when the download is not done
https://github.com/mlzxy/ionic-cache-src

Last synced: 4 months ago
JSON representation

A Ionic Plugin for caching, works for any tags, and will show a progress circle when the download is not done

Host: GitHub
URL: https://github.com/mlzxy/ionic-cache-src
Owner: mlzxy
License: mit
Created: 2015-07-16T12:10:34.000Z (over 9 years ago)
Default Branch: master
Last Pushed: 2020-10-16T18:54:31.000Z (about 4 years ago)
Last Synced: 2024-08-10T20:47:13.268Z (4 months ago)
Language: JavaScript
Homepage: http://market.ionic.io/plugins/ionic-cache-src
Size: 9.77 MB
Stars: 138
Watchers: 11
Forks: 55
Open Issues: 29
Metadata Files:
- Readme: README.md
- License: LICENSE.txt

Awesome Lists containing this project

README

        # NOTICE

I will try to spare my time to work on a ionic2 version in typescript. 

in the 0.7.2

- Add encode option for URI

- Roll back `watch` to `observe`

- Find `java.io.EOFException` issue for old android causing the fileTransfer failed, if so don't cache.

in the 0.7.0

- Now support Video and Audio Tag

- Fix Bugs from several issues

- Add more examples

- Demo and Example: https://github.com/BenBBear/ionic-cache-src-demo

  - Ng-repeat

  - Collection Repeat 

  - Video

# ionic-cache-src

Just change `src` to `cache-src`

```html

    

```

and it will take the rest work for you.

## Demo

### simple

![](./img/cache.gif)

### complex

![](./img/ionic-cache-src.gif)

![](./img/demo.gif)

## Install

- bower 

```shell

bower install ionic-cache-src

```

- it depends on [ngStorage](https://github.com/gsklee/ngStorage), [ngCordova](http://ngcordova.com/), [angular-svg-round-progress](https://github.com/crisbeto/angular-svg-round-progressbar) so you have to load them both in you `index.html`

```html

 

```

- and it use [cordova-plugin-file-transfer](https://github.com/apache/cordova-plugin-file-transfer) and [cordova-plugin-file](https://github.com/apache/cordova-plugin-file), so

```shell

cordova plugin add cordova-plugin-file cordova-plugin-file-transfer

```

- add `ionic-cache-src` to your angular module declaration dependencies

```js

angular.module('myApp', ['ionic','ionic-cache-src'])

```

- Done

## How it Work

very simple strategy

![](./img/how-it-work.jpg)







## Usage

### Custom the progress circle

it accepts all options for [angular-svg-round-progressbar](https://github.com/crisbeto/angular-svg-round-progressbar) , except for `current`

### Change src

```html



```

will be rendered to

```html



```

not so useful though.

### Background image

```html





```

### Video

```html

    

        Your browser does not support HTML5 video.

```

### Expire

```html



```

Set expiration time to 60 seconds. At the next page load and directive linking, this cache will be renewed if 60s passed. But there wouldn't be progress circle, the image will be replaced after the newly downloaded file is ready.

The expiration time is `Infinity` by default.

### EncodeURI

```html

    

```

CordovaFileTransfer encodes URL by default, but some urls don't need. See this issue [#17](https://github.com/BenBBear/ionic-cache-src/issues/17)

#### Custom background style

```html





```

- `background-style` will be used as

```html





```

- Default `background-loading-style` is `url('lib/ionic-cache-src/img/loader.gif') no-repeat center`

### Inline progress circle

By default the progress circle is a block div, here is source code.

```js

function makeProgressCircle($scope, $compile) {

    return angular.element($compile('
')($scope));

};

```

So you could change its style using `circleContainerStyle`

```html



    

        

        inline progress circle

        Test Progress Circle as inline block

    



```

### Callback

```html



```

```js

function onError(err){}

function onStart(originUrl){}

function onFinish(naiveUrl){}

function onProgress(number){}

```

Note that the `OnProgress` and `OnStart` will only be called if a download is needed.

### Work in broswer

It will works in browser with a mock download process.

### For local file path

> The plugin will download and cache the file if the url is `http`, `https` or `ftp`, otherwise it won't.

So it works for local file path, or base64 etc...

### Service

This plugin store cache info as  `$localstorage.cache_src = {RemoteUrl:LocalUrl}`, and there is a factory you could used to access the cache:

```js

module.controller('Ctrl', function(cacheSrcStorage) {

    cacheSrcStorage.get('url') // === the local cache path for 'url'

});

```

which you can use to access the cached file

### Config

```js

module.config(function($cacheSrcProvider){

    $cacheSrcProvider

              .set('key',value)

              .set({key:value}); // set option

})

```

Key, Value for options like

- `srcIs` 

- `onError` for global use etc...

- `showProgressCircleInBrowser` whether show progress circle in browser

- `showProgressCircleInDevice` whether show progress circle in device

- `interval` browser mock progress circle period, by default 200.

-  options for progress circle  [angular-svg-round-progressbar](https://github.com/crisbeto/angular-svg-round-progressbar)

- `backgroundStyle` and `backgroundLoadingStyle`

- `circleContainerStyle`

- `expire`

- Anything you like, if you use custom progress indicator.

Note that the in-tag config has the higher priority than  `$cacheSrcProvider`

### Use custom progress indicator instead of built-in progress circle

Use callback

```

uiOnStart, uiOnProgress, uiOnFinish

```

You could take reference of the default source of this three functions, which implements the progress circle, and write your custom progress indicator.

To use your own uiOn* functions

```js

module.config(function($cacheSrcProvider){

    $cacheSrcProvider

              .set('uiOnStart', myUiOnStart)

              .set('uiOnProgress', myUiOnProgress)

              .set('uiOnFinish', myUiOnFinish);

}); 

```










## Attention

### cordova_plugins.js

Because of https://github.com/driftyco/ionic-plugin-keyboard/issues/82 , the `ionicPlatform.ready` may fail from exception. If you encounter this problem, Add 

```html

```

solve it.

#### android:cordova-plugin-file

For android, you may need to add this 

```xml

```

to your config.xml, as mentioned in [#10](https://github.com/BenBBear/ionic-cache-src/issues/10).  Otherwise the image won't be loaded, and no error `console.log`.

#### livereload

> When using live reload, you’re actually running the assets off the computer and not the device

You will get an error: `Not allowed to load local resource`, but it will only occur when livereloading.

#### iOS 9 NSAppTransportSecurity

Because iOS 9 forbids arbitrary http request, you may add

```xml

NSAppTransportSecurity

    NSAllowsArbitraryLoads

```

to you `.plist` file. Details in this gist: https://gist.github.com/mlynch/284699d676fe9ed0abfa