Menyimpan ke cache

Penyimpanan cache adalah alat yang ampuh. Hal ini membuat aplikasi Anda tidak terlalu bergantung pada kondisi jaringan. Dengan penggunaan cache yang baik, Anda dapat membuat aplikasi web tersedia secara offline dan menayangkan aset secepat mungkin dalam kondisi jaringan apa pun. Seperti yang disebutkan dalam Aset dan Data, Anda dapat menentukan strategi terbaik untuk menyimpan aset yang diperlukan dalam cache. Untuk mengelola cache yang berinteraksi oleh pekerja layanan Anda dengan Cache Storage API.

Cache Storage API tersedia dari berbagai konteks:

• Konteks jendela (thread utama PWA Anda).
• Pekerja layanan.
• Pekerja lain yang Anda gunakan.

Salah satu keuntungan mengelola cache menggunakan pekerja layanan adalah siklus prosesnya tidak terikat ke jendela, yang berarti Anda tidak memblokir thread utama. Perhatikan bahwa untuk menggunakan Cache Storage API, sebagian besar konteks ini harus berada di bawah koneksi TLS.

Yang harus di-cache

Pertanyaan pertama yang mungkin Anda miliki tentang {i>caching<i} adalah apa yang harus di-cache. Meskipun tidak ada satu jawaban untuk pertanyaan itu, Anda bisa memulai dengan semua sumber daya minimum yang Anda perlukan untuk merender antarmuka pengguna.

Resource tersebut harus mencakup:

• HTML halaman utama (start_url aplikasi Anda).
• Stylesheet CSS yang diperlukan untuk antarmuka pengguna utama.
• Gambar yang digunakan di antarmuka pengguna.
• File JavaScript yang diperlukan untuk merender antarmuka pengguna.
• Data, seperti file JSON, diperlukan untuk merender pengalaman dasar.
• Font web.
• Pada aplikasi multi-halaman, dokumen HTML lain yang ingin Anda tayangkan dengan cepat atau saat offline.

Siap offline

Meskipun kemampuan offline adalah salah satu persyaratan Progressive Web App, penting untuk dipahami bahwa tidak semua PWA memerlukan pengalaman offline lengkap, misalnya solusi game cloud atau aplikasi aset kripto. Oleh karena itu, tidak masalah jika Anda menawarkan antarmuka pengguna dasar yang memandu pengguna Anda melalui situasi tersebut.

PWA Anda tidak boleh merender pesan error browser yang mengatakan bahwa mesin rendering web tidak dapat memuat halaman. Sebaiknya gunakan pekerja layanan untuk menampilkan pesan Anda sendiri, untuk menghindari error browser umum dan membingungkan.

Ada banyak strategi penyimpanan dalam cache yang dapat Anda gunakan, bergantung pada kebutuhan PWA Anda. Itulah alasan pentingnya merancang penggunaan cache untuk memberikan pengalaman yang cepat dan andal. Misalnya, jika semua aset aplikasi Anda akan didownload dengan cepat, tidak menghabiskan banyak ruang, dan tidak perlu diperbarui dalam setiap permintaan, menyimpan semua aset ke dalam cache akan menjadi strategi yang valid. Di sisi lain, jika Anda memiliki resource yang harus versi terbaru, sebaiknya pertimbangkan untuk tidak meng-cache aset tersebut sama sekali.

Menggunakan API

Gunakan Cache Storage API untuk mendefinisikan serangkaian cache dalam asal, yang masing-masing diidentifikasi dengan nama string yang dapat Anda tentukan. Akses API melalui objek caches, dan metode open memungkinkan pembuatan, atau pembukaan cache yang sudah dibuat. Metode buka akan menampilkan promise untuk objek cache.

caches.open("pwa-assets")
.then(cache => {
  // you can download and store, delete or update resources with cache arguments
});

Mendownload dan menyimpan aset

Untuk meminta browser mendownload dan menyimpan aset, gunakan metode add atau addAll. Metode add membuat permintaan dan menyimpan satu respons HTTP, dan addAll grup respons HTTP sebagai transaksi berdasarkan array permintaan atau URL.

caches.open("pwa-assets")
.then(cache => {
  cache.add("styles.css"); // it stores only one resource
  cache.addAll(["styles.css", "app.js"]); // it stores two resources
});

