Ionicで画像をローカルファイルストレージにキャッシュする方法 #JavaScript

imgcache.jsを使用して画像をファイルストレージにキャッシュし、オフラインでも参照できるようにする。

ここではIonic上でimgcache.jsを使用するための設定方法を説明する。

Cordovaプラグインのインストール

ionic plugin add cordova-plugin-file --save
ionic plugin add cordova-plugin-file-transfer --save

JavaScriptライブラリのインストール

bower install imgcache.js --save
bower install angular-imgcache.js --save

JavaScriptライブラリを読み込み

<html>
  <head>
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- ここでライブラリを読み込む -->
    <script src="lib/imgcache.js/js/imgcache.js"></script>
    <script src="lib/angular-imgcache/angular-imgcache.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body ng-app="starter">
    <!-- 省略 -->
  </body>
</html>

app.jsでimgcacheを初期化

// 使用モジュールにImgCacheを追加
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ImgCache'])

// ImgCacheをDI
.run(function($ionicPlatform, ImgCache) {
  $ionicPlatform.ready(function($q) {

    /* 省略 */

    // ここで初期化
    ImgCache.$init();
  });
})

.config(function(ImgCacheProvider) {
    // ここでオプションを設定
    ImgCacheProvider.setOptions({
        debug: true,
        usePersistentCache: true
    });
    // 手動で初期化するオプションを設定
    ImgCacheProvider.manualInit = true;
})

    /* 省略 */

Controllerで画像のURLをセット

angular.module('starter.controllers', [])
.controller('MyCtrl', function($scope) {
  // テンプレートに渡す画像のURLをセット
  $scope.imgUrl = "http://xxx/xxx.jpg";
})

Templateで画像をキャッシュする

<!-- 省略 -->

<img img-cache ic-src="{{imgUrl}}" />

<!-- 省略 -->

参考

imgcache.jsをCordova/Phonegapで使用する場合