Menyimpan resource ke dalam cache selama runtime

Beberapa aset di aplikasi web mungkin jarang digunakan, sangat besar, atau bervariasi berdasarkan perangkat pengguna (misalnya gambar responsif) atau bahasa. Ini adalah kasus ketika precache mungkin merupakan antipola, dan Anda harus mengandalkan cache runtime.

Di Workbox, Anda dapat menangani penyimpanan cache runtime untuk aset menggunakan modul workbox-routing untuk mencocokkan rute, dan menangani strategi caching untuk aset tersebut dengan modul workbox-strategies.

Strategi penyimpanan cache

Anda dapat menangani sebagian besar rute untuk aset dengan salah satu strategi caching bawaan. Aktivitas ini dibahas secara mendetail sebelumnya dalam dokumentasi ini, tetapi berikut adalah beberapa hal yang perlu diingat:

• Stale When Revalidate menggunakan respons yang di-cache untuk suatu permintaan jika tersedia dan memperbarui cache di latar belakang dengan respons dari jaringan. Oleh karena itu, jika aset tidak di-cache, aset akan menunggu respons jaringan dan menggunakannya. Ini adalah strategi yang cukup aman, karena secara teratur memperbarui entri cache yang bergantung padanya. Kelemahannya adalah metode ini selalu meminta aset dari jaringan di latar belakang.
• Network First mencoba mendapatkan respons dari jaringan terlebih dahulu. Jika respons diterima, respons tersebut akan diteruskan ke browser dan menyimpannya ke cache. Jika permintaan jaringan gagal, respons terakhir yang di-cache akan digunakan, sehingga memungkinkan akses offline ke aset.
• Cache First memeriksa respons terhadap cache terlebih dahulu dan menggunakannya jika tersedia. Jika permintaan tidak ada dalam cache, jaringan akan digunakan dan respons yang valid akan ditambahkan ke cache sebelum diteruskan ke browser.
• Khusus Jaringan memaksa respons berasal dari jaringan.
• Hanya Cache memaksa respons berasal dari cache.

Anda dapat menerapkan strategi ini ke permintaan menggunakan metode yang ditawarkan oleh workbox-routing.

Menerapkan strategi caching dengan pencocokan rute

workbox-routing mengekspos metode registerRoute untuk mencocokkan rute dan menanganinya dengan strategi caching. registerRoute menerima objek Route yang kemudian menerima dua argumen:

1. String, ekspresi reguler, atau callback pencocokan untuk menentukan kriteria pencocokan rute.
2. Pengendali untuk rute—biasanya strategi yang disediakan oleh workbox-strategies.

Callback pencocokan sebaiknya cocok dengan rute karena memberikan objek konteks yang menyertakan objek Request, string URL permintaan, peristiwa pengambilan, dan boolean apakah permintaan tersebut merupakan permintaan asal yang sama.

Pengendali kemudian menangani rute yang cocok. Pada contoh berikut, rute baru dibuat yang cocok dengan permintaan gambar origin yang sama yang datang, dengan menerapkan cache terlebih dahulu, kembali ke strategi jaringan.

// sw.js
import { registerRoute, Route } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';

// A new route that matches same-origin image requests and handles
// them with the cache-first, falling back to network strategy:
const imageRoute = new Route(({ request, sameOrigin }) => {
  return sameOrigin && request.destination === 'image'
}, new CacheFirst());

// Register the new route
registerRoute(imageRoute);

Catatan: Properti request.destination dari objek Request adalah cara terbaik untuk mencocokkan permintaan untuk jenis konten tertentu, karena properti ini membantu mengatasi perangkap permintaan pencocokan untuk aset berdasarkan ekstensi filenya.

Menggunakan banyak cache

Workbox memungkinkan Anda mengelompokkan respons yang di-cache ke dalam instance Cache terpisah menggunakan opsi cacheName yang tersedia dalam strategi yang dipaketkan.

