zorunluluk önbelleğe alma kılavuzu

Andrew Guan

Demián Renzulli

Bazı web sitelerinin, bilgi sahibi olmanız gerekir. Aşağıda bazı örnekler verilmiştir:

• Bir sayfa, hizmet çalışanına Önceden getirme özelliği sayesinde, kullanıcı bir önbellekte zaten mevcut olan belgenin veya sayfanın alt kaynaklarının daha hızlı gezinmeyi sağlar.
• Sayfa, hizmet çalışanından en iyi makaleleri alması ve önbelleğe alması için çevrimdışı olarak kullanılabilir.

Bu tür kritik olmayan görevleri Service Worker'a aktarmak, kullanıcı etkileşimlerine yanıt verme gibi daha acil görevleri daha iyi ele almak için ana iş parçacığı.

Bu kılavuzda, bir web sitesi ile daha iyi iletişim kurmak için sayfadan almak üzere tek yönlü bir iletişim tekniğini standart tarayıcı API'lerini ve Workbox kitaplığını kullanarak hizmet çalışanı için daha uygundur. Bu türleri zorunlu önbelleğe alma kullanım alanları.

Not: Web çalışanlarının ve hizmet çalışanlarının ne zaman kullanılacağına dair kapsamlı bir açıklama için Çalışanlara genel bakış sayfasına göz atın. Ayrıca, diğer yaygın kullanım alanlarıyla ilgili kılavuzlar için Çalışanlarla iletişim kurma serisinin geri kalanında da yararlanabilirsiniz.

Üretim destek kaydı

1-800-Flowers.com, Service Worker'larla birlikte zorunlu önbelleğe alma (önceden getirme) özelliğini uygulamıştır. postMessage() ile ürün ayrıntıları sayfalarına daha hızlı ulaşılmasını sağlamak için kategori sayfalarındaki en popüler öğeleri.

Hangi öğelerin önceden getirileceğine karar vermek için karma bir yaklaşım kullanırlar:

• Sayfa yükleme sırasında hizmet çalışanından en iyi 9 öğeye ilişkin JSON verilerini almasını istiyorlar ve sonuç olarak ortaya çıkan yanıt nesnelerini önbelleğe ekleyin.
• Kalan öğeler için mouseover etkinliği sayesinde Kullanıcı, imleci bir öğenin üzerine getirdiğinde kaynak için "istek üzerine" bir getirme tetikleyebilir.

JSON verilerini depolamak için Cache API'yi kullanırlar yanıtlar:

1-800Flowers.com adresindeki ürün listeleme sayfalarından JSON ürün verileri önceden getiriliyor.

Kullanıcı bir öğeyi tıkladığında, öğeyle ilişkili JSON verileri önbellekten alınır. ve gezinmeyi hızlandırdığı için ağa gitmek zorunda kalmadan.

Workbox'ı kullanma

Workbox, müşterilerinize ileti göndermenin kolay bir yolunu sunar. workbox-window paketi aracılığıyla bir hizmet çalışanı için bu reklamlar pencere bağlamında çalıştırılmak üzere tasarlanmıştır. Diğer Çalışma Kutusu paketlerini tamamlar hizmet çalışanı içinde çalışır.

Sayfayı hizmet çalışanıyla iletişim kurmak için önce kayıtlı hizmet çalışanı:

const wb = new Workbox('/sw.js');
wb.register();

Böylece mesajı alma zahmetine girmeden doğrudan kaydolma, etkinleştirmeyi kontrol etme veya temel iletişim API'sını düşünme:

wb.messageSW({"type": "PREFETCH", "payload": {"urls": ["/data1.json", "data2.json"]}}); });

Service Worker, şunları yapmak için bir message işleyici uygular: bu mesajları dinleyin. İsteğe bağlı olarak bir yanıt döndürebilir ancak bunun gibi durumlarda gerekli değildir:

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'PREFETCH') {
    // do something
  }
});

Tarayıcı API'lerini kullanma

Çalışma Kutusu kitaplığı ihtiyaçlarınız için yeterli değilse pencereden hizmete nasıl uygulayabileceğiniz aşağıda açıklanmıştır tarayıcı API'lerini kullanarak çalışan iletişimi sağlar.

postMessage API sayfadan hizmet çalışanına tek yönlü bir iletişim mekanizması kurmak için kullanılabilir.

Sayfa postMessage() hizmet çalışanı arayüzü:

navigator.serviceWorker.controller.postMessage({
  type: 'MSG_ID',
  payload: 'some data to perform the task',
});

Service Worker, şunları yapmak için bir message işleyici uygular: bu mesajları dinleyin.

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === MSG_ID) {
    // do something
  }
});

{type : 'MSG_ID'} özelliği kesinlikle gerekli değildir, ancak sayfanın Service Worker'a farklı türde talimatlar gönderecektir (yani "önceden getirmek" ve "temizlemek için" depolama alanı"). Hizmet çalışanı, bu işarete göre farklı yürütme yollarına dalabilir.

İşlem başarılı olursa kullanıcı bu işlemin avantajlarından yararlanabilir ancak başarılı değilse ana kullanıcı işlemleri akışı değişmez. Örneğin, 1-800-Flowers.com önbelleğe almayı denediğinde sayfanın, hizmet çalışanının başarılı olup olmadığını bilmesine gerek yoktur. Böylece kullanıcı daha hızlı bir gezinme deneyimi yaşar. Yoksa sayfanın yeni sayfaya gitmesi gerekir. Sadece biraz daha uzun sürecek.

Basit bir önceden getirme örneği

Zorunlu önbelleğe almanın en yaygın uygulamalarından biri, önceden getirme işlemidir. Yani gezinmeyi hızlandırmak amacıyla, kullanıcı belirli bir URL'ye gitmeden önce ilgili URL'ye ilişkin kaynakları kullanır.

Sitelerde önceden getirmenin farklı yolları vardır:

• Sayfalarda Bağlantı önceden getirme etiketlerini kullanma: Kaynaklar beş dakika boyunca tarayıcı önbelleğine alınır, ardından kaynak için normal Cache-Control kuralı geçerlidir.
• Önceki tekniği, hizmette çalışma zamanı önbelleğe alma stratejisiyle tamamlamak önceden getirme işleminin ömrünü uzatmak için "çalışan bu sınırı aşmıyor.

Belgelerin veya belirli öğelerin (JS, CSS vb.) kullanın. Bu teknikler en iyi yaklaşımdır.

Ek mantık gerekiyorsa. Örneğin, önceden getirme kaynağını (bir JSON dosyası veya sayfası) dahili URL’lerini getirmek için bu görevi tamamen hizmet çalışanıdır.

Bu tür işlemleri Service Worker'a yetkilendirmenin avantajları şunlardır:

• Getirme ve getirme sonrası işlemenin ağır yükünü hafifletmek daha sonra) ikincil ileti dizisine aktarmanızı sağlar. Bunu yaparak, ana iş parçacığının daha önemli konuları ele alması kullanıcı etkileşimlerine yanıt verme gibi görevlerle ilgilidir.
• Birden fazla istemcinin (ör. sekmeler) ortak bir işlevi yeniden kullanmasına izin verme ve hatta hizmetini kullanarak aynı anda geri bildirim gönderebilirsiniz.

Ürün ayrıntıları sayfalarını önceden getir

postMessage() hizmetini şurada ilk kullan: Service Worker arayüzünü kontrol edin ve önbelleğe alınacak bir dizi URL iletin:

navigator.serviceWorker.controller.postMessage({
  type: 'PREFETCH',
  payload: {
    urls: [
      'www.exmaple.com/apis/data_1.json',
      'www.exmaple.com/apis/data_2.json',
    ],
  },
});

Service Worker'da şu işlemler için bir message işleyici uygulayın: herhangi bir etkin sekme tarafından gönderilen iletileri yakalayın ve işleyin:

addEventListener('message', (event) => {
  let data = event.data;
  if (data && data.type === 'PREFETCH') {
    let urls = data.payload.urls;
    for (let i in urls) {
      fetchAsync(urls[i]);
    }
  }
});

Önceki kodda, aynı işlemi yinelemek için fetchAsync() adında küçük bir yardımcı oluşturup her biri için getirme isteği gönderin:

async function fetchAsync(url) {
  // await response of fetch call
  let prefetched = await fetch(url);
  // (optionally) cache resources in the service worker storage
}

Yanıt alındığında kaynağın önbelleğe alma üst bilgilerini kullanabilirsiniz. Birçok durumda ürün ayrıntısı sayfalarında olduğu gibi kaynaklar önbelleğe alınmaz (yani Cache-control no-cache başlığı). Bu gibi durumlarda, getirilen kaynağı hizmet çalışanı önbelleğinde depolar. Bunun ek bir faydası da çevrimdışı senaryolarda sunulacak.

JSON verilerinin ötesinde

JSON verileri bir sunucu uç noktasından getirildiğinde genellikle Bu birinci düzeyle ilişkili bir resim veya diğer uç nokta verileri gibi önceden getirmeye değer dışı verilerdir.

Örneğimizde, döndürülen JSON verilerinin bir market alışverişi sitesinin bilgileri olduğunu varsayalım:

{
  "productName": "banana",
  "productPic": "https://cdn.example.com/product_images/banana.jpeg",
  "unitPrice": "1.99"
 }

Ürün listesini yinelemek için fetchAsync() kodunu değiştirin ve hero resmi önbelleğe alın her biri:

async function fetchAsync(url, postProcess) {
  // await response of fetch call
  let prefetched = await fetch(url);

  //(optionally) cache resource in the service worker cache

  // carry out the post fetch process if supplied
  if (postProcess) {
    await postProcess(prefetched);
  }
}

async function postProcess(prefetched) {
  let productJson = await prefetched.json();
  if (productJson && productJson.product_pic) {
    fetchAsync(productJson.product_pic);
  }
}

404 gibi durumlar için bu koda bazı istisna işlemeler ekleyebilirsiniz. Ancak önceden getirme işlemi için bir Service Worker kullanmanın güzel tarafı, ile özetlemenize yardımcı olur. Arkadaş Bitkiler projesinde daha ayrıntılı bir daha esnek ve geçerli olduğu verilerle ayrıştırılmış hale getirmek üzere, önceden ele alacağız. Kendinize sınır koyabilirsiniz.

Dikkat: Önceden getirme teknikleri, hemen ihtiyaç duyulmayan kaynaklar için fazladan bayt tüketir. Bu nedenle, bu tekniklerin dikkatlice uygulanması gerekir. yalnızca kullanıcıların ihtiyaç duyacağından eminseniz kaynakları önceden getirin. Kullanıcılar yavaş bağlantılara sahip olduğunda önceden getirme işlemi yapmaktan kaçının. Bu durumu Network Information API ile tespit edebilirsiniz.

Sonuç

Bu makalede, sayfa ve hizmet arasında tek yönlü iletişimin yaygın bir kullanım alanını ele aldık. çalışan: zorunlu önbelleğe alma. Ele alınan örnekler yalnızca, Çevik yaklaşımın Bu kalıbı kullanmak ve aynı yaklaşım diğer kullanım alanlarına da uygulanabilir. En çok okunan makaleleri çevrimdışı okuma, yer işareti ekleme ve diğerleri için isteğe bağlı olarak önbelleğe alma.

Sayfa ve hizmet çalışanı iletişiminin daha fazla kalıbı için aşağıdaki kaynaklara göz atın:

• Yayın güncellemeleri: Bilgilendirmek için hizmet çalışanından sayfanın çağrılması Önemli güncellemeler hakkında (ör. web uygulamasının yeni bir sürümünün mevcut olması)
• İki yönlü iletişim: Bir görevi bir hizmet çalışanına delege etme (ör. ve sayfayı ilerleme durumu hakkında bilgilendirmek.