Latihan: Cache API
Setelah mengenal Cache API beserta cara penggunaan dan strategi caching yang ada,
saatnya sekarang kita terapkan pada proyek Movie Catalogue agar aplikasi tersebut dapat
pengguna akses walau dalam keadaan offline sekalipun.
Untuk strategi caching yang akan kita terapkan pada proyek ini adalah strategi Stale While
Revalidate. Mengapa? Karena strategi unggul dalam hal kecepatan dan juga kontennya
diperbaharui di belakang layar.
Menyiapkan Fungsi Cache
Untuk menjaga kode service worker tetap bersih, kita tidak akan menuliskan logika caching
pada berkas [Link] secara langsung. Kita pisahkan penulisan logika caching dengan membuat
berkas baru bernama [Link] dan letakan pada folder src -> scripts -> utils.
Buka berkas tersebut dan buatlah objek dengan nama CacheHelper lalu ekspor
menggunakan default export.
src -> scripts -> utils -> [Link]
1. const CacheHelper = {
2.
3. };
4.
5. export default CacheHelper;
Dalam melakukan caching di service worker, kita membutuhkan tiga kasus sesuai TODO
yang sudah kita tandai pada tiap event-nya. Yang pertama adalah caching app shell, yang
kedua menghapus cache lama, dan yang ketiga memasukkan atau menambahkan fetch
request ke caches menggunakan teknik stale while revalidate. Untuk itu mari kita buat
ketiga fungsi tersebut di dalam CacheHelper. Buat seluruhnya berjalan secara asynchronous.
src -> scripts -> utils -> [Link]
1. const CacheHelper = {
2. async cachingAppShell(requests) {
3.
4. },
5.
6. async deleteOldCache() {
7.
8. },
9.
10. async revalidateCache(request) {
11.
12. },
13. };
14.
15. export default CacheHelper;
Kita mulai dari fungsi [Link] terlebih dahulu. Fungsi tersebut
membutuhkan satu parameter yakni kumpulan url dari berkas pembentuk app shell. Bisa
itu favicon, icons, [Link], [Link], dan lain-lain.
Untuk memasukkan banyak url sekaligus pada cache kita bisa manfaatkan [Link](),
namun sebelum itu kita perlu membuka/membuat caches yang dituju. Buatlah fungsi baru
dengan nama _openCache() yang berfungsi untuk membuka cache yang diinginkan.
src -> scripts -> utils -> [Link]
1. const CacheHelper = {
2. async cachingAppShell(requests) {
3.
4. },
5.
6. async deleteOldCache() {
7.
8. },
9.
10. async revalidateCache(request) {
11.
12. },
13.
14. async _openCache() {
15. return [Link]('MovieCatalogue-V1');
16. },
17. };
18.
19. export default CacheHelper;
Setelah itu, di dalam fungsi [Link]() kita tuliskan kode berikut.
1. async cachingAppShell(requests) {
2. const cache = await this._openCache();
3. [Link](requests);
4. },
Lanjut untuk fungsi [Link], fungsi ini bertujuan untuk menghapus
cache lama yang sudah tidak diperlukan. Tuliskan kode berikut:
1. async deleteOldCache() {
2. const cacheNames = await [Link]();
3. cacheNames
4. .filter((name) => name !== 'MovieCatalogue-V1')
5. .map((filteredName) => [Link](filteredName));
6. },
Kita lanjut lengkapi fungsi revalidateCache(). Fungsi ini membutuhkan fungsi kecil lain
yakni melakukan fetch request dan memasukkan request ke dalam cache. Sehingga buat dulu
dua fungsi _fetchRequest() dan _addCache() seperti ini:
src -> scripts -> utils -> [Link]
1. const CacheHelper = {
2. async cachingAppShell(requests) {
3. const cache = await this._openCache();
4. [Link](requests);
5. },
6.
7. async deleteOldCache() {
8. const cacheNames = await [Link]();
9. cacheNames
10. .filter((name) => name !== 'MovieCatalogue-V1')
11. .map((filteredName) => [Link](filteredName));
12. },
13.
14. async revalidateCache(request) {},
15.
16. async _openCache() {
17. return [Link]('MovieCatalogue-V1');
18. },
19.
20. async _fetchRequest(request) {
21. const response = await fetch(request);
22.
23. if (!response || [Link] !== 200) {
24. return response;
25. }
26.
27. await this._addCache(request);
28. return response;
29. },
30.
31. async _addCache(request) {
32. const cache = await this._openCache();
33. [Link](request);
34. },
35. };
36.
37. export default CacheHelper;
Kemudian kita lengkapi fungsi [Link] dengan kode berikut:
1. async revalidateCache(request) {
2. const response = await [Link](request);
3.
4. if (response) {
5. this._fetchRequest(request);
6. return response;
7. }
8. return this._fetchRequest(request);
9. },
Agar kode yang dituliskan lebih bersih lagi, hindari memberi nilai secara hardcoded seperti
‘MovieCatalogue-V1’. Kita pindahkan nilai tersebut ke src -> scripts -> globals ->
[Link].
src -> scripts -> globals -> [Link]
1. const CONFIG = {
2. KEY: 'YOUR_API_KEY',
3. BASE_URL: '[Link]
4. BASE_IMAGE_URL: '[Link]
5. DEFAULT_LANGUAGE: 'en-us',
6. CACHE_NAME: 'MovieCatalogue-V1',
7. };
8.
9. export default CONFIG;
Kemudian penggunaan pada [Link] kita lakukan import. Dengan demikian,
keseluruhan kode pada [Link] akan tampak seperti ini.
src -> scripts -> utils -> [Link]
1. import CONFIG from '../globals/config';
2.
3. const CacheHelper = {
4. async cachingAppShell(requests) {
5. const cache = await this._openCache();
6. [Link](requests);
7. },
8.
9. async deleteOldCache() {
10. const cacheNames = await [Link]();
11. cacheNames
12. .filter((name) => name !== CONFIG.CACHE_NAME)
13. .map((filteredName) => [Link](filteredName));
14. },
15.