Dalam contoh berikut, gambar menggunakan strategi yang tidak berlaku saat validasi ulang, sedangkan aset CSS dan JavaScript menggunakan fallback ke strategi jaringan yang mengutamakan cache. Rute untuk setiap aset menempatkan respons ke dalam cache terpisah, dengan menambahkan properti cacheName.

// sw.js
import { registerRoute, Route } from 'workbox-routing';
import { CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';

// Handle images:
const imageRoute = new Route(({ request }) => {
  return request.destination === 'image'
}, new StaleWhileRevalidate({
  cacheName: 'images'
}));

// Handle scripts:
const scriptsRoute = new Route(({ request }) => {
  return request.destination === 'script';
}, new CacheFirst({
  cacheName: 'scripts'
}));

// Handle styles:
const stylesRoute = new Route(({ request }) => {
  return request.destination === 'style';
}, new CacheFirst({
  cacheName: 'styles'
}));

// Register routes
registerRoute(imageRoute);
registerRoute(scriptsRoute);
registerRoute(stylesRoute);

Penampil penyimpanan Cache di panel Application pada Chrome DevTools. Respons untuk berbagai jenis aset disimpan dalam cache terpisah.

Menetapkan masa berlaku untuk entri cache

Perhatikan kuota penyimpanan saat mengelola cache pekerja layanan. ExpirationPlugin menyederhanakan pemeliharaan cache dan diekspos oleh workbox-expiration. Untuk menggunakannya, tentukan parameter tersebut dalam konfigurasi untuk strategi caching:

// sw.js
import { registerRoute, Route } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';

// Evict image cache entries older thirty days:
const imageRoute = new Route(({ request }) => {
  return request.destination === 'image';
}, new CacheFirst({
  cacheName: 'images',
  plugins: [
    new ExpirationPlugin({
      maxAgeSeconds: 60 * 60 * 24 * 30,
    })
  ]
}));

// Evict the least-used script cache entries when
// the cache has more than 50 entries:
const scriptsRoute = new Route(({ request }) => {
  return request.destination === 'script';
}, new CacheFirst({
  cacheName: 'scripts',
  plugins: [
    new ExpirationPlugin({
      maxEntries: 50,
    })
  ]
}));

// Register routes
registerRoute(imageRoute);
registerRoute(scriptsRoute);

Poin penting: ExpirationPlugin hanya dapat digunakan dengan rute terdaftar menggunakan strategi yang memiliki cacheName

yang telah dikonfigurasi

Mematuhi kuota penyimpanan bisa menjadi hal yang rumit. Praktik yang baik adalah mempertimbangkan pengguna yang mungkin mengalami tekanan penyimpanan, atau ingin menggunakan penyimpanan mereka seefisien mungkin. Pasangan ExpirationPlugin Workbox dapat membantu mencapai sasaran tersebut.

Pertimbangan lintas asal

Interaksi antara pekerja layanan dan aset lintas origin sangat berbeda dibandingkan dengan aset origin yang sama. Cross-Origin Resource Sharing (CORS) rumit, dan kompleksitas tersebut meluas ke cara Anda menangani resource lintas asal dalam pekerja layanan.

Catatan: Baca panduan How to win at CORS dari Jake Archibald untuk mendapatkan penjelasan interaktif yang sangat baik tentang cara kerja CORS.

Respons tidak jelas

Saat membuat permintaan lintas asal dalam mode no-cors, respons dapat disimpan dalam cache pekerja layanan dan bahkan digunakan langsung oleh browser. Namun, isi respons itu sendiri tidak dapat dibaca melalui JavaScript. Hal ini dikenal sebagai respons buram.

Respons buram adalah tindakan keamanan yang dimaksudkan untuk mencegah pemeriksaan aset lintas asal. Anda masih dapat membuat permintaan untuk aset lintas origin dan bahkan meng-cache-nya, hanya saja Anda tidak dapat membaca isi respons atau bahkan membaca kode statusnya.

Catatan: Anda dapat mempelajari respons buram lebih lanjut di Tanya Jawab Stack Overflow ini.

Ingatlah untuk ikut serta dalam mode CORS

Meskipun Anda memuat aset lintas asal yang memang menetapkan header CORS permisif yang memungkinkan Anda membaca respons, isi respons lintas asal mungkin masih tidak transparan. Misalnya, HTML berikut akan memicu permintaan no-cors yang akan menyebabkan respons buram, terlepas dari header CORS yang ditetapkan:

<link rel="stylesheet" href="https://example.com/path/to/style.css">
<img src="https://example.com/path/to/image.png">

Untuk memicu permintaan cors secara eksplisit yang akan menghasilkan respons non-buram, Anda harus secara eksplisit memilih ikut serta dalam mode CORS dengan menambahkan atribut crossorigin ke HTML:

<link crossorigin="anonymous" rel="stylesheet" href="https://example.com/path/to/style.css">
<img crossorigin="anonymous" src="https://example.com/path/to/image.png">

Hal ini penting untuk diingat saat rute di subresource cache pekerja layanan Anda dimuat saat runtime.

Workbox mungkin tidak menyimpan respons buram ke dalam cache

Secara default, Workbox menggunakan pendekatan yang cermat untuk meng-cache respons buram. Karena tidak mungkin memeriksa kode respons untuk respons buram, meng-cache respons error dapat mengakibatkan pengalaman yang rusak terus-menerus jika strategi cache-first atau hanya cache digunakan.

Jika Anda perlu meng-cache respons buram di Workbox, Anda harus menggunakan strategi yang mengutamakan jaringan atau usang saat validasi untuk menanganinya. Ya, ini berarti aset akan tetap diminta dari jaringan setiap saat, tetapi memastikan bahwa respons yang gagal tidak akan dipertahankan, dan pada akhirnya akan diganti dengan respons yang dapat digunakan.

Jika Anda menggunakan strategi caching lain dan respons buram ditampilkan, Workbox akan memperingatkan Anda bahwa respons tidak di-cache saat dalam mode pengembangan.

Memaksa cache respons buram

Jika Anda benar-benar yakin bahwa Anda ingin meng-cache respons buram menggunakan strategi cache-first atau hanya cache, Anda dapat memaksa Workbox untuk melakukannya dengan modul workbox-cacheable-response:

import {Route, registerRoute} from 'workbox-routing';
import {NetworkFirst, StaleWhileRevalidate} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';

const cdnRoute = new Route(({url}) => {
  return url === 'https://cdn.google.com/example-script.min.js';
}, new CacheFirst({
  plugins: [
    new CacheableResponsePlugin({
      statuses: [0, 200]
    })
  ]
}))

registerRoute(cdnRoute);

Peringatan: Pengingat: Pastikan Anda ingin menangani respons buram dengan strategi cache-first atau hanya cache. Error ini dapat menyebabkan pengalaman yang terus-menerus rusak, sehingga Anda harus menghapus cache secara eksplisit atau men-deploy pekerja layanan yang diupdate yang menggunakan strategi yang mengutamakan jaringan untuk permintaan lintas origin guna memperbaiki masalah.

Respons Buram dan navigator.storage API

Untuk menghindari kebocoran informasi lintas-domain, ada padding signifikan yang ditambahkan ke ukuran respons buram yang digunakan untuk menghitung batas kuota penyimpanan. Hal ini memengaruhi cara navigator.storage API melaporkan kuota penyimpanan.

Padding ini bervariasi menurut browser, tetapi untuk Chrome, ukuran minimum respons buram tunggal yang di-cache yang berkontribusi terhadap keseluruhan penyimpanan yang digunakan adalah sekitar 7 megabyte. Anda harus memperhatikan hal ini saat menentukan jumlah respons buram yang ingin di-cache, karena Anda dapat dengan mudah melebihi kuota penyimpanan lebih cepat dari yang diharapkan.