Antarmuka penyimpanan cache menyimpan keseluruhan respons termasuk semua header dan isi. Akibatnya, Anda dapat mengambilnya nanti menggunakan permintaan HTTP atau URL sebagai kunci. Anda akan melihat cara melakukannya di bab Penayangan.

Kapan harus di-cache

Di PWA, Anda bertanggung jawab untuk memutuskan kapan menyimpan file dalam cache. Meskipun salah satu pendekatan adalah menyimpan sebanyak mungkin aset ketika pekerja layanan dipasang, biasanya itu bukan ide terbaik. Menyimpan resource yang tidak perlu ke cache akan membuang-buang bandwidth dan ruang penyimpanan, serta dapat menyebabkan aplikasi menyajikan resource usang yang tidak diinginkan.

Anda tidak perlu meng-cache semua aset sekaligus, Anda dapat meng-cache aset beberapa kali selama siklus proses PWA, seperti:

• Saat penginstalan pekerja layanan.
• Setelah halaman pertama dimuat.
• Saat pengguna membuka bagian atau rute.
• Saat tidak ada aktivitas di jaringan.

Anda dapat meminta caching file baru di thread utama atau dalam konteks pekerja layanan.

Menyimpan cache aset di pekerja layanan

Salah satu skenario yang paling umum adalah meng-cache sekumpulan aset minimum saat pekerja layanan diinstal. Untuk melakukannya, Anda dapat menggunakan antarmuka penyimpanan cache dalam peristiwa install di pekerja layanan.

Karena thread pekerja layanan dapat dihentikan kapan saja, Anda dapat meminta browser untuk menunggu promise addAll selesai untuk meningkatkan peluang menyimpan semua aset dan menjaga aplikasi tetap konsisten. Contoh berikut menunjukkan cara melakukannya, menggunakan metode waitUntil dari argumen peristiwa yang diterima dalam pemroses peristiwa pekerja layanan.

const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", event => {
   event.waitUntil(
      caches.open("pwa-assets")
      .then(cache => {
         return cache.addAll(urlsToCache);
      });
   );
});

Metode waitUntil() menerima promise dan meminta browser untuk menunggu tugas dalam promise untuk diselesaikan (terpenuhi atau gagal) sebelum menghentikan proses pekerja layanan. Anda mungkin perlu merangkai promise dan menampilkan panggilan add() atau addAll() sehingga satu hasil akan masuk ke metode waitUntil().

Anda juga dapat menangani promise menggunakan sintaksis async/await. Dalam hal ini, Anda perlu membuat fungsi asinkron yang dapat memanggil await dan yang menampilkan promise ke waitUntil() setelah dipanggil, seperti dalam contoh berikut:

const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", (event) => {
   let cacheUrls = async () => {
      const cache = await caches.open("pwa-assets");
      return cache.addAll(urlsToCache);
   };
   event.waitUntil(cacheUrls());
});

Permintaan lintas-domain dan respons buram

PWA Anda dapat mendownload dan meng-cache aset dari asal dan lintas-domain Anda, seperti konten dari CDN pihak ketiga. Dengan aplikasi lintas-domain, interaksi cache sangat mirip dengan permintaan dari origin yang sama. Permintaan dijalankan dan salinan respons disimpan dalam cache Anda. Seperti halnya aset yang di-cache lainnya, aset ini hanya tersedia untuk digunakan di asal aplikasi Anda.

Aset akan disimpan sebagai respons buram, yang berarti kode Anda tidak akan dapat melihat atau mengubah konten atau header respons tersebut. Selain itu, respons buram tidak memperlihatkan ukuran sebenarnya di Storage API, sehingga memengaruhi kuota. Beberapa browser mengekspos ukuran besar, seperti 7Mb, tidak peduli apakah filenya hanya 1Kb.

Memperbarui dan menghapus aset

Anda dapat memperbarui aset menggunakan cache.put(request, response) dan menghapus aset dengan delete(request).

Lihat Dokumentasi objek cache untuk mengetahui detail selengkapnya.

Proses Debug Penyimpanan Cache

Banyak browser menawarkan cara untuk men-debug konten penyimpanan cache dalam tab Aplikasi DevTools. Di sana, Anda dapat melihat konten dari setiap cache dalam origin saat ini. Kita akan membahas selengkapnya tentang alat ini di bab Alat dan Debug.

Resource

• Penyimpanan Cache di MDN
• Cache API: Panduan cepat
• Buku Resep Offline