Muhammad K Huda in HTML5Phonegap

Menyimpan Gambar Offline Ke Browser Menggunakan imgcache.js

Untuk sebuah aplikasi mobile berbasis Phonegap yang membutuhkan dan menampilkan suatu data gambar, terkadang developer perlu merlakukan optimasi performa konektivitas data dengan menyimpan gambar atau men-cache-nya ke dalam aplikasi. Salah satu cara yang cukup efektif agar gambar dapat tersimpan secara offline ke dalam aplikasi adalah menggunakan library imgcache.js. Library yang dibuat oleh Chrisben dari Prancis ini juga memanfaatkan API HTML5.

Download Source

Dengan mengaplikasikan imgcache.js ke dalam sebuah aplikasi mobile phonegap, maka konektivitas dan efektivitas untuk menampilkan data secara offline diharapkan akan lebih baik. Berikut adalah mekanisme imgcache.js saat menampilkan gambar secara offline :

Secara online, gambar akan terloading dari website dan tersimpan otomatis ke dalam browser atau aplikasi Phonegap
Kemudian jika user membuka browser atau aplikasi dalam kondisi offline, maka secara otomatis gambar yang telah tersimpan di browser akan terload.

Sederhana bukan? Baik, mari kita coba dengan membuat tutorial sederhana menggunakan library imgcache.js ini. Javascript yang diperlukan penulis dalam membuat tutorial ini adalah sebagai berikut :

JQuery 2.0 (mencoba Jquery versi terbaru)
library imgcache.js (https://github.com/chrisben/imgcache.js)
library imgloaded sebagai pendukung loading gambar.

Setelah meletakkan file-file library di atas pada folder localhost. Mari kita buat file index.html yang berisi source code utama imgcache.js. Pada praktik kali ini saya memanfaatkan browser Google Chrome. Atau anda bisa mendownload source yang telah saya buat sebelumnya melalui link sources di atas. Berikut adalah source code index.html :

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>HTML5 Image Cache Menggunakan imgcache.js</title>
<script type="text/javascript" src="jquery-2.0.0.js"></script>
<script type="text/javascript" src="jquery.imagesloaded.min.js"></script>
<script type="text/javascript" src="imgcache.js"></script>
<script>
 var startTest = function() {
  $('#gambar').imagesLoaded(function($images, $proper, $broken ) {
   // informasi debug
   ImgCache.options.debug = true;
   ImgCache.options.usePersistentCache = true;
   ImgCache.init(function() {
   // melakukan cache gambar dari kondisi online
   for (var i = 0; i < $proper.length; i++) {
   ImgCache.cacheFile($($proper[i]).attr('src'));
 }
 // melakukan replace gambar secara offline
 for (var i = 0; i < $broken.length; i++) {
 ImgCache.useCachedFile($($broken[i]));
 }
 });
});
};
 if (typeof(cordova) !== 'undefined') {
 // imgcache.js jika menggunakan phonegap
  document.addEventListener('deviceready', startTest, false);
 } else {
 // imgcache.js jika menggunakan browser
  $(document).ready(startTest);
 }
</script>
<body>
 <section>
  <hp>Buka file index.html menggunakan alamat url file:// jangan menggunakan http://</h3>
  <p>Secara otomatis gambar akan tersimpan di cache browser. Kemudian matikan internet</p>
  <p>Load kembali halaman ini.</p>
</section>
<section>
<div id="gambar">
  <img src="http://pic.mkhuda.com/gambar-cache.png">
</div>
</section>
</body>
</html>

Dari source code di atas, saya melakukan pemanggilan file gambar secara online dengan menggunakan tag <img src=””>. Dimana gambar tersebut sudah saya taruh di server hosting (http://pic.mkhuda.com/gambar-cache.png). Untuk memastikan gambar dapat tercache secara otomatis, kita harus mengetikkan alamat url dengan menggunakan penunjuk file:// karena pada praktik yang sebenarnya ini merupakan sebuah aplikasi phonegap.

Pemanggilan file index

Di sini misalnya alamat localhost index.html terletak di file:///C:/xampp/htdocs/html5imgcache/index.html,. kemudian saya panggil melalui Chrome, maka notifikasi untuk melakukan storing data ke cache browser akan tampil. Klik Ok.

store data gambar ke browser ok

Setelah itu coba cek terlebih dahulu melalui tools Inspect Element di Google Chrome, bahwa gambar tersebut benar-benar terloading dari server online. Seperti gambar berikut :

Inspect Element

Kemudian matikan koneksi internet Anda. Dan buka kembali file file:///C:/xampp/htdocs/html5imgcache/index.html secara offline. Maka gambar secara otomatis akan tampil melalui cache yang telah tersimpan di browser Google Chrome.

Mekanisme kerjanya cukup sederhana, jadi url gambar yang kita panggil tersebut akan diolah melalui imgcache.js dan imageloaded.min.js, kemudian setelah benar-benar tersimpan di cache browser, maka gambar akan secara otomatis tampil bilamana user dalam kondisi offline.

Download Source

Baca juga: