Update pada Service Worker Cache API

Saya diminta untuk menulis postingan ini tentang update yang cukup kecil ke cache API pekerja layanan. Saya pikir itu tidak perlu artikelnya sendiri, tetapi setelah perdebatan panjang yang akhirnya berakhir dengan permainan gunting batu kertas, saya kalah, jadi ini dia.

Apakah Anda siap untuk mendengar tentang update pada implementasi API cache pekerja layanan Chrome?

Saya tidak bisa mendengar Anda. Saya berkata, apakah Anda siap mendengar tentang pembaruan implementasi API cache pekerja layanan Chrome?

(Anda hanya dapat membacanya jika Anda melompat ke kursi dan berteriak “YEAHHH!”. Berpura-pura mengayunkan lasso adalah opsional, tetapi dianjurkan).

cache.addAll tersedia di Chrome 46

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

Oke, selain sarkasme, ini sebenarnya masalah yang cukup besar, karena cache.addAll adalah bagian terakhir dari polyfill “dasar-dasar” 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 salah satu pengambilan atau penulisan gagal, seluruh operasi akan gagal, dan cache akan dikembalikan ke status sebelumnya. Hal ini khususnya berguna untuk operasi penginstalan seperti di atas, ketika kegagalan tunggal seharusnya merupakan kegagalan secara keseluruhan.

Contoh di atas berada dalam pekerja layanan, tetapi juga cache API dapat diakses sepenuhnya dari halaman.

Firefox sudah mendukung API ini dalam edisi developer-nya, sehingga akan disertakan bersama implementasi pekerja layanan lainnya.

Namun tunggu dulu, bukan itu saja, masih ada peningkatan cache lainnya dalam pipeline...

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) {
    // …
});

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

Firefox sudah mendukung fitur ini di edisi developer miliknya, sehingga akan disertakan bersama implementasi pekerja layanan lainnya.

Opsi kueri cache akan segera hadir di Chrome... segera

Berikut 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 / di-cache, dan kita mendapatkan permintaan untuk /, permintaan tersebut akan disajikan 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 di 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 bervariasi dalam respons yang di-cache

Firefox sudah mendukung ini di... oke, sekarang Anda sudah tahu latihannya. Beri tahu Ben Kelly betapa hebatnya dia karena telah menyertakan semua ini di Firefox.

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

Sampai jumpa di lain waktu untuk bab menarik lainnya tentang “apa yang kami terapkan dalam API cache”!