Bir hizmet çalışanı fetch etkinliklerini işlediğinde tarayıcı, hizmet çalışanının yanıt vermesini bekler. Ağ isteğinin gecikmesi, beklemenin büyük bir parçası olsa da tarayıcının hizmet çalışanının önyüklenmesini ve fetch etkinlik geri çağırmalarını tetiklemesini beklemesi gerekebilir.
Açılma süresi, cihaza ve yeteneklerine göre değişir. Ancak uzun bir süre, bir CPU yavaş olduğunda veya ortam koşulları nedeniyle sınırlanmış bir durumda çalışırken bazen yarım saniyeye kadar sürebilir. Gezinme yanıtlarınız bir Cache örneğinden sunulduğunda, ağdan kaçınmanın performans kazancı, bu başlatma süresinden daha ağır basabilir. Ağa giden gezinme isteklerinde bir hizmet çalışanının tanıtılması algılanabilir bir gecikme oluşturabilir.
Gezinme önyüklemesine gir
Gezinme ön yüklemesi, hizmet çalışanı önyükleme süresinin neden olduğu gecikmeyi çözen bir hizmet çalışanı özelliğidir. Gezinmeyi önceden yükleme özelliği etkinleştirilmediğinde, hem hizmet çalışanının başlatması hem de işlediği gezinme isteği art arda gerçekleşir:
Bu ideal bir çözüm değildir ancak navigasyonu önceden yüklemeyi etkinleştirerek sorunu düzeltebilirsiniz. Bu işlem, hizmet çalışanının başlatılması ve gezinme isteğinin eşzamanlı olarak gerçekleşmesini sağlar:
Gezinmenin önceden yüklenmesi, hizmet çalışanları kullanan siteler için mükemmel bir performans optimizasyonu olsa da her durumda etkinleştirmeniz gereken bir özellik değildir. Özellikle, önceden önbelleğe alınmış bir uygulama kabuğunu kullanan siteler, gezinmenin önceden yüklenmesini gerektirmez çünkü önbellek, uygulama kabuğu işaretlemesi için gezinme isteğini herhangi bir gezinme gecikmesi olmadan sunar. Böyle durumlarda, önceden yüklenmiş yanıt israfa neden olur. Bu da pek iyi bir şey değildir.
Gezinmenin önceden yüklenmesini kullanmak için en iyi zaman, bir web sitesinin HTML'yi önbelleğe alamadığı zamandır. İşaretleme yanıtlarının dinamik olduğu ve kimlik doğrulama durumu gibi şeylere göre değiştiği web sitelerini düşünün. Bunlar için gezinme istekleri, ağ öncelikli (veya yalnızca ağ) bir strateji kullanabilir ve bu durumda gezinme önceden yüklemesi büyük bir fark yaratabilir.
Workbox'ta gezinmeyi önceden yükleme özelliğini kullanma
Gezinmeyi doğrudan Workbox tarafından desteklenmeyen bir hizmet çalışanında önceden yüklemek zahmetli bir işlemdir. Öncelikle, tüm tarayıcılarda desteklenmez. İkincisi, hedefi doğru şekilde belirlemek zor olabilir. Gemini'ın nasıl kullanılacağını doğrudan Jake Archibald'ın bu etkileyici anlatıcısında öğrenebilirsiniz.
workbox-navigation-preload modülünün enable yöntemi gerekli özellik desteği kontrollerini sağladığından ve sizin için etkinleştirmek üzere activate etkinlik işleyicisi oluşturduğundan Workbox, gezinmenin önceden yüklenmesinden yararlanmayı basitleştirir.
Buradan, gezinme isteklerini ağ öncelikli bir strateji işleyici ile ele almak için Workbox'ın kullanılması sayesinde, gezinmeyi önceden yüklemenin avantajları, desteklenen tarayıcılarda ortaya çıkar:
import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst, StaleWhileRevalidate} from 'workbox-strategies';
import {registerRoute, NavigationRoute, Route} from 'workbox-routing';
import {precacheAndRoute} from 'workbox-precaching';
// Precache the manifest
precacheAndRoute(self.__WB_MANIFEST);
// Enable navigation preload
navigationPreload.enable();
// Create a new navigation route that uses the Network-first, falling back to
// cache strategy for navigation requests with its own cache. This route will be
// handled by navigation preload. The NetworkOnly strategy will work as well.
const navigationRoute = new NavigationRoute(new NetworkFirst({
cacheName: 'navigations'
}));
// Register the navigation route
registerRoute(navigationRoute);
// Create a route for image, script, or style requests that use a
// stale-while-revalidate strategy. This route will be unaffected
// by navigation preload.
const staticAssetsRoute = new Route(({request}) => {
return ['image', 'script', 'style'].includes(request.destination);
}, new StaleWhileRevalidate({
cacheName: 'static-assets'
}));
// Register the route handling static assets
registerRoute(staticAssetsRoute);
Gezinmeyi önceden yükleme özelliği etkinleştirildiğinde Workbox, NetworkFirst veya NetworkOnly stratejilerini kullanan gezinme isteklerine önceden yüklenmiş yanıtla yanıt verir.
Gezinmenin önceden yüklenmesinin çalışıp çalışmadığını nasıl anlayabilirim?
Geliştirme derlemelerinde, Workbox ne yaptığı hakkında birçok kayıt kaydeder. Workbox'ta gezinme ön yüklemesinin çalışıp çalışmadığını kontrol etmek istiyorsanız gezinme isteği sırasında konsolu destekleyen bir tarayıcıda açın. Bunu yaptığınızda şu kadar günlük olduğunu belirten bir günlük mesajı görürsünüz:
Bu günlük kaydı varsayılan olarak üretim derlemelerinde görünmez. Bu nedenle, hizmet çalışanınızı üretime dağıttığınızda bunu görmezsiniz. Bununla birlikte, gezinme önceden yüklenmesinin (diğer unsurların yanı sıra) çalıştığını doğrulamak için muhteşem bir yöntemdir.
Önceden yüklenmiş yanıtları özelleştirme
Gezinmenin önceden yüklenmesini kullanırken önceden yüklenmiş yanıtları bir uygulama arka ucunda özelleştirmenin gerekli olduğu senaryolar olabilir. Ağdan kısmi içerik akışı sağlayan Service Worker'lar, bu yöntemin faydalı olabileceği bir senaryodur.
Aşağıdaki gibi durumlarda, önceden yükleme isteklerinin varsayılan true değerine ayarlanmış bir Service-Worker-Navigation-Preload başlığıyla gönderildiğini bilmek önemlidir:
Service-Worker-Navigation-Preload: true
Ardından, seçtiğiniz uygulama arka ucunda bu başlığı kontrol edebilir ve yanıtı ihtiyaçlarınıza uyacak şekilde değiştirebilirsiniz. Üstbilginin varsayılan değeri herhangi bir nedenle sorunluysa değeri pencere bağlamında değiştirebilirsiniz. Sunucuda bu başlığı okumak için yapacağınız tüm işlerin size bağlı olduğunu ve Workbox'ın kapsamı dışında olduğunu unutmayın.
Sonuç
Navigasyon önceden yükleme işlemini doğrudan kullanıldığında doğru bir şekilde yapmak zordur, ancak bir Service Worker'ın tarayıcıyı gezinme istekleri yapmasını engellemek için bu çabaya değer. Workbox sayesinde, gezinmenin önceden yüklenmesinden çok daha az çabayla yararlanabilirsiniz. workbox-navigation-preload modülü hakkında daha fazla bilgi için referans belgelerine göz atın.