Menyimpan ke cache

Penyimpanan {i>cache<i} 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 menyajikan aset secepat mungkin dalam kondisi jaringan apa pun. Seperti yang disebutkan dalam Aset dan Data, Anda dapat memutuskan strategi terbaik untuk menyimpan aset yang diperlukan dalam cache. Untuk mengelola cache, pekerja layanan Anda berinteraksi dengan Cache Storage API.

Dukungan Browser

  • 43
  • 16
  • 41
  • 11.1

Sumber

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 dengan jendela, yang berarti Anda tidak memblokir thread utama. Perlu diketahui bahwa untuk menggunakan Cache Storage API, sebagian besar konteks ini harus menggunakan koneksi TLS.

Apa yang harus di-cache

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

Referensi 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 yang terdiri dari beberapa halaman, ada dokumen HTML lain yang ingin Anda sajikan dengan cepat atau saat offline.

Siap digunakan untuk offline

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

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

Ada banyak strategi caching berbeda yang dapat Anda gunakan bergantung pada kebutuhan PWA Anda. Itulah mengapa penting untuk mendesain penggunaan cache guna memberikan pengalaman yang cepat dan andal. Misalnya, jika semua aset aplikasi Anda akan didownload dengan cepat, tidak menghabiskan banyak ruang, dan tidak perlu diupdate dalam setiap permintaan, caching semua aset Anda akan menjadi strategi yang valid. Di sisi lain, jika Anda memiliki resource yang memerlukan versi terbaru, sebaiknya pertimbangkan untuk tidak menyimpan aset tersebut dalam cache.

Menggunakan API

Gunakan Cache Storage API untuk menentukan kumpulan cache dalam asal Anda, yang masing-masing diidentifikasi dengan nama string yang dapat Anda tentukan. Akses API melalui objek caches, dan metode open akan 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 sekelompok 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. Sehingga, Anda bisa mengambilnya kembali nanti menggunakan permintaan HTTP atau URL sebagai kunci. Anda akan melihat cara melakukannya di bab Penayangan.

Kapan menyimpan cache

Di PWA, Anda bertanggung jawab untuk memutuskan kapan harus meng-cache file. Meskipun salah satu pendekatannya adalah menyimpan aset sebanyak mungkin saat pekerja layanan diinstal, hal itu biasanya bukan ide yang terbaik. Menyimpan resource yang tidak perlu ke cache akan memboroskan bandwidth dan ruang penyimpanan, serta dapat menyebabkan aplikasi Anda menyalurkan resource usang yang tidak diinginkan.

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

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

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

Menyimpan aset dalam cache dalam pekerja layanan

Salah satu skenario yang paling umum adalah meng-cache kumpulan 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 guna meningkatkan peluang penyimpanan semua aset dan menjaga aplikasi tetap konsisten. Contoh berikut menunjukkan cara melakukannya, dengan 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 sampai 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 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 origin dan lintas-domain Anda, seperti konten dari CDN pihak ketiga. Dengan aplikasi lintas-domain, interaksi cache sangat mirip dengan permintaan origin yang sama. Permintaan dijalankan dan salinan respons disimpan dalam cache Anda. Seperti 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 yang 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 detail selengkapnya.

Men-debug Penyimpanan Cache

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

Chrome DevTools melakukan proses debug konten Penyimpanan Cache.

Referensi