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), web teknolojisi kullanılarak oluşturulan modern ve yüksek kaliteli uygulamalardır. PWA'lar; iOS, Android ve masaüstü uygulamalarıyla benzer özellikler sunar. Bunları şöyle sıralayabiliriz:
- İstikrarsı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örünün.
Bu kılavuzda yalnızca Uygulama panelindeki Progresif Web Uygulaması özellikleri ele alınmaktadır. Diğer bölmelerde yardım arıyorsanız bu kılavuzun son bölümü olan Diğer Uygulama paneli kılavuzlarına göz atın.
Özet
- Web uygulaması manifest'inizi incelemek için Manifest sekmesini kullanın.
- Bir hizmetin kaydını silme veya güncelleme, push etkinliklerini emüle etme, çevrimdışı olma ya da bir hizmet çalışanını durdurma gibi hizmet çalışanları ile ilgili tüm görevler 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ılırken kullanıcının nereye yönlendirileceğini ve başlangıçta uygulamanın nasıl görüneceğini tanımlar.
Manifest dosyanızı oluşturduktan sonra Uygulama panelinin Manifest sekmesini kullanarak manifest dosyanızı 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 işleyiciler bölümü, PWA'nızın URL protokol işleyici kaydını tek bir düğmeyi tıklayarak test etmenize olanak tanır. Daha fazla bilgi edinmek için URL protokol işleyici kaydını test etme bölümüne bakın.
- Simgeler bölümü, belirttiğiniz her simgeyi gösterir ve bu simgelerin maskelerini kontrol etmenize olanak tanır.
- Kısayol #N bölüm grubu, tüm kısayol nesnelerinizle ilgili bilgileri görüntüler.
- Ekran görüntüsü #N bölüm grubu, uygulamanızın daha zengin bir yükleme kullanıcı arayüzü için ekran görüntülerini gösterir.
Ayrıca, DevTools yüklenemeyen bir simge gibi bir hatayla 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, doğrudan kendi kullanıcı arayüzünde PWA'nızın yüklenmesini ve yüklenmesini 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:
- Chrome'da PWA'nın açılış sayfasını açın.
Üst taraftaki adres çubuğunun sağ tarafında
Yükle'yi tıklayın.
Ekrandaki talimatları uygulayın.
Uygulamayı yükle özelliği, mobil cihazların iş akışını simüle edemez. Geliştirici Araçları Cihaz Modu'nda olsa bile masaüstü Chrome tarayıcının adres çubuğunda yükleme düğmesini nasıl gösterdiğine dikkat edin. Ancak, uygulamanızı masaüstünüze başarılı bir şekilde ekleyebilirseniz mobil cihazlarda da çalışmaya devam edecektir.
Gerçek mobil deneyimi test etmek istiyorsanız uzak 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ı incele
Uygulama kısayolları, kullanıcıların sık ihtiyaç duyduğu bazı yaygın işlemlere 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 yükleme kullanıcı arayüzü için ekran görüntülerini inceleyin
Manifest dosyanıza bir açıklama ve bir dizi ekran görüntüsü eklediğinizde, uygulamanız daha zengin bir yükleme iletişim kutusu görüntülenir.
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'yı inceleyin.
- Demo sayfasından PWA'yı yükleyin ve yükleme işleminden sonra uygulamayı yeniden yükleyin. Tarayıcı artık PWA'yı
web+coffeeprotokolü için bir işleyici olarak kaydetmiştir. - Uygulama > Manifest > Protokol İşleyici bölümünde işleyicinin test etmesini istediğiniz URL'yi girin ve Protokol testi'ni tıklayın.
Bu örnekte, işleyici americano,chaivelatte-macchiatoiş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çık 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 arka planda çalıştırdığı, web sayfasından ayrı olarak komut dosyalarıdır. Bu komut dosyaları, push bildirimleri, arka planda senkronizasyon ve çevrimdışı deneyimler gibi bir web sayfası veya kullanıcı etkileşimi gerektirmeyen özelliklere erişmenizi sağlar.
İlgili Kılavuzlar:
Uygulama panelindeki Hizmet Çalışanları sekmesi, DevTools'ta hizmet çalışanlarını incelemek ve hatalarını ayıklamak için kullanılan ana yerdir.
- Açık olan sayfada yüklü olan hizmet çalışanı varsa bu hizmet çalışanının listelendiğini bu sekmede görürsünüz. Ö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ğ panelinden veya Komut Menüsü'ndeki Go offlineseçeneğiyle kullanılabilen çevrimdışı moda eşdeğerdir.
Yeniden yüklemede güncelle onay kutusu, hizmet çalışanını her sayfa yüklemesinde güncelleme yapmaya 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ı için tek seferlik bir güncelleme gerçekleştirir.
- 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ı, o 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ündeki
#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şlangıç bağlantısı (hizmet çalışanı durdurulduysa) veya durdurma bağlantısı (hizmet çalışanı çalışıyorsa) görürsünüz. Service Worker'lar, 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. Service Worker'ı durdurmak, hizmet çalışanı tekrar başlatıldığında kodunuzun nasıl davrandığını test etmenin mükemmel bir yoludur. Bu test, kalıcı küresel 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ü sayfasına bakın.
Hizmet çalışanı herhangi bir hataya neden olursa Hizmet Çalışanları sekmesinde Kaynak satırının yanında hata sayısıyla birlikte 
Hata simgesi gösterilir.
Numarayı içeren bağlantı sizi günlüğe kaydedilen tüm hatalarla birlikte Konsol'a yönlendirir.
Tüm hizmet çalışanları ile ilgili bilgileri görmek için Hizmet Çalışanları sekmesinin en altındaki Tüm kayıtları göster'i tıklayın. Bu bağlantı, hizmet çalışanlarınızda daha ayrıntılı hata ayıklama işlemleri yapabileceğiniz chrome://serviceworker-internals/?devtools sayfasına gider.
Hizmet çalışanı önbellekleri
Önbellek Depolama sekmesi, (hizmet çalışanı) Cache API kullanılarak önbelleğe alınan kaynakların salt okunur bir listesini sunar.
Bir önbelleği ilk kez açıp ona kaynak eklediğinizde Geliştirici Araçları'nın değişikliği algılamayabileceğ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 listelenir.
Kota kullanımı
Önbellek Depolama sekmesindeki bazı yanıtlar "saydam" olarak işaretlenebilir. Bu, CORS etkin olmadığında CDN veya uzak API gibi farklı bir kaynaktan alınan yanıtı ifade eder.
Alanlar arası bilgilerin sızması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 farklılık gösterir ancak Google Chrome için bu, önbelleğe alınmış tek bir opak yanıtın toplam depolama kullanımına katkıda bulunduğu minimum boyutun yaklaşık 7 megabayt olduğu anlamına gelir. Gizli kaynakların gerçek boyutuna göre beklediğinizden çok daha erken bir zamanda depolama alanı kotası sınırlarını kolayca aşabilirsiniz. Bu nedenle, ne kadar gizli yanıtı önbelleğe almak istediğinizi belirlerken bunu göz önünde bulundurmanız gerekir.
İlgili Rehberler:
- Stack Overflow: Opak yanıtlara hangi sınırlamalar uygulanır?
- Workbox: Depolama Alanı Kotasını Anlama
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 Kılavuzlar: