Web uygulaması manifest dosyalarını, hizmet çalışanlarını ve hizmet çalışanı önbelleğini incelemek, değiştirmek ve hata ayıklamak için Uygulama panelini kullanın.
Progresif Web Uygulamaları (PWA'lar), web teknolojisi kullanılarak oluşturulmuş modern, yüksek kaliteli uygulamalardır. PWA'lar, iOS, Android ve masaüstü uygulamalarına benzer özellikler sunar. Bunları şöyle sıralayabiliriz:
- Kararsız ağ koşullarında bile güvenilirdir.
- Mac OS X'teki Uygulamalar klasörü, Windows'taki Başlat menüsü ve Android ile iOS'teki ana ekran gibi işletim sistemi yüzeylerini başlatmak için yüklenir.
- Etkinlik değiştiricilerde, Spotlight gibi cihaz arama motorlarında ve içerik paylaşımı sayfalarında gösterilir.
Bu kılavuzda yalnızca Uygulama panelinin Progresif Web Uygulaması özellikleri ele alınmaktadır. Diğer panellerle ilgili yardıma ihtiyacınız varsa bu kılavuzun son bölümü olan Diğer uygulama paneli kılavuzları bölümüne göz atın.
Özet
- Web uygulaması manifest'inizi incelemek için Manifest sekmesini kullanın.
- Hizmet çalışanlarıyla ilgili çeşitli görevler (ör. bir hizmetin kaydını iptal etme veya güncelleme, push etkinliklerini taklit etme, çevrimdışı olma veya bir hizmet çalışanını durdurma) için Hizmet Çalışanları sekmesini kullanın.
- Önbellek Depolama Alanı sekmesinden hizmet çalışanı önbelleğinizi görüntüleyin.
- Depolama alanını temizle sekmesinden tek bir düğme tıklamasıyla bir hizmet çalışanının kaydını silin ve tüm depolama alanını ve önbellekleri temizleyin.
Web uygulaması manifesti
Kullanıcılarınızın uygulamanızı Mac OS X'teki Uygulamalar klasörüne, Windows'taki Başlat menüsüne ve Android ile iOS'teki ana ekrana ekleyebilmesi için bir web uygulaması manifest'ine ihtiyacınız vardır. Manifest, uygulamanın ana ekranda nasıl görüneceğini, ana ekrandan başlatıldığında kullanıcıyı nereye yönlendireceğini ve uygulamanın başlatıldığında nasıl görüneceğini tanımlar.
Manifestinizi oluşturduktan sonra Uygulama panelinin Manifest sekmesini kullanarak inceleyebilirsiniz.
- Manifest kaynağına bakmak için Uygulama Manifesti etiketinin altındaki bağlantıyı (yukarıdaki ekran görüntüsünde
manifest.webmanifest) tıklayın. - Kimlik ve Sunuş bölümleri, manifest kaynağındaki alanları daha kullanıcı dostu bir şekilde gösterir.
- Protokol İşleyicileri bölümünde, PWA'nızın URL protokol işleyici kaydını tek bir tıklamayla test edebilirsiniz. Daha fazla bilgi için URL protokol işleyici kaydını test etme başlıklı makaleyi inceleyin.
- Simgeler bölümünde, belirttiğiniz tüm simgeler gösterilir ve maskelerini kontrol edebilirsiniz.
- Kısayol #N bölüm grubu, tüm kısayol nesnelerinizle ilgili bilgileri gösterir.
- Ekran görüntüsü #N bölümü, uygulamanızın daha zengin bir kurulum kullanıcı arayüzünün ekran görüntülerini gösterir.
Ayrıca, DevTools bir hatayla (ör. yüklenemeyen simge) karşılaşırsa Manifest sekmesinde hatayı açıklayan bir Yüklenebilirlik bölümü gösterilir.
Maskelenebilir simgeleri görüntüleme ve kontrol etme
Manifest sekmesinin Simgeler bölümünde, uygulamanızın tüm simgeleri gösterilir. Bu bölümde, platformlara uyum sağlayan simge biçimi olan maskelenebilir simgeler için güvenli alanları da kontrol edebilirsiniz.
Simgelerin yalnızca minimum güvenli alan görünecek şekilde kırpılması için 
Maskelenebilir simgeler için yalnızca asgari güvenli alanı göster seçeneğini işaretleyin.
Logonuzun tamamı güvenli alanda görünüyorsa sorun yoktur.
Tetikleyici kurulumu
Chrome, PWA'nızın yüklenmesini doğrudan kullanıcı arayüzünden etkinleştirmenizi ve tanıtmanızı sağlar. Kendi uygulama içi yükleme deneyiminizi nasıl sağlayacağınızı öğrenin.
PWA'nızın yükleme akışını tetiklemek için:
- PWA'nın açılış sayfasını Chrome'da açın.
Üstteki adres çubuğunun sağ tarafında
Yükle'yi tıklayın.
Ekrandaki talimatları uygulayın.
Uygulama yükle özelliği, mobil cihazlar için iş akışını simüle edemez. Masaüstü Chrome tarayıcısında, Geliştirici Araçları Cihaz Modu'nda olsa bile adres çubuğunda kurulum düğmesinin gösterildiğine dikkat edin. Ancak uygulamanızı masaüstünüze başarıyla ekleyebilirseniz mobil cihazlarda da çalışır.
Gerçek mobil deneyimi test etmek istiyorsanız uzaktan hata ayıklama aracılığıyla gerçek bir mobil cihazı DevTools'a bağlayabilirsiniz. Bağlı mobil cihazda yüklemeyi tetiklemek için 
üç noktalı menüyü açıp 
Uygulamayı yükle'yi tıklayın.
Kısayolların incelenmesi
Uygulama kısayolları, kullanıcıların sık ihtiyaç duyduğu birkaç işleme hızlı erişim sağlamanıza olanak tanır.
Manifest dosyanızda tanımladığınız kısayolları incelemek için Manifest sekmesinin Kısayol #N bölümlerine gidin.
Daha zengin bir kurulum kullanıcı arayüzü için ekran görüntülerini inceleme
Manifest dosyanıza açıklama ve bir dizi ekran görüntüsü eklediğinizde uygulamanızın yükleme iletişim kutusu daha zengin olur.
Ekran görüntülerini incelemek için Manifest sekmesinin Ekran görüntüsü #N bölümlerine gidin.
URL protokolü işleyici kaydını test etme
PWA'lar, daha entegre bir deneyim için belirli bir protokol kullanan bağlantıları işleyebilir. İşleyici oluşturmayı öğrenmek için PWA'lar (Progresif Web Uygulaması) için URL protokol işleyici kaydı başlıklı makaleyi inceleyin.
İşleyicinizi test etmek için:
- PWA'nızın açılış sayfasında Geliştirici Araçları'nı açın. Örneğin, bu demo PWA'ya göz atın.
- Demo sayfasından PWA'yı yükleyin ve yükleme işleminden sonra uygulamayı yeniden yükleyin. Tarayıcı, PWA'yı
web+coffeeprotokolü için bir işleyici olarak kaydetti. - Uygulama > Manifest > Protokol İşleyici bölümünde, işleyicinin test etmesini istediğiniz URL'yi girin ve Protokolü test et'i tıklayın.
Bu örnekte işleyici, americano,chaivelatte-macchiatoöğelerini işleyebilir. - Chrome, uygulamayı açıp açamayacağını sorduğunda Protokol İşleyicisini Aç'ı tıklayarak onaylayın.
- Sonraki iletişim kutusunda, uygulamanın
web+coffeebağlantılarını işlemesine izin verin.
İşleyici bağlantıyı başarıyla işlerse uygulamada açılmış bir kahve fincanı resmi görürsünüz.
Hizmet çalışanları
Hizmet çalışanları, gelecekteki web platformunda temel bir teknolojidir. Bunlar, tarayıcının web sayfasından ayrı olarak arka planda çalıştırdığı komut dosyalarıdır. Bu komut dosyaları, web sayfası veya kullanıcı etkileşimi gerektirmeyen özelliklere (ör. push bildirimleri, arka plan senkronizasyonu ve çevrimdışı deneyimler) erişmenizi sağlar.
İlgili Rehberler:
Uygulama panelindeki Hizmet Çalışanları sekmesi, DevTools'ta hizmet çalışanlarını incelemek ve hatalarını ayıklamak için kullanılan ana yerdir.
- Şu anda açık olan sayfaya bir hizmet çalışanı yüklenmişse bu sekmede listelenir. Örneğin, yukarıdaki ekran görüntüsünde
https://airhorner.com/kapsamı için yüklenmiş bir hizmet çalışanı vardır. 
Çevrimdışı onay kutusu, Geliştirici Araçları'nı çevrimdışı moda geçirir. Bu, Ağ panelinde bulunan çevrimdışı mod veya Komut Menüsü'ndeki Go offlineseçeneğine eşdeğerdir.
Yeniden yüklenirken güncelle onay kutusu, hizmet çalışanını her sayfa yüklendiğinde güncellemeye zorlar.
Ağ için atla onay kutusu, hizmet çalışanını atlar ve tarayıcıyı istenen kaynaklar için ağa gitmeye zorlar.- Ağ istekleri bağlantısı sizi, hizmet işleyiciyle (
is:service-worker-interceptedfiltresi) ilgili müdahale edilen isteklerin listesini içeren Ağ paneline yönlendirir. - Güncelle bağlantısı, belirtilen hizmet çalışanını tek seferlik günceller.
- Push düğmesi, yük olmadan push bildirimi (tickle olarak da bilinir) taklit eder.
- Senkronize et düğmesi, arka plan senkronizasyonu etkinliğini taklit eder.
- Kaydı iptal et bağlantısı, belirtilen hizmet çalışanının kaydını iptal eder. Bir hizmet çalışanının kaydını iptal etmenin ve depolama alanını ve önbellekleri tek bir düğme tıklamasıyla silmenin bir yolu için Depolama alanını temizle bölümüne göz atın.
- Kaynak satırı, şu anda çalışan hizmet çalışanının ne zaman yüklendiğini gösterir. Bağlantı, hizmet çalışanının kaynak dosyasının adıdır. Bağlantıyı tıkladığınızda hizmet çalışanının kaynağına yönlendirilirsiniz.
- Durum satırı, hizmet çalışanının durumunu gösterir. Bu satırdaki sayı (ekran görüntüsünde
#16), hizmet çalışanının kaç kez güncellendiğini gösterir.
Yeniden yüklemede güncelle onay kutusunu etkinleştirirseniz sayının her sayfa yüklendiğinde arttığını fark edersiniz.
Durumun yanında bir başlat (hizmet çalışanı durmuşsa) veya durdur (hizmet çalışanı çalışıyorsa) bağlantısı görürsünüz. Hizmet çalışanları, tarayıcı tarafından herhangi bir zamanda durdurulup başlatılacak şekilde tasarlanmıştır. stop bağlantısını kullanarak hizmet işleyicinizi açıkça durdurmak bu durumu simüle edebilir. Hizmet çalışanınızı durdurmak, hizmet çalışanı tekrar başladığında kodunuzun nasıl davrandığını test etmenin mükemmel bir yoludur. Bu test, kalıcı genel durumla ilgili hatalı varsayımlar nedeniyle sık sık hataları ortaya çıkarır. - Clients satırı, hizmet çalışanının kapsamının belirlendiği kaynağı belirtir. Odak düğmesi, çoğunlukla birden fazla kayıtlı hizmet çalışanınız olduğunda kullanışlıdır. Farklı bir sekmede çalışan bir hizmet çalışanının yanındaki odak düğmesini tıklarsanız Chrome o sekmeye odaklanır.
Güncelleme Döngüsü tablosunda, hizmet çalışanının etkinlikleri ve bu etkinliklerin geçen süreleri (ör. yükleme, bekleme ve etkinleştirme) gösterilir. Her etkinliğin tam zaman damgasını görmek için
Genişlet düğmelerini tıklayın.
Daha fazla bilgi için Hizmet çalışanı yaşam döngüsü başlıklı makaleyi inceleyin.
Hizmet çalışanı hatalara neden olursa Hizmet Çalışanları sekmesinde, Kaynak satırının yanında hataların sayısını içeren bir 
Hata simgesi gösterilir.
Numarayı içeren bağlantı, sizi kaydedilen tüm hataların bulunduğu Konsol'a yönlendirir.
Tüm hizmet işçileriyle ilgili bilgileri görmek için Hizmet İşçileri sekmesinin alt kısmındaki Tüm kayıtları göster'i tıklayın. Bu bağlantı, servis çalışanlarınızda daha fazla hata ayıklama yapabileceğiniz chrome://serviceworker-internals/?devtools sayfasına yönlendirir.
Hizmet çalışanı önbellekleri
Önbelleğe Alma Depolama Alanı sekmesi, Önbelleğe Alma API'si (hizmet çalışanı) kullanılarak önbelleğe alınmış kaynakların salt okunur bir listesini sağlar.
Bir önbelleği ilk kez açıp ona kaynak eklediğinizde DevTools'un değişikliği algılayamayabileceğini unutmayın. Sayfayı yeniden yüklediğinizde önbelleği görürsünüz.
Açık iki veya daha fazla önbelleğiniz varsa bunları Önbellek Depolama Alanı açılır menüsünün altında görürsünüz.
Kota kullanımı
Önbellek Depolama sekmesindeki bazı yanıtlar "saydam" olarak işaretlenebilir. Bu, CORS etkinleştirilmemişken farklı bir kaynaktan (ör. CDN veya uzak API) alınan yanıtı ifade eder.
Alanlar arası bilgi sızıntısını önlemek için, depolama alanı kotası sınırlarını hesaplamak (ör. bir QuotaExceededistisna atlanıp atlanmadığı) ve navigator.storage API tarafından raporlamak için kullanılan opak yanıtın boyutuna önemli miktarda dolgu eklenir.
Bu dolgunun ayrıntıları tarayıcıdan tarayıcıya değişir. Ancak Google Chrome için bu, tek bir önbelleğe alınmış opak yanıtın genel depolama alanı kullanımına katkıda bulunduğu minimum boyutun yaklaşık 7 megabayt olduğu anlamına gelir. Depolama alanı kotası sınırlarını, opak kaynakların gerçek boyutuna göre beklediğinizden çok daha erken aşmanız kolay olabileceğinden, ne kadar opak yanıtı önbelleğe almak istediğinizi belirlerken bunu göz önünde bulundurmanız gerekir.
İlgili Rehberler:
Depoyu temizle
Depolama Alanını Temizle sekmesi, progresif web uygulamaları geliştirirken çok faydalı bir özelliktir. Bu sekme, tek bir düğme tıklamasıyla hizmet işçilerinin kaydını silmenize ve tüm önbellekleri ve depolama alanlarını temizlemenize olanak tanır. Daha fazla bilgi için aşağıdaki bölüme göz atın.
İlgili Rehberler:
Diğer uygulama paneli kılavuzları
Uygulama panelinin diğer bölmeleri hakkında daha fazla yardım için aşağıdaki kılavuzları inceleyin.
İlgili Rehberler: