Caching App Shell

Caching app shell atau aset dasar dari web app dapat dilakukan pada proses instalasi service worker. Pada lecture ini kita akan membuat cache dan membaca cache.

Pada contoh project, maka file yang akan di cache pada proses instalasi service worker adalah

• index.html
• app.js
• app.css
• feed.js
• feed.css
• material.min.js
• main-image.jpg
• google font
• library css dari material design lite

Perlu diperhatikan saat memilih file yang akan di cache adalah pastikan, hanya aset dasar agar web app dapat dijalankan walaupun tidak ada internet connection. Bukan seluruh isi server kita pindahkan ke cache.

Karena, bila sudah over size, ada kemungkinan browser menghapus isi cache. Selain itu, jika semua di cache, ada kemungkinan versi terbaru yang lebih relevan dari web app tidak diambil dari server, namun dari cache.

Add Cache

//tambahkah variable untuk nama cache
var APPSHELL_CACHE = 'appshell'
var DYNAMIC_CACHE = 'dynamic'

//menggunakan add method
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('/src/js/app.js');
            cache.add('/src/js/feed.js');
            // add satu-persatu atau lihat code dibawah untuk lebih sederhana
        })
    )
});

//menggunakan addAll method
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'
            ]);
        })
    )
});

Read Cache

Untuk membaca cache, akan kita lakukan pada event fetch. Prosesnya adalah kita akan membaca cache dengan metoda match. Jika ada match, maka kita baca dari cache, jika tidak ada maka request akan kita teruskan ke server.

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);
            }
        })
    );
});

Tips

Setelah merubah service worker, jangan lupa untuk menutup dan membuka tab yang bersangkutan, agar service worker diinstal kembali. Atau pada devTools tab Application – service workers, click link Skip Waiting untuk menginstall kembali service worker terbaru.

Untuk me-simulasi-kan tidak ada internet connection, nyalakan checkbox offline. Dapat anda lakukan di devTools pada tab network atau application.

Hal Lain Yang Menjadi Perhatian

Walaupun kita sudah melakukan caching, icon pada web app tidak berhasil ditampilkan. Lihat gambar dibawah. Hal ini terjadi karena real font yang akan didownload adalah link yang ditunjukan pada gambar disebelah kanan.

Hal ini akan kita coba selesaikan pada lecture berikutnya, dengan menggunakan dynamic caching.