çalışma kutusu-gezinme-önceden yüklemesi

"Gezinme ön yüklemeleriyle hizmet çalışanını hızlandırın" başlıklı makalede, gezinme ön yüklemesinin ne olduğu ve hizmet çalışanı gezinme isteklerini açıkça işlemeyen web uygulamalarına sunduğu avantajlar açık bir şekilde açıklanmaktadır.

Bu modül ne işe yarar?

workbox-navigation-preload, mevcut tarayıcının gezinme ön yüklemeyi destekleyip desteklemediğini kontrol eder. Destekliyorsa etkinleştirmek için otomatik olarak bir activate etkinlik işleyicisi oluşturur.

workbox-core içindeki ve Workbox'un tamamında ağ isteği gönderme işlemlerini yürüten paylaşılan kod da, mevcutsa ön yükleme yanıtından otomatik olarak yararlanacak şekilde güncellendi. Bu, yerleşik stratejilerden herhangi birinin etkinleştirildikten sonra gezinme önyüklemesinden otomatik olarak yararlanabileceği anlamına gelir.

Gezinme ön yüklemelerini kimler etkinleştirmelidir?

Önceden önbelleğe alınmış HTML ile yanıt vererek gezinmeyi zaten yöneten geliştiricilerin (olası bir uygulama kabuğu yedeğiyle yapılandırılmış) gezinme ön yüklemesini etkinleştirmesi gerekmez. Bu özellik, HTML'lerini önceden önbelleğe alamayan ancak sitelerindeki diğer öğelerin önbelleğe alınmasını yönetmek için Workbox'u kullanmak isteyen geliştiriciler için gezinme gecikmesini azaltmayı amaçlar.

Örneğin, uygulama kabuğu kalıbını kullanıyorsanız ve önceden önbelleğe alınmış HTML'yi kullanmak için önceden ayarlanmış bir gezinme rotası varsa gezinme ön yüklemesini etkinleştirmek gereksizdir. Önceden önbelleğe alınmış HTML koşulsuz olarak kullanılacağından, önceden getirme isteğiyle ilişkili ağ yanıtı hiçbir zaman kullanılmaz.

Temel Kullanım

import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst} from 'workbox-strategies';
import {registerRoute, NavigationRoute} from 'workbox-routing';

// Enable navigation preload.
navigationPreload.enable();

// Swap in NetworkOnly, CacheFirst, or StaleWhileRevalidate as needed.
const strategy = new NetworkFirst({
  cacheName: 'cached-navigations',
  plugins: [
    // Any plugins, like `ExpirationPlugin`, etc.
  ],
});

const navigationRoute = new NavigationRoute(strategy, {
  // Optionally, provide a allow/denylist of RegExps to determine
  // which paths will match this route.
  // allowlist: [],
  // denylist: [],
});

registerRoute(navigationRoute);

Tarayıcı desteğiyle ilgili durum nedir?

Şu anda gezinme ön yüklemesini destekleyen tek tarayıcı Google Chrome'dur. enable(), çalışma zamanında tarayıcı desteğini kontrol eder ve gezinme ön yüklemesini yalnızca mevcut tarayıcı desteklediğinde etkinleştirmeye çalışır. Bu nedenle, hizmet çalışanınızda enable() işlevini koşulsuz olarak çağırabilirsiniz.

Bu tarayıcıların gezinme gecikmesi azaltımından yararlanamayacağını bilmelisiniz. Ayrıca, gezinme isteklerini işleme almayan ve gezinme ön yüklemesini kullanmayan bir hizmet işleyici yayınlamanın performans üzerindeki etkilerini dikkatlice ölçmeniz önerilir.

Yöntemler

disable()

workbox-navigation-preload.disable()

Tarayıcı Gezinme Önceden Yüklemeyi destekliyorsa bu işlem özelliği devre dışı bırakır.

enable()

workbox-navigation-preload.enable(
  headerValue?: string,
)

Tarayıcı Gezinme Önceden Yüklemeyi destekliyorsa bu özellik etkinleştirilir.

Parametreler

• headerValue

  dize isteğe bağlı

isSupported()

workbox-navigation-preload.isSupported()

İadeler

• boolean

  Mevcut tarayıcının, gezinme ön yüklemesini etkinleştirmeyi destekleyip desteklemediği.