PricingLoginStart free
Vue Academy · Pelajaran

Strategi Service Worker

Cache-first, network-first, stale-while-revalidate — memilih mengikut jenis sumber.

Pelajaran 2 daripada 413 langkah

Strategi Service Worker ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Gambaran Keseluruhan Strategi Caching

Pekerja perkhidmatan memintas permintaan rangkaian dan menentukan sama ada untuk menyajikan daripada cache, rangkaian atau kedua-duanya. Workbox menamakan empat strategi teras, dan setiap satunya sesuai untuk jenis sumber yang berbeza.

CacheFirst

CacheFirst menyajikan daripada cache dan hanya mengakses rangkaian apabila kandungan tiada dalam cache. Strategi ini terbaik untuk aset yang jarang berubah dan mempunyai cincangan kandungan, seperti fon dan imej.

// serve cached, fall back to network on miss

NetworkFirst

NetworkFirst mencuba rangkaian terlebih dahulu dan beralih kepada cache apabila di luar talian atau apabila tamat masa. Strategi ini terbaik untuk respons API yang memerlukan kesegaran tetapi juga perlu tersedia di luar talian.

// try network, fall back to cache when offline

StaleWhileRevalidate

StaleWhileRevalidate mengembalikan salinan cache dengan serta-merta untuk kelajuan, sambil mendapatkan salinan baharu di latar belakang bagi mengemas kini cache. Strategi ini amat sesuai untuk himpunan JS dan CSS.

// return cache now, update cache in background

NetworkOnly dan CacheOnly

Dua hujung yang bertentangan: NetworkOnly sentiasa membuat pengambilan (tanpa caching), manakala CacheOnly hanya menyajikan kandungan yang dipra-cache. Gunakan strategi ini untuk permintaan POST yang tidak boleh di-cache atau aset yang dipra-cache sepenuhnya.

Tatasusunan runtimeCaching

Dalam konfigurasi Workbox, runtimeCaching ialah tatasusunan peraturan. Setiap peraturan memadankan URL permintaan dan menetapkan strategi serta nama cache.

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

Peraturan urlPattern

Setiap peraturan mempunyai urlPattern (ungkapan nalar atau fungsi), handler (nama strategi) dan options seperti nama cache.

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

Caching Aset Statik dengan CacheFirst

Padankan imej dan fon, kemudian sajikannya dengan CacheFirst kerana URL yang mempunyai cincangan kandungan berubah apabila fail berubah.

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

Caching Himpunan JS dengan StaleWhileRevalidate

Sajikan himpunan skrip dan gaya dengan serta-merta daripada cache sambil menyegarkannya di latar belakang.

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

Pemalam Tamat Tempoh

Cache akan berkembang tanpa had jika tiada had. Pilihan expiration mengehadkan bilangan entri dan umur maksimumnya, serta menyingkirkan entri yang paling lama terlebih dahulu.

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

Caching Respons Legap

Untuk respons API merentas asal, Anda biasanya menambahkan cacheableResponse dengan status yang dibenarkan supaya hanya respons yang berjaya disimpan.

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

Semakan Pantas

Strategi manakah yang paling sesuai untuk respons API yang perlu segar tetapi tersedia di luar talian?

Jawab dalam pelajaran interaktif

Rumusan

Strategi Workbox dipadankan dengan jenis sumber: CacheFirst untuk aset statik, NetworkFirst untuk respons API dan StaleWhileRevalidate untuk himpunan JS/CSS. Takrifkannya dalam tatasusunan runtimeCaching dengan urlPattern, handler dan options seperti pemalam expiration untuk mengehadkan saiz cache.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
42
Pelajaran
156
Mula belajar secara percumaLihat kursus penuh

Soalan Lazim

Adakah pelajaran “Strategi Service Worker” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Strategi Service Worker”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Strategi Service Worker”?

Cache-first, network-first, stale-while-revalidate — memilih mengikut jenis sumber. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Strategi Service Worker” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Persediaan vite-plugin-pwa
  2. Strategi Service Worker
  3. Sokongan Luar Talian dan Penyegerakan Latar Belakang
  4. Pemberitahuan Tolak dalam PWA Vue
← Kembali ke Vue Academy