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

"Gezinme Ön Yüklemeleri ile Hizmet Çalışanını Hızlandırma", gezinme ön yüklemesinin ne olduğunu ve hizmet çalışanı gezinme isteklerini açıkça işlemediği web uygulamalarına sunduğu avantajları çok iyi açıklıyor.

Bu modül ne işe yarıyor?

workbox-navigation-preload, mevcut tarayıcının gezinme ön yüklemesini destekleyip desteklemediğini görmek için çalışma zamanında kontrol gerçekleştirir. Destekleniyorsa bu özelliği etkinleştirmek için otomatik olarak bir activate etkinlik işleyicisi oluşturur.

workbox-core içindeki ve Workbox'ın tamamında ağ istekleri gönderme işlemlerini gerçekleştiren paylaşılan kod da (varsa) bir önceden yükleme yanıtından otomatik olarak yararlanacak şekilde güncellenmiştir. Bu, tüm yerleşik stratejilerin, etkinleştirildikten sonra gezinme önceden yükleme özelliğinden otomatik olarak yararlanabileceği anlamına gelir.

Gezinmeyi önceden yüklemeyi kimler etkinleştirmelidir?

Önceden önbelleğe alınmış HTML ile (uygulama Kabuğu yedeğiyle yapılandırılmış olabilir) yanıt vererek gezinmeleri halihazırda yöneten geliştiricilerin gezinme önceden yüklemeyi etkinleştirmelerine gerek yoktur. Bu özellik, HTML'lerini önbelleğe alamayan ancak yine de sitelerindeki diğer öğelerin önbelleğe alınmasını sağlamak için Workbox'ı kullanmak isteyen geliştiriciler için gezinme gecikmesini azaltmak amacıyla tasarlanmıştır.

Örneğin, Uygulama Kabuğu kalıbını izliyorsanız ve önceden önbelleğe alınmış HTML'yi kullanacak şekilde ayarlanmış bir gezinme yolunuz varsa gezinmenin önceden yüklenmesini etkinleştirmek boşa harcanır. Önbelleğe alınan HTML koşulsuz olarak kullanılacağından, önceden yükleme 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ğinin hikayesi nedir?

Şu anda, gezinme önceden yüklemeyi destekleyen tek tarayıcı Google Chrome'dur. enable(), çalışma zamanında tarayıcı desteğini kontrol eder ve yalnızca mevcut tarayıcı destekliyorsa gezinme önceden yüklemeyi etkinleştirmeye çalışır. Bu nedenle, hizmet çalışanınızda enable() hizmetini koşulsuz olarak güvenle arayabilirsiniz.

Bu tarayıcıların, gezinme gecikmesinin azalmasından faydalanamayacağını bilmenizi isteriz. Ayrıca, gezinme isteklerini işlemeyen ve gezinme ön yüklemesi kullanmayan bir hizmet çalışanı göndermenin performans sonuçlarını dikkatlice ölçmeniz önerilir.

workbox-navigation-preload.disable()

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

workbox-navigation-preload.isSupported()