Update pada Service Worker Cache API

Jake Archibald
Jake Archibald
X Halaman Beranda

Saya diminta untuk menulis postingan ini tentang update yang cukup kecil pada API cache pekerja layanan. Saya tidak yakin hal ini memerlukan artikelnya sendiri, tetapi setelah perdebatan panjang yang akhirnya berakhir dengan permainan batu-kertas-gunting, saya kalah, jadi inilah artikelnya.

Siapkah Anda mendengar tentang update pada penerapan API cache pekerja layanan Chrome?

Saya tidak bisa mendengar Anda. Saya bertanya, apakah Anda siap mendengar tentang pembaruan pada penerapan API cache pekerja layanan Chrome?

(Anda hanya boleh melanjutkan membaca jika telah melompat ke kursi dan berteriak “YEAHHH!”. Berlagak mengayunkan lasso secara bersamaan bersifat opsional, tetapi dianjurkan).

cache.addAll hadir di Chrome 46

Ya. Benar sekali! Cache! Titik tambahkan semua. Chrome 46!

Oke, oke, selain sarkasme, ini sebenarnya masalah yang cukup besar, karena cache.addAll adalah bagian terakhir yang tersisa dari polyfill “esensial” cache, yang berarti tidak diperlukan lagi.

Berikut cara kerja cache.addAll:

// when the browser sees this SW for the first time
self.addEventListener('install', function(event) {
    // wait until the following promise resolves
    event.waitUntil(
    // open/create a cache named 'mysite-static-v1'
    caches.open('mysite-static-v1').then(function(cache) {
        // fetch and add this stuff to it
        return cache.addAll([
        '/',
        '/css/styles.css',
        '/js/script.js',
        '/imgs/cat-falls-over.gif'
        ]);
    })
    );
});

addAll mengambil array URL & permintaan, mengambilnya, dan menambahkannya ke cache. Ini bersifat transaksional - jika pengambilan atau penulisan gagal, seluruh operasi akan gagal, dan cache akan dikembalikan ke status sebelumnya. Hal ini sangat berguna untuk operasi penginstalan seperti di atas, dengan satu kegagalan harus merupakan kegagalan secara keseluruhan.

Contoh di atas berada dalam service worker, tetapi caches API juga dapat diakses sepenuhnya dari halaman.

Firefox sudah mendukung API ini di edisi developer, sehingga akan diluncurkan bersama dengan penerapan pekerja layanan lainnya.

Namun, tunggu, masih ada lagi, ada lebih banyak peningkatan cache yang sedang dalam proses…

cache.matchAll hadir di Chrome 47

Hal ini memungkinkan Anda mendapatkan beberapa kecocokan:

caches.open('mysite-static-v1').then(function(cache) {
    return cache.matchAll('/');
}).then(function(responses) {
    // …
});

Kode di atas akan mendapatkan semua yang ada di mysite-static-v1 yang cocok dengan /. Cache memungkinkan Anda memiliki beberapa entri per URL jika dapat di-cache secara independen, misalnya jika memiliki header Vary yang berbeda.

Firefox sudah mendukungnya di edisi developer, sehingga akan diluncurkan bersama dengan penerapan pekerja layanan lainnya.

Opsi kueri cache akan segera hadir di Chrome

Berikut adalah pengendali pengambilan yang cukup standar:

self.addEventListener('fetch', function(event) {
    event.respondWith(
    caches.match(event.request).then(function(response) {
        return response || fetch(event.request);
    })
    );
});

Jika kita telah meng-cache /, dan kita mendapatkan permintaan untuk /, permintaan tersebut akan ditayangkan dari cache. Namun, jika kita mendapatkan permintaan untuk /?utm_source=blahblahwhatever yang tidak akan berasal dari cache. Anda dapat mengatasi masalah ini dengan mengabaikan string penelusuran URL saat mencocokkan:

self.addEventListener('fetch', function(event) {
    event.respondWith(
    caches.match(event.request, {
        ignoreSearch: true
    }).then(function(response) {
        return response || fetch(event.request);
    })
    );
});

Sekarang /?utm_source=blahblahwhatever akan dicocokkan dengan entri untuk /. Opsi lengkapnya adalah:

  • ignoreSearch - mengabaikan bagian penelusuran URL dalam argumen permintaan dan permintaan yang di-cache
  • ignoreMethod - mengabaikan metode argumen permintaan, sehingga permintaan POST dapat cocok dengan entri GET di cache
  • ignoreVary - mengabaikan header vary dalam respons yang di-cache

Firefox sudah mendukungnya di… ok, Anda sudah tahu apa yang harus dilakukan. Beri tahu Ben Kelly betapa hebatnya dia karena telah memasukkan semua ini ke Firefox.

Jika Anda ingin mengikuti penerapan opsi kueri cache Chrome, lihat crbug.com/426309.

Sampai jumpa di lain waktu untuk bab menarik lainnya tentang “apa yang kita terapkan di cache API”.