Service Worker Cache API'de yapılan güncellemeler

Bu yayını Service Worker önbellek API'sinde oldukça küçük bir güncellemeyle ilgili olarak yazmam istendi. Bunun ayrı bir makale olarak ele alınması gerektiğini düşünmüyordum ama sonunda taş-kağıt-makas oyununa dönüşen uzun bir tartışmadan sonra kaybettim, işte burada.

Chrome'un Service Worker önbellek API'si uygulamasında yapılan güncellemeleri öğrenmeye hazır mısınız?

Sizi duyamıyorum! Chrome'un Service Worker önbellek API'si uygulamasında yapılan güncellemeleri öğrenmeye hazır mısınız?

(Yalnızca sandalyenize oturup “YEAHHH!” diye bağırdıysanız okumaya devam edebilirsiniz. Aynı anda kement gibi davranmak isteğe bağlıdır, ancak tavsiye edilir).

cache.addAll Chrome 46'da kullanıma sunuldu

Evet. Doğru. Önbellek! Tümünü ekle! Chrome 46!

Peki, iğneleme bir yana, bu aslında oldukça büyük bir mesele. Çünkü cache.addAll, önbellekteki "temeller" çoklu dolgusunun kalan son kısmı olduğundan artık gerekli değil.

cache.addAll şu şekilde çalışır:

// 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, bir URL ve istek dizisi alıp bunları getirir ve önbelleğe ekler. Bu işlem işlemseldir. Getirme veya yazma işlemlerinden biri başarısız olursa tüm işlem başarısız olur ve önbellek önceki durumuna döner. Bu, özellikle yukarıdaki gibi yükleme işlemleri için kullanışlıdır. Bu tür işlemlerde, tek bir hatanın genel bir hata olması gerekir.

Yukarıdaki örnek, bir hizmet çalışanı içindedir ancak caches API'ye sayfalardan da tamamen erişilebilir.

Firefox, geliştirici sürümünde bu API'yi zaten desteklemektedir. Bu nedenle, hizmet çalışanı uygulamasının geri kalanında da bu API yer alacaktır.

Hepsi bu kadar değil. Süreçte daha fazla önbellek iyileştirmesi var...

cache.matchAll Chrome 47'de geliyor

Bu, birden çok eşleşme almanıza olanak tanır:

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

Yukarıdakiler, mysite-static-v1 klasöründe / ile eşleşen her şeyi alır. Önbellek, bağımsız olarak önbelleğe alınabiliyorsa (ör. farklı Vary üstbilgilerine sahip olmaları durumunda) her URL için birden fazla girişe sahip olmanıza olanak tanır.

Firefox bunu geliştirici sürümünde zaten desteklemektedir. Bu nedenle, hizmet çalışanı uygulamasının geri kalanında da bu çözüm yer alacaktır.

Önbellek sorgu seçenekleri yakında Chrome'da kullanıma sunulacak

Aşağıda oldukça standart bir getirme işleyicisi verilmiştir:

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

/ önbelleğe alınmışsa ve / için bir istek alırsak bu istek önbellekten sunulur. Ancak, /?utm_source=blahblahwhatever için bir istek alırsak bu istek önbellekten gelmez. Eşleştirme sırasında URL arama dizesini yoksayarak bu sorunu çözebilirsiniz:

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

/?utm_source=blahblahwhatever, / girişiyle eşleştirilecek! Tam seçenekler şunlardır:

• ignoreSearch - hem istek bağımsız değişkeninde hem de önbelleğe alınan isteklerde URL'nin arama kısmını yoksay
• ignoreMethod - istek bağımsız değişkeninin yöntemini yoksayın. Böylece bir POST isteğinin önbellekteki bir GET girişiyle eşleşebilmesi
• ignoreVary - önbelleğe alınan yanıtlarda değişiklik başlığını yoksay

Firefox bunu zaten kendi tarayıcılarında desteklemektedir. O halde şimdiye kadar bu konuda bilgi sahibisiniz. Ben Kelly'ye tüm bunları Firefox'a yükleyerek ne kadar harika olduğunu anlatın.

Chrome'da önbellek sorgu seçeneklerini uygulamak istiyorsanız crbug.com/426309 adresini ziyaret edin.

Bir sonraki sefer, "Önbellek API'sinde uyguladığımız uygulamalar" ile ilgili başka bir heyecan verici bölüm için görüşmek üzere!