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 önemli bir parçası olsa da tarayıcının, hizmet çalışanının başlatılmasını ve fetch etkinlik geri çağırmalarını etkinleştirmesini beklemesi de gerekebilir.
Önyükleme süresi cihaza ve özelliklerine bağlı olarak değişir, ancak bir CPU yavaş olduğunda veya ortam koşulları nedeniyle kısıtlanmış bir durumda çalışırken bu süre önemli olabilir. Bazen yarım saniyeye kadar çıkabilir. Gezinme yanıtlarınız bir Cache örneğinden sunulduğunda, ağdan kaçınarak elde edeceğiniz performans kazancı büyük olasılıkla bu başlatma süresine göre ağır basar. Ağa giden navigasyon istekleri için Service Worker eklendiğinde algılanabilir bir gecikme yaşanabilir.
Gezinme önyüklemesini gir
Gezinme önceden yükleme, hizmet çalışanı önyükleme süresinden kaynaklanan gecikmeyi çözen bir hizmet çalışanı özelliğidir. Gezinme önceden yüklemesi etkinleştirilmediğinde hem hizmet çalışanının önyüklemesi hem de işlediği gezinme isteği ardışık olarak gerçekleşir:
Bu ideal bir yöntem değildir; ancak gezinme ön yüklemesini etkinleştirerek sorunu düzeltebilirsiniz. Bu özellik, hizmet çalışanının başlatılmasını ve gezinme isteğinin eşzamanlı olarak gerçekleşmesini sağlar:
Gezinme önceden yükleme, hizmet çalışanları kullanan siteler için mükemmel bir performans optimizasyonu olsa da her durumda etkinleştirmeniz gereken bir özellik değildir. Önbellek, uygulama kabuğu işaretlemesinin gezinme isteğini herhangi bir gezinme gecikmesi olmadan sunduğundan özellikle önceden önbelleğe alınmış bir uygulama kabuğu kullanan sitelerde gezinmenin önceden yüklenmesi gerekmez. Bu durumlarda, önceden yüklenmiş yanıt boşa gider ve bu hiç iyi değildir.
Gezinmeyi önceden yükleme özelliğini kullanmak için en iyi zaman, web sitesinin HTML'yi önbelleğe alamadığı zamandır. İşaretleme yanıtlarının dinamik olduğu ve kimlik doğrulama durumu gibi unsurlara göre farklılık gösterdiği web sitelerini düşünün. Bunlar için gezinme isteklerinde ağ öncelikli (veya yalnızca ağ) bir strateji kullanılabilir ve gezinme önceden yükleme özelliği bu noktada büyük bir fark yaratabilir.
Çalışma kutusunda gezinme önceden yükleme özelliğini kullanma
Gezinme önceden yükleme özelliğini doğrudan Workbox tarafından desteklenmeyen bir hizmet çalışanında kullanmak karmaşıktır. Öncelikle, bu özellik tüm tarayıcılarda desteklenmez. İkinci olarak, bunu doğru bir şekilde yapmanız zor olabilir. Bunu nasıl doğrudan kullanabileceğinizi Jake Archibald'ın bu harika açıklayıcı kitabından öğrenebilirsiniz.
Çalışma kutusu, workbox-navigation-preload modülünün enable yöntemi gerekli özellik destek kontrollerini yaptığından ve sizin için etkinleştirmek üzere activate etkinlik işleyiciyi oluşturduğundan, gezinme önceden yüklemesinin kullanımını basitleştirir.
Buradan, gezinme isteklerini ağ öncelikli bir strateji işleyicisi ile işlemek için Workbox'ı kullanarak tarayıcıları desteklemede gezinme önceden yüklemenin faydaları 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);
Gezinme önceden yüklemesi etkinleştirildiğinde Workbox, NetworkFirst veya NetworkOnly stratejilerini kullanan gezinme isteklerine önceden yüklenmiş yanıtla yanıt verir.
Gezinme önceden yüklemenin çalışıp çalışmadığını nasıl anlarım?
Workbox, geliştirme derlemelerinde ne işe yaradığı hakkında çok şey kaydeder. Çalışma kutusunda gezinme önceden yüklemenin çalışıp çalışmadığını kontrol etmek istiyorsanız, gezinme isteği sırasında konsolu destekleyen bir tarayıcıda açın. Bu işlemin ardından aşağıdaki bilgileri içeren bir günlük mesajı görürsünüz:
Bu günlük kaydı, üretim derlemelerinde varsayılan olarak görünmez. Bu nedenle, hizmet çalışanınızı üretime dağıtırken bunu görmezsiniz. Ancak, diğer şeylerin yanı sıra gezinme ön yüklemesinin çalıştığını doğrulamanın mükemmel bir yoludur.
Önceden yüklenmiş yanıtları özelleştirme
Gezinme önceden yükleme özelliğini kullanırken, bir uygulama arka ucundaki önceden yüklenmiş yanıtların özelleştirilmesinin gerekli olduğu senaryolar olabilir. Ağdan kısmi içerik akışı sağlayan hizmet çalışanları, bu özelliğin kullanışlı olabileceği senaryolardan biridir.
Bu gibi durumlarda, önceden yükleme isteklerinin varsayılan true değerine sahip bir Service-Worker-Navigation-Preload üstbilgisiyle gönderildiğini bilmek faydalıdır:
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 göre değiştirebilirsiniz. Başlığın varsayılan değeri herhangi bir nedenle sorunluysa bu değeri pencere bağlamında değiştirebilirsiniz. Ancak, sunucuda bu başlığı okumak için yapacağınız tüm çalışmaların size bağlı olduğunu ve Workbox'ın kapsamı dışında olduğunu unutmayın.
Sonuç
Gezinmenin önceden yüklenmesinin doğru şekilde yapılması, doğrudan kullanıldığında zordur ancak hizmet çalışanının tarayıcıyı gezinme istekleri yapmaktan alıkoymaması için buna değer. Workbox sayesinde, gezinme ön yüklemesinden çok daha az işle yararlanabilirsiniz. workbox-navigation-preload modülü hakkında daha fazla bilgi edinmek için referans dokümanlarına göz atın.