Keuntungan dari JavaScript Serviceworker API adalah memungkinkan pengembang web untuk dengan mudah mengendalikan cache. Meskipun menggunakan teknologi seperti Etag juga merupakan teknologi untuk mengendalikan cache, menggunakan JavaScript memungkinkan program untuk mengontrol cache lebih kuat dan bebas. Tentu saja, Strong memiliki kelebihan dan kekurangannya - Anda perlu melakukan perawatan setelah perawatan. Perawatan setelah perawatan yang disebut adalah membersihkan cache.
Mari kita lihat cara membuat objek cache, tambahkan data cache permintaan di cache, hapus data cache permintaan dari cache, dan akhirnya cara menghapus cache sepenuhnya.
Tentukan Dukungan Browser untuk Cache Objek Cache API
Periksa apakah browser mendukung Cache API ...
if ('cache' di jendela) {// mendapat dukungan!}... Periksa apakah ada objek cache di jendela.
Buat Objek Cache
Cara membuat objek cache adalah dengan menggunakan cache.open () dan lulus dalam nama cache:
cache.open ('test-cache'). Kemudian (function (cache) {// cache dibuat dan Anda dapat mengaksesnya sekarang});Metode cache. Open ini mengembalikan janji, dan objek cache di dalamnya baru dibuat. Jika telah dibuat sebelumnya, itu tidak akan diciptakan kembali.
Tambahkan data yang di -cache
Untuk jenis cache ini, Anda dapat menganggapnya sebagai array objek permintaan, dan data respons yang diperoleh dengan permintaan permintaan akan disimpan dalam objek cache berdasarkan nilai kunci. Ada dua cara untuk menambahkan data ke cache: Tambah dan addall. Gunakan dua metode ini untuk menambahkan alamat permintaan yang akan di -cache. Untuk pengantar objek permintaan, Anda dapat merujuk ke artikel Fetch API.
Gunakan metode Addall untuk menambahkan permintaan cache dalam batch:
cache.open ('test-cache'). Kemudian (fungsi (cache) {cache.addall (['/', '/images/logo.png']) .then (function () {// cache!});});Metode addall ini dapat menerima array alamat sebagai parameter, dan data respons dari alamat permintaan ini akan di -cache dalam objek cache. Addall mengembalikan janji. Untuk menambahkan satu alamat, gunakan metode Tambah:
Cache.open ('Test-Cache'). Kemudian (fungsi (cache) {cache.add ('/page/1'); // Alamat "/halaman/1" akan diminta dan data respons akan di-cache.});Metode add () juga dapat menerima permintaan khusus:
cache.open ('test-cache'). Kemudian (fungsi (cache) {cache.add (permintaan baru ('/halaman/1', {/* Parameter permintaan*/}));});Ini sangat mirip dengan metode add (). Metode put () juga dapat menambahkan alamat permintaan dan menambahkan data responsnya secara bersamaan:
fetch ('/page/1'). Kemudian (function (response) {return caches.open ('uji-cache'). Kemudian (fungsi (cache) {return cache.put ('/page/1', response);});});Akses data yang di -cache
Untuk melihat data permintaan yang diubah, kami dapat menggunakan metode tombol () di objek cache untuk mendapatkan semua objek permintaan yang di -cache dalam formulir array:
cache.open ('test-cache'). Kemudian (function (cache) {cache.keys (). Kemudian (function (cachedRequests) {console.log (CachedRequests); // [permintaan, permintaan]});});/*permintaan {bodyused: kredensial palsu: "empalah" "Ikuti" Referrer: "" URL: "http://www.webhek.com/images/logo.png"}*/Jika Anda ingin melihat konten respons dari permintaan permintaan yang di -cache, Anda dapat menggunakan metode cache.match () atau cache.matchall ():
caches.open('test-cache').then(function(cache) { cache.match('/page/1').then(function(matchedResponse) { console.log(matchedResponse); });});/*Response { body: (...), bodyUsed: false, headers: Headers, ok: true, status: 200, statusText: "OK", type: "basic", URL: "https://www.webhek.com/page/1"}*/Untuk informasi lebih lanjut tentang penggunaan dan rincian objek respons, Anda dapat merujuk ke artikel API Fetch.
Hapus data dalam cache
Hapus data dari cache, kita dapat menggunakan metode delete () dalam objek cache:
cache.open ('test-cache'). Kemudian (function (cache) {cache.delete ('/page/1');});Dengan cara ini, tidak akan ada data permintaan lagi /halaman /1 di cache.
Dapatkan nama cache di cache yang ada
Untuk mendapatkan nama data cache yang sudah ada di cache, kita perlu menggunakan metode cache.keys ():
cache.keys (). Kemudian (function (CacheKeys) {console.log (CACHEKEYS); // Ex: ["Test-Cache"]});window.caches.keys () mengembalikan janji.
Hapus objek cache
Untuk menghapus objek yang di -cache, Anda hanya perlu nama kunci yang di -cache:
cache.delete ('test-cache'). Kemudian (function () {console.log ('cache berhasil dihapus!');});Cara menghapus data cache lama dalam jumlah besar:
// Asumsikan `cache_name` adalah nama cache baru // sekarang hapus cache lama var cache_name = 'versi-8'; // ... cache.keys (). Kemudian (fungsi (Cachenames) {return promise.all (cacheene.map (function (Cachename) {if (ifeName! }}));});Ingin menjadi ahli pekerja jasa? Kode di atas layak dimasukkan ke dalam perpustakaan Anda. Pekerja Layanan Dukungan Firefox dan Google Chrome, dan saya percaya bahwa lebih banyak situs web dan aplikasi akan menggunakan teknologi caching ini untuk meningkatkan kecepatan berjalan mereka segera.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.