window dışında yaptığımız tüm bu çalışmalara rağmen Cache örneğe yalnızca Service Worker kapsamında erişilebildiğini düşünebilirsiniz. Aslında Cache örneklerine hem hizmet çalışanı kapsamında hem de web uygulamanızın geleneksel kodunda (window içinde çalışan) erişebilirsiniz. Bu, kullanıcının doğrudan bir Service Worker önbelleğiyle etkileşimde bulunmasını veya kullanıcı arayüzünü önbellek durumuna göre güncellemesini kolaylaştırır.
Potansiyel kullanım alanlarından biri, kullanıcının daha sonra okumak isteyebileceği ancak o sırada çevrimdışı olabileceğini bildiği sayfalar için "çevrimdışına kaydet" özelliği sunmaktır. Aşağıdaki Glitch yerleştirmesinde, bu işlemin Workbox ile nasıl yapılacağı gösterilmektedir.
Yukarıdaki yerleştirmede, "çevrimdışı için kaydet" düğmesi tıklandığında app.js komut dosyasının window bağlamından çevrimdışı önbelleğe yazdığını görebilirsiniz. Service Worker'da, sayfanın statik öğeleri çevrimdışı erişim için önbelleğe alınır. NetworkOnly stratejisi, önbelleğe alınan sayfalar için çevrimdışı erişimi yöneten özel bir işleyiciyle kullanılır ve NavigationRoute öğesine iletilir.
Arıza yerleştirmedeki işlevselliği test etmek için aşağıdakileri yapın:
- Yeni bir tarayıcı penceresi açın ve https://save-for-offline-test.glitch.me/ adresine gidin
- Çevrimdışı okuma listesine ekle düğmesini tıklayın.
- Tarayıcınızın geliştirici araçlarını Firefox veya Chrome'da açın. Chrome kullanıyorsanız uygulama paneline gidin. Firefox'ta depolama paneline gidin.
- Her iki tarayıcının geliştirici aracında da sol bölmede bir Önbellek Depolama Alanı öğesi görürsünüz. Genişletmek için tıklayın. Çevrimdışı-önbellek girişinde, sağ taraftaki bölmede yeni eklediğiniz sayfa URL'sini görmeniz gerekir.
- Sayfanın altındaki başka herhangi bir sayfa bağlantısını tıklayın.
- Çevrimdışı bağlantıyı simüle etmek için iki tarayıcıda da çevrimdışı modu açıp kapatın.
- Çevrimdışı önbelleğe eklediğiniz sayfanın bağlantısını tıklayın. İnternete bağlı olmadığınızda bile gösterilecek.
- Çevrimdışı önbelleğe eklemediğiniz bir sayfaya ait bağlantıyı tıklayın. İstek başarısız olur.
window içinde Cache örnekleriyle çalışmak için tek kullanım alanı bu değildir. Örneğin, kullanıcının belirli bir işlemi gerçekleştirmesi gerektiğini bildiğiniz öğeleri tahmine dayalı olarak önceden getirebilir ve önbelleğe alabilirsiniz. Bu, söz konusu öğelerin isteğe bağlı olarak indirilmesindeki gecikmeyi azaltır veya önler.
Faydalı olabilecek başka kullanım alanları da vardır. Service Worker yokken Cache örnekleriyle etkileşim kurabileceğiniz için bu örneklerin hepsinde örnek yükleme gerekmez.