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

Jake Archibald
Jake Archibald
X Ana sayfa

Hizmet çalışanı önbellek API'sinde yapılan oldukça küçük bir güncellemeyle ilgili bu makaleyi yazmam istendi. Bu konunun kendi makalesini hak ettiğini düşünmüyordum ancak sonunda taş-kağıt-makas oynamaya kadar uzanan uzun bir tartışmanın ardından kaybettim. İşte bu makale.

Chrome'un servis çalışanı önbellek API'si uygulamasında yapılan güncellemeler hakkında bilgi edinmeye hazır mısınız?

Sizi duyamıyorum. Chrome'un service worker önbellek API'si uygulamasında yapılan güncellemeler hakkında bilgi edinmeye hazır mısınız?

(Yalnızca sandalyenize atlayıp "YEAHHH!" diye bağırdıktan sonra okumaya devam edebilirsiniz. Aynı anda bir lasso sallıyormuş gibi yapmak isteğe bağlıdır ancak önerilir.)

cache.addAll, Chrome 46'da kullanıma sunuldu

Evet! Doğru. Önbelleğe alın. Noktayla tümünü ekleyin. Chrome 46'da

Tamam, tamam. İroni bir yana, bu aslında oldukça önemli bir gelişme. cache.addAll, önbelleğe alma "temel" polyfill'inin kalan son parçası olduğu için 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 dizisini alır, getirir ve önbelleğe ekler. Bu işlemseldir. Getirme veya yazma işlemlerinden herhangi biri başarısız olursa tüm işlem başarısız olur ve önbellek önceki durumuna döndürülür. Bu, özellikle tek bir hatanın genel bir hata olarak kabul edilmesi gereken yukarıdaki gibi yükleme işlemleri için kullanışlıdır.

Yukarıdaki örnek bir hizmet çalışanındadır ancak önbellekler API'sine sayfalardan da tam olarak erişilebilir.

Firefox, bu API'yi geliştirici sürümünde zaten destekliyor. Bu nedenle, API, hizmet çalışanı uygulamalarının geri kalanıyla birlikte kullanıma sunulacak.

Ancak bu kadar değil. Gelecekte daha fazla önbellek iyileştirmesi yapılacak.

cache.matchAll, Chrome 47'ye geliyor

Bu sayede birden fazla eşleme elde edebilirsiniz:

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

Yukarıdaki ifade, mysite-static-v1 içinde / ile eşleşen her şeyi alır. Önbellek, bağımsız olarak önbelleğe alınabilen URL'ler (ör. farklı Vary üstbilgilerine sahip URL'ler) için URL başına birden fazla girişe sahip olmanızı sağlar.

Firefox, geliştirici sürümünde bu özelliği zaten destekliyor. Bu nedenle, servis çalışanı uygulamalarının geri kalanıyla birlikte kullanıma sunulacak.

Chrome'a yakında eklenecek önbellek sorgu seçenekleri

Aşağıda oldukça standart bir getirme işleyici 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 karşılanır. Ancak /?utm_source=blahblahwhatever için önbellekten gelmeyecek bir istek alırsak Eşleştirme sırasında URL arama dizesini yoksayarak bu sorunun üstesinden gelebilirsiniz:

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

Artık /?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ınmış isteklerde URL'nin arama bölümünü yoksay
  • ignoreMethod: İstek bağımsız değişkeninin yöntemini yoksayar. Böylece, POST isteği önbelleğe alınan bir GET girişiyle eşleşebilir.
  • ignoreVary - önbelleğe alınan yanıtlardaki vary başlığını yoksay

Firefox bunu zaten kendi… Tamam, artık ne yapmanız gerektiğini biliyorsunuz. Ben Kelly'ye tüm bunları Firefox'a eklediği için ne kadar harika olduğunu söyleyin.

Chrome'da önbellek sorgu seçeneklerinin nasıl uygulandığını takip etmek istiyorsanız crbug.com/426309 adresine göz atın.

"Cache API'de neler uyguladık?" başlıklı bir sonraki heyecan verici bölümde görüşmek üzere.