Mengapa kita perlu melakukan caching dengan service worker? Karena web app akan tetap berjalan walaupun tanpa internet connection.
Saat offline, fitur-fitur tertentu saja yang dapat diakses. Setelah koneksi kembali tersambung, web app dapat melakukan request untuk mengambil data terbaru. Ini dapat dicapai dengan fitur caching.
Cache API
Cache API adalah cache yang terpisah dari cache browser. Cache ini memiliki storage terpisah dan developer web app memiliki akses untuk mengolah cache tersebut.
Cache API memiliki dua property, yaitu
- key, adalah http request, yaitu url yang akan di request.
- value, adalah response, yaitu content yang akan ditampilkan.
Cache API ini dapat diakses baik melalui service worker atau melalui javascript pada file html. Jika tujuan cache ini digunakan saat tidak ada koneksi internet, maka cache hanya dapat diakses melalui service worker.
Service worker bekerja di background, sementara file javascript pada html perlu didownload dulu dari server. Bila tidak ada internet connection, tentu file javascript tersebut tidak bisa didownload. Jadi untuk mengakses cache saat tidak ada internet connection hanya dilakukan melalui service worker.
Cache API Method
- Cache.match(request, options), mengembalikan Promise yang berisi response pada cache object yang sesuai dengan request.
- Cache.matchAll(request, option), sama dengan method match, namun dalam bentuk array.
- Cache.add(request), request adalah URL, digunakan untuk retrieve respons yang kemudian disimpan dalam cache.
- Cache.addAll(requests), sama dengan method add, namun input berupa array.
- Cache.delete(request, options), menghapus cache berdasarkan key (request), mengembalikan Promise resolve True jika cache ditemukan dan telah dihapus. Jika tidak ditemukan, promise akan resolve false.
- Cache.keys(request, options), mengembalikan Promise resolves dengan isi array dari cache key.
Penggunaan method ini akan dibahas lebih jelas pada lecture selanjutnya.
Browser Support
Saat course ini dibuat, support browser sudah cukup luas. Untuk desktop, hanya internet explorer yang tidak support. Sementara untuk versi mobile, hanya safari yang belum support.
Memilih Content Untuk Cache
Karena kita tidak bisa membuat cache untuk semua content, pertanyaan adalah, apa yang akan kita cache agar web app tetap berfungsi walaupun tidak internet connection.
Umumnya sebuah web app memiliki asset dasar (sering disebut app shell) yang akan digunakan disemua halaman, seperti toolbar, footer atau sidebar. Dimana komponen-komponen tersebut dari sudut pandang developer hampir jarang berubah.
Nah, komponen-komponen tersebut dapat disimpan dalam cache saat instalasi service worker. Setelah cache minimum sudah kita lakukan, berikutnya kita bisa menambah fitur caching untuk dynamic content.
Contoh dynamic content caching, suatu page akan di cache setelah dikunjungi oleh user. Atau pada contoh project, bila tidak ada internet connection, feed image akan disimpan dicache dahulu, setelah ada koneksi baru diupload.