PricingLoginStart free
Vue Academy · Pelajaran

Strategi Service Worker

Cache-first, network-first, stale-while-revalidate — memilih strategi untuk tiap jenis resource.

Pelajaran 2 dari 413 langkah

Strategi Service Worker adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Ikhtisar Strategi Penyimpanan Tembolok

Pekerja layanan mencegat permintaan jaringan dan memutuskan apakah akan menyajikannya dari tembolok, jaringan, atau keduanya. Workbox menamai empat strategi inti yang masing-masing sesuai untuk jenis sumber daya yang berbeda.

CacheFirst

CacheFirst menyajikan data dari tembolok dan hanya mengakses jaringan jika data tidak ditemukan. Strategi ini paling sesuai untuk aset yang jarang berubah dan memiliki hash konten, seperti fon dan gambar.

// serve cached, fall back to network on miss

NetworkFirst

NetworkFirst mencoba jaringan terlebih dahulu dan menggunakan tembolok sebagai cadangan saat luring atau ketika batas waktu terlampaui. Strategi ini paling sesuai untuk respons API yang membutuhkan kemutakhiran, tetapi juga ingin tersedia saat luring.

// try network, fall back to cache when offline

StaleWhileRevalidate

StaleWhileRevalidate segera mengembalikan salinan yang tersimpan dalam tembolok demi kecepatan, sembari mengambil salinan terbaru di latar belakang untuk memperbarui tembolok. Strategi ini sangat sesuai untuk bundel JS dan CSS.

// return cache now, update cache in background

NetworkOnly dan CacheOnly

Dua strategi yang berlawanan: NetworkOnly selalu mengambil data dari jaringan tanpa menyimpannya, sedangkan CacheOnly hanya menyajikan konten yang telah dipra-tembolok. Gunakan strategi ini untuk permintaan POST yang tidak dapat disimpan dalam tembolok atau aset yang harus sepenuhnya dipra-tembolok.

Larik runtimeCaching

Dalam konfigurasi Workbox, runtimeCaching adalah larik aturan. Setiap aturan mencocokkan URL permintaan dan menetapkan strategi serta nama tembolok.

VitePWA({
  workbox: {
    runtimeCaching: [ /* rules */ ]
  }
});

Aturan urlPattern

Setiap aturan memiliki urlPattern (ekspresi reguler atau fungsi), handler (nama strategi), dan options seperti nama tembolok.

{
  urlPattern: /\/api\//,
  handler: "NetworkFirst",
  options: { cacheName: "api-cache" }
}

Menyimpan Aset Statis dengan CacheFirst

Cocokkan gambar dan fon, lalu sajikan dengan CacheFirst karena URL yang memiliki hash konten akan berubah saat berkas berubah.

{
  urlPattern: /\.(?:png|jpg|svg|woff2)$/,
  handler: "CacheFirst",
  options: { cacheName: "static-assets" }
}

Menyimpan Bundel JS dengan StaleWhileRevalidate

Sajikan bundel skrip dan gaya secara langsung dari tembolok sembari memperbaruinya di latar belakang.

{
  urlPattern: /\.(?:js|css)$/,
  handler: "StaleWhileRevalidate",
  options: { cacheName: "assets" }
}

Plugin Kedaluwarsa

Tembolok akan terus membesar tanpa batas. Opsi expiration membatasi jumlah entri dan usia maksimumnya, lalu menghapus entri yang paling lama terlebih dahulu.

options: {
  cacheName: "api-cache",
  expiration: {
    maxEntries: 50,
    maxAgeSeconds: 60 * 60 * 24
  }
}

Menyimpan Respons Buram

Untuk respons API lintas asal, Anda biasanya menambahkan cacheableResponse dengan status yang diizinkan agar hanya respons yang berhasil yang disimpan.

options: {
  cacheableResponse: { statuses: [0, 200] }
}

Pemeriksaan Singkat

Strategi mana yang paling sesuai untuk respons API yang harus mutakhir tetapi tetap tersedia saat luring?

Jawab di pelajaran interaktif

Ringkasan

Strategi Workbox sesuai dengan jenis sumber daya: CacheFirst untuk aset statis, NetworkFirst untuk respons API, dan StaleWhileRevalidate untuk bundel JS/CSS. Definisikan strategi tersebut dalam larik runtimeCaching dengan urlPattern, handler, dan options seperti plugin expiration untuk membatasi ukuran tembolok.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus
42
Pelajaran
156
Mulai belajar gratisLihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Strategi Service Worker” gratis?

Ya — teks lengkap “Strategi Service Worker” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Strategi Service Worker”?

Cache-first, network-first, stale-while-revalidate — memilih strategi untuk tiap jenis resource. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Strategi Service Worker” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Menyiapkan vite-plugin-pwa
  2. Strategi Service Worker
  3. Dukungan Offline dan Sinkronisasi Latar Belakang
  4. Notifikasi Push di Vue PWA
← Kembali ke Vue Academy