Anında gezinme deneyimleri

Geleneksel önceden getirme tekniklerini Service Worker'larla tamamlama.

Demián Renzulli

Gilberto Cocchi

Jeff Posnick

Bir sitede bir görevin gerçekleştirilmesi genellikle birkaç adımdan oluşur. Örneğin, bir e-ticaret web sitesinden ürün satın almak, ürün aramayı, sonuç listesinden ürün seçmeyi, öğeyi alışveriş sepetine eklemeyi ve ödeme yaparak işlemi tamamlamayı içerebilir.

Teknik bir deyişle, farklı sayfalar arasında gezinmek gezinme isteğinde bulunmak anlamına gelir. Genel bir kural olarak, gezinme isteği için HTML yanıtını önbelleğe almak üzere uzun ömürlü Cache-Control üstbilgilerini kullanmak istemezsiniz. HTML'nin, sonraki ağ istekleri zinciriyle birlikte (makul miktarda) yeni olduğundan emin olmak için bu URL'lerin normalde Cache-Control: no-cache ile ağ üzerinden karşılanmaları gerekir. Kullanıcı yeni bir sayfaya gittiği her seferinde ağa karşı dönmek zorunda kalmak, maalesef her gezinmenin yavaş olabileceği, en azından güvenilir şekilde hızlı olmayacağı anlamına gelir.

Bu istekleri hızlandırmak için kullanıcının işlemini tahmin edebiliyorsanız, bu sayfaları ve öğeleri önceden isteyebilir ve kullanıcı bu bağlantıları tıklayana kadar kısa bir süre için bunları önbellekte tutabilirsiniz. Bu teknik önceden getirme olarak adlandırılır ve genellikle sayfalara <link rel="prefetch"> etiketlerinin eklenmesiyle uygulanır. Bu yöntem, önceden getirme işlemi yapılacak kaynağı belirtir.

Bu kılavuzda, geleneksel önceden getirme tekniklerinin tamamlayıcısı olarak Service Worker kullanmanın farklı yollarını inceleyeceğiz.

Üretim durumları

MercadoLibre, Latin Amerika'daki en büyük e-ticaret sitesidir. Bunlar, gezinmeleri hızlandırmak için akışın bazı bölümlerine dinamik olarak <link rel="prefetch"> etiketleri ekler. Örneğin, listeleme sayfalarında kullanıcı, listenin en altına kaydırdığı anda bir sonraki sonuç sayfasını getirir:

Önceden getirilen dosyalar "En düşük" öncelikte istenir ve (kaynağın önbelleğe alınabilir olup olmamasına bağlı olarak) HTTP önbelleğinde veya bellek önbelleğinde, tarayıcıya göre değişen bir süre boyunca depolanır. Örneğin, Chrome 85'ten itibaren bu değer 5 dakikadır. Kaynaklar beş dakika tutulur. Bu sürenin sonunda kaynak için normal Cache-Control kuralları uygulanır.

Service Worker önbelleğe alma işlemini kullanmak, önceden getirme kaynaklarının ömrünü beş dakikalık süreyi aşacak şekilde uzatmanıza yardımcı olabilir.

Örneğin, İtalya spor portalı Virgilio Sport, ana sayfasındaki en popüler yayınları önceden getirmek için Service Worker'ları kullanır. Ayrıca, 2G bağlantısı olan kullanıcıların önceden getirme işlemini önlemek için Network Information API'yi de kullanırlar.

Bunun sonucunda, Virgilio Sport'un 3 haftalık gözlem sonucunda, makalelerde gezinme için yükleme sürelerinin %78, makale gösterimlerinin sayısının ise %45 arttığını gördük.

Workbox ile önbelleğe almayı uygulama

Aşağıdaki bölümde Workbox'ı kullanarak Service Worker'a tamamen yetki vererek <link rel="prefetch"> için tamamlayıcı veya onun yerine kullanılacak olan farklı önbelleğe alma tekniklerinin Service Worker'da nasıl uygulanacağını göstereceğiz.

1. Statik sayfaları ve sayfa alt kaynaklarını önbelleğe alın

Önbelleğe alma, hizmet çalışanının yükleme sırasında dosyaları önbelleğe kaydetme özelliğidir.

Aşağıdaki durumlarda, önceden getirme ile benzer bir hedefe ulaşmak için önbelleğe alma kullanılır: gezinmeleri hızlandırmak.

Statik sayfaları önbelleğe alma

Derleme sırasında (ör. about.html, contact.html) veya tamamen statik sitelerde oluşturulan sayfalar için sitenin dokümanları önbellek listesine eklenebilir, böylece kullanıcı bu dokümanlara her eriştiğinde bu dokümanlar önbellekte zaten hazır olur:

