まだ実装途中ですが、備忘録としてまとめ。
「imgcache.js」を使って、Cordova アプリで表示している画像をキャッシュする方法についてです。
なお、使用したライブラリの GitHub はこちらから。
GitHub – chrisben/imgcache.js: JS library based on the File API to cache images for offline recovery (target: cordova/phonegap & chrome)
https://github.com/chrisben/imgcache.js
実装方法ですが、まず下記の npm コマンドでライブラリをインストールします。
npm install imgcache.js --save
また、File 関係の Cordova プラグインも必要なので、合わせてインストールします。
cordova plugin add cordova-plugin-file --save cordova plugin add cordova-plugin-file-transfer --save
なお、私の環境では既に cordova-plugin-file がインストールされていたのですが、他のプラグインの兼ね合いで、バージョンが低いものがインストールされていました。
で、そのままだと cordova-plugin-file-transfer がインストールできなかったので、オプションの --force を付けて強引にインストールしました。
インストールできたら、ライブラリをインポートします。
import ImgCache from 'imgcache.js';
node_modules > imgcache ディレクトリ内にある imgcache.js を任意の場所にコピーし、それをインポートします。
インポートまで完了したら、あとは ImgCache を初期化して実行するだけです！
初期化は下記のサンプルコードの通りです。
ImgCache.options.debug = true;
ImgCache.options.chromeQuota = 50*1024*1024;
ImgCache.options.usePersistentCache = true;
ImgCache.init(function() {
// 初期化成功
}, function() {
// 初期化失敗
});
で、初期化が完了したら、下記のコードで画像のキャッシュを行えます。
var target = $('img#cacheImg');
ImgCache.isCached([キャッシュしたい画像のパス], function(path, success) {
if (success) {
ImgCache.useCachedFile(target);
} else {
ImgCache.cacheFile(path, function() {
ImgCache.useCachedFile(target);
});
}
});
1行目でキャッシュしたい画像が格納される img 要素を指定しています。
なお、こちらは適宜変更してください。
で、2行目で画像がキャッシュ済みかを調べ、キャッシュ済みだったらキャッシュされた画像を表示し、まだキャッシュされていなかったら、画像をキャッシュしてそれを表示しています。
処理としてはこれだけなのですが、私の環境では下記のメッセージが表示されてしまい、画像のキャッシュに失敗しております！
WARN: No source given to getCachedFileName
INFO: File undefined not in cache
どうやら画像の保存場所が悪いらしい…？
ちなみに、実行環境は iOS です。
解決方法がわかったら、また改めてご紹介したいと思います。
以上、Cordova アプリで画像をキャッシュする方法でした。
なお、当然ですが、ImgCache の初期化が完了していない状態で、画像をキャッシュしようとしたり、保存している画像を取得しようとしたりすると警告が表示されますので、ご注意ください。
綺麗な方法かはわかりませんが、私は ImgCache.init() が成功したらフラグを立てて、フラグが立っていたら、画像キャッシュの処理などを行うようにしています。
ご参考になれば幸いです。
