Pendekatan dari Caching dynamic content adalah, untuk halaman statis yang pernah dibuka oleh user. Jika berdasarkan file project, maka help.html akan di cache setelah user membuka halaman tersebut.
Pada lecture ini juga kita akan bahas sedikit mengenai management caching, seperti bagaimana mengupdate versi cache dan dan menghapus cache lama.
Untuk dynamic caching dilakukan pada saat fetch event di trigger. Buka file service worker (sw.js)
var APPSHELL_CACHE = 'appshell';
var DYNAMIC_CACHE = 'dynamic';
//service worker life cycle event related
self.addEventListener('install', function(event){
console.log('[SW] Installing service worker...', event);
event.waitUntil(
caches.open(APPSHELL_CACHE)
.then(function(cache){
console.log('[SW] Pre-caching app shell..');
//cache.add('/');
//cache.add('/index.html');
//cache.add('/src/js/app.js');
cache.addAll([
'/',
'/index.html',
'/src/js/app.js',
'/src/js/feed.js',
'/src/js/material.min.js',
'/src/css/app.css',
'/src/css/feed.css',
'/src/images/main-image.jpg',
'https://fonts.googleapis.com/css?family=Roboto:400,700',
'https://fonts.googleapis.com/icon?family=Material+Icons',
'https://code.getmdl.io/1.3.0/material.indigo-red.min.css'
]);
})
);
});
self.addEventListener('activate', function(event){
console.log('[SW] activating service worker...', event);
return self.clients.claim();
});
self.addEventListener('fetch', function(event){
//console.log('[SW] fetching...', event);
event.respondWith(
caches.match(event.request)
.then(function(response){
if(response){
return response;
}else{
return fetch(event.request)
.then(function(res){
return caches.open(DYNAMIC_CACHE)
.then(function(cache){
cache.put(event.request.url, res.clone());
return res;
})
})
.catch(function(err){
});
}
})
);
});
Buka web app dan pastikan service worker sudah terinstall, lalu simulasikan offline. Kemudian refresh web app. Masalah button add (+) dan menu hamburger button (pojok kiri atas) sudah tampil.
Hal ini terjadi karena kita sudah menambah dynamic caching. Lihat gambar diatas pada tab cache. Cache dynamic sudah berhasil ditambahkan.
Masih dalam keadaan offline, jika halaman help diakses akan menampilkan error. Karena belum ditambahkan kedalam cache.
Coba matikan simulasi offline, lalu browse halaman help. Kemudian simulasikan lagi offline. Halaman help sudah bisa diakses, karena sudah ditambahkan kedalam cache.
NOTE Sampai disini, caching web app bekerja dengan baik. Namun yang perlu menjadi perhatian adalah, dynamic caching akan selalu ditambahkan, perlu strategi untuk melakukan filtering. SIlakan bereksperimen.
Cache Versioning
Versioning cache bertujuan untuk mengupdate cache dengan content terbaru dari server. Contoh sederhana kita akan merubah tulisan “Share your moment” pada index.html menjadi warna merah.
.... .... <h5 class="text-center mdl-color-text--red">Share your Moments</h5> .... ....
Setelah diganti, kita refresh browser, apa yang terjadi? Ya, warnanya tetap biru. Ini terjadi karena browser membaca dari cache, bukan dari server.
Karena kita membuat cache pada service worker, maka agar cache diupdate kita harus mengubah isi service worker. Setelah service wroker berubah, maka browse akan berusaha melakukan proses instalasi ulang, hingga kode membuat cache akan dijalankan.
Cara termudah namun tidak dianjurkan adalah dengan menambahkan comment pada service worker. Silakan Anda coba, hanya dengan menambahkan comment, service worker sudah berubah, browser akan melakukan instalasi ulang service worker.
Pendekatan lain yang lebih tepat adalah dengan versioning, dengan memberi code version pada nama cache. (file yang digunakan adalah file sw.js)
//versi awal var APPSHELL_CACHE = 'appshell'; var DYNAMIC_CACHE = 'dynamic'; //setelah melakukan perubahan, tambahkan version control var APPSHELL_CACHE = 'appshell-v1'; var DYNAMIC_CACHE = 'dynamic';
Dengan cara ini, selain mengubah isi service worker hingga proses instalasi akan dilakukan oleh browser, dan kita juga melakukan caching versioning. Lihat gambar dibawah, cache appshel-v1 sudah dibuat.
Jika kita coba refresh browser, dan force install service worker melalui devTools. Warna tulisan “share your moment” tetap biru. Kenapa ini terjadi? Karena browser masih membaca dari cache lama, dan tidak membaca ke cache terbaru.
Delete Cache
Setelah cache versi terbaru ditambahkan, kita perlu menghapus cache lama agar browser mengambil dari cache terbaru. Selain itu kita juga menjaga agar ukuran cache tidak membengkak.
Untuk menghapus cache lama, akan dilakukan pada event service worker activate (file yang digunakan adalah sw.js). Karena event ini terjadi setelah user menutup dan membuka kembali tab web app. Jadi aman untuk menghapus cache yang sudah tidak diperlukan.
//ubah code pada file sw.js
self.addEventListener('activate', function(event){
console.log('[SW] activating service worker...', event);
event.waitUntil(
caches.keys()
.then(function(keyList){
return Promise.all(keyList.map(function(key){
if (key !== APPSHELL_CACHE && key !== DYNAMIC_CACHE){
return caches.delete(key);
}
}));
})
)
return self.clients.claim();
});
Setelah service worker di install ulang, cache lama akan dibuang. Browser akan membaca ke cache baru. Dapat dilihat pada gambar diatas, cache appshell sudah dihapus. Dan tulisan “share your moments” sudah berubah menjadi merah.