workbox.precaching.precacheAndRoute([
  {url: '/about.html', revision: 'abcd1234'},
  // ... other entries ...
]);

Önbelleğe alma sayfası alt kaynakları

Sitenin farklı bölümlerinin kullanabileceği statik öğelerin (ör. JavaScript, CSS vb.) önbelleğe alınması, genel bir en iyi uygulamadır ve önceden getirme senaryolarında ekstra destek sağlayabilir.

Bir e-ticaret sitesinde gezinmeyi hızlandırmak için listeleme sayfalarındaki <link rel="prefetch"> etiketlerini kullanarak listeleme sayfasındaki ilk birkaç ürünün ürün ayrıntıları sayfalarını önceden getirebilirsiniz. Ürün sayfası alt kaynaklarını zaten önceden önbelleğe aldıysanız bu işlem, gezinmeyi daha da hızlandırabilir.

Bunu uygulamak için:

• Sayfaya bir <link rel="prefetch"> etiketi ekleyin:

 <link rel="prefetch" href="/phones/smartphone-5x.html" as="document">

• Sayfa alt kaynaklarını Service Worker'da önbellek listesine ekleyin:

workbox.precaching.precacheAndRoute([
  '/styles/product-page.ac29.css',
  // ... other entries ...
]);

2. Önceden getirme kaynaklarının ömrünü uzat

Daha önce belirtildiği gibi <link rel="prefetch">, kaynakları sınırlı bir süre boyunca HTTP önbelleğinden alıp saklar. Bu sürenin sonunda da kaynağın Cache-Control kuralları uygulanır. Chrome 85 sürümünden itibaren bu değer 5 dakikadır.

Service Worker'lar, önceden getirme sayfalarının kullanım ömrünü uzatmanıza olanak tanırken aynı zamanda bu kaynakları çevrimdışı kullanıma uygun hale getirme avantajını da sunar.

Önceki örnekte, bir ürün sayfasını önceden getirmek için kullanılan <link rel="prefetch">, bir Workbox çalışma zamanı önbelleğe alma stratejisi ile tamamlanabilir.

Bunu uygulamak için:

• Sayfaya bir <link rel="prefetch"> etiketi ekleyin:

 <link rel="prefetch" href="/phones/smartphone-5x.html" as="document">

• Aşağıdaki istek türleri için hizmet çalışanında, çalışma zamanı önbelleğe alma stratejisini uygulayın:

new workbox.strategies.StaleWhileRevalidate({
  cacheName: 'document-cache',
  plugins: [
    new workbox.expiration.Plugin({
      maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
    }),
  ],
});

Bu durumda, eski "yeniden doğrula" stratejisini kullanmayı tercih ettik. Bu stratejide, sayfalar paralel olarak hem önbellekten hem de ağdan istenebilir. Yanıt, varsa önbellekten, aksi takdirde ağdan gelir. Önbellek, her başarılı istek için ağ yanıtıyla her zaman güncel tutulur.

3. Önceden getirme için hizmet çalışanına yetki verin

Çoğu durumda en iyi yaklaşım <link rel="prefetch"> kullanmaktır. Etiket, önceden getirme işlemini mümkün olduğunca verimli hale getirmek için tasarlanmış bir kaynak ipucudur.

Yine de bazı durumlarda bu görevin tamamını Service Worker'a devretmek daha iyi olabilir. Örneğin, istemci tarafında oluşturulan bir ürün listeleme sayfasındaki ilk birkaç ürünü önceden getirmek için API yanıtına göre sayfaya dinamik olarak birkaç <link rel="prefetch"> etiketi yerleştirilmesi gerekebilir. Bu durum, sayfanın ana iş parçacığında kısa bir süre için zaman alabilir ve uygulamayı daha zor hale getirebilir.

Bu gibi durumlarda, önceden getirme görevi hizmet çalışanına tamamen yetki vermek için bir "hizmet çalışanı iletişim stratejisi sayfası" kullanın. Bu iletişim türü, worker.postMessage() kullanılarak elde edilebilir:

Çalışma Kutusu Penceresi paketi, yapılan temel çağrının birçok ayrıntısını soyutlayarak bu tür iletişimi basitleştirir.

Workbox Penceresi ile önceden getirme aşağıdaki şekilde uygulanabilir:

• Sayfada: Mesaj türünü ve önceden getirilecek URL'lerin listesini ileten hizmet çalışanını çağırın:

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

const prefetchResponse = await wb.messageSW({type: 'PREFETCH_URLS', urls: […]});

• Service Worker'da: Her URL'nin önceden yüklenmesi için bir fetch() isteği yayınlamak üzere mesaj işleyici uygulayın:

addEventListener('message', (event) => {
  if (event.data.type === 'PREFETCH_URLS') {
    // Fetch URLs and store them in the cache
  }
});