Web uygulaması manifestlerini, hizmet çalışanlarını ve hizmet çalışanı önbelleklerini incelemek, değiştirmek ve hatalarını ayıklamak için Uygulama panelini kullanın.
Progresif Web Uygulamaları (PWA), web teknolojisi kullanılarak oluşturulmuş modern ve 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'daki Başlat menüsü, Android ve iOS'teki ana ekran gibi işletim sistemlerinin başlatma yüzeylerine yüklenebilir.
- 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 panelerle ilgili yardım almak istiyorsanız bu kılavuzun son bölümü olan Diğer uygulama paneli kılavuzları'na göz atın.
Özet
- Web uygulaması manifestinizi incelemek için Manifest sekmesini kullanın.
- Hizmet çalışanlarıyla ilgili çok çeşitli görevler için Service Workers (Hizmet Çalışanları) sekmesini kullanın. Örneğin, hizmet kaydını iptal etme veya hizmeti güncelleme, push etkinliklerini taklit etme, çevrimdışı duruma geçme ya da hizmet çalışanını durdurma.
- Hizmet çalışanı önbelleğinizi Cache Storage (Önbellek Depolama Alanı) sekmesinden görüntüleyin.
- Depolamayı temizle sekmesinden tek bir düğmeyi tıklayarak hizmet çalışanının kaydını kaldırın 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'daki Başlat menüsüne, Android ve iOS'teki ana ekrana ekleyebilmesini istiyorsanız web uygulaması manifestine ihtiyacınız vardır. Manifest, uygulamanın ana ekranda nasıl görüneceğini, ana ekrandan başlatıldığında kullanıcının nereye yönlendirileceğini ve uygulamanın başlatıldığında nasıl görüneceğini tanımlar.
Manifestinizi ayarladıktan sonra, incelemek için Uygulama panelinin Manifest sekmesini kullanabilirsiniz.
- Manifest kaynağına bakmak için aşağıdaki bağlantıyı tıklayın Uygulama Manifesti etiketi
(Yukarıdaki ekran görüntüsünde
manifest.webmanifest). - Kimlik ve Sunum bölümleri, yalnızca manifest kaynağındaki alanları daha kullanıcı dostu bir şekilde gösterir.
- Protokol İşleyiciler bölümü, PWA'nızın URL protokol işleyici kaydını tek bir tıklamayla test etmenize olanak tanır. Daha fazla bilgi edinmek için URL protokol işleyici kaydını test etme başlıklı makaleyi inceleyin.
- Icons bölümünde, belirttiğiniz tüm simgeler gösterilir ve maskelerini kontrol etmenize olanak tanınır.
- Kısayol #N bölümünde, tüm kısayol nesnelerinizle ilgili bilgiler gösterilir.
- N numaralı ekran görüntüsü bölümü, uygulamanızın daha zengin bir yükleme kullanıcı arayüzüne ait 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.
Simgeleri yalnızca asgari güvenli alan görünecek şekilde kırpmak için 
Maskelenebilir simgeler için yalnızca asgari güvenli alanı göster'i işaretleyin.
Logonuzun tamamı güvenli alanda görünüyorsa devam edebilirsiniz.
Tetikleyici kurulumu
Chrome, PWA'nızın yüklenmesini doğrudan kullanıcı arayüzünden etkinleştirmenize ve tanıtmanıza olanak tanır. 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 kısımdaki adres çubuğunun sağ tarafında
Yükle'yi tıklayın.
Ekrandaki talimatları uygulayın.
Uygulamayı yükle (veya bazı cihazlarda Ana ekrana ekle) özelliği, mobil cihazlardaki iş akışını simüle edemez. Geliştirici Araçları Cihaz Modu'nda olmasına rağmen 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ıyla ekleyebilirseniz mobil cihazlarda da çalışır.
Gerçek mobil deneyimi test etmek istiyorsanız uzaktan hata ayıklama yoluyla gerçek bir mobil cihazı DevTools'a bağlayabilirsiniz. Yüklemeyi bağlı mobil cihazda tetiklemek için 
üç noktalı menüyü açıp 
Uygulamayı yükle'yi (veya Ana ekrana ekle'yi) tıklayın.
Kısayolları inceleme
Uygulama kısayolları, kullanıcıların sık sık ihtiyaç duyduğu bir dizi yaygın 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 Shortcut #N (Kısayol #N) bölümlerine gidin.
Daha zengin bir yükleme 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 daha zengin bir yükleme iletişim kutusuna sahip olur.
Ekran görüntülerini incelemek için Manifest sekmesindeki 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 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ı, artık PWA'yı
web+coffeeprotokolü için işleyici olarak kaydetti. - Application (Uygulama) > Manifest > Protocol Handler (Protokol İşleyici) bölümünde, işleyicinin test etmesini istediğiniz URL'yi girin ve Test protocol'ü (Protokolü test et) tıklayın.
Bu örnekte işleyici, americano,chaivelatte-macchiatoöğelerini işleyebilir. - Chrome, uygulamayı açıp açamayacağını sorduğunda Protokol İşleyiciyi 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çılan bir kahve fincanı resmi görürsünüz.
Hizmet çalışanları
Hizmet çalışanları, gelecekteki web platformunun temel teknolojisidir. Bunlar, tarayıcının arka planda bir web sayfasından ayrı olarak çalıştırdığı komut dosyalarıdır. Bu komut dosyaları, push bildirimleri, arka planda senkronizasyon ve çevrimdışı deneyimler gibi web sayfası veya kullanıcı etkileşimi gerektirmeyen özelliklere erişmenizi sağlar.
İlgili Kılavuzlar:
Uygulama panelindeki Service Workers (Servis Çalışanları) sekmesi, servis çalışanlarını incelemek ve hatalarını ayıklamak için Geliştirici Araçları'ndaki 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 bir hizmet çalışanı yüklü. 
Çevrimdışı onay kutusu, Geliştirici Araçları'nı çevrimdışı moda geçirir. Bu, Ağ panelinde bulunan çevrimdışı moda veya Komut Menüsü'ndeki Go offlineseçeneğine eşdeğerdir.
Yeniden yüklenirken güncelle onay kutusu, hizmet çalışanının her sayfa yüklemede güncellenmesini zorunlu kılar.
Ağ için atlama 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 çalışanıyla ilgili yakalanan isteklerin listesini içeren Ağ paneline (
is:service-worker-interceptedfiltresi) yönlendirir. - Güncelle bağlantısı, belirtilen hizmet çalışanının tek seferlik güncellemesini gerçekleştirir.
- Push (Push) düğmesi, yük içermeyen bir push bildirimini (gıdıklama 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ı tek bir düğmeyle iptal etmenin ve depolama alanını ve önbellekleri temizlemenin yolunu öğrenmek için Depolama alanını temizleme başlıklı makaleye göz atın.
- Kaynak satırında, şu anda çalışan hizmet çalışanının ne zaman yüklendiği gösterilir. Bağlantı, hizmet çalışanın kaynak dosyasının adıdır. Bağlantıyı tıkladığınızda service worker'ın kaynağına yönlendirilirsiniz.
- Durum satırında, hizmet çalışanının durumu gösterilir. 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üklemede arttığını görürsünüz.
Durumun yanında başlat bağlantısı (hizmet çalışanı durdurulmuşsa) veya durdur bağlantısı (hizmet çalışanı çalışıyorsa) gösterilir. Service worker'lar, tarayıcı tarafından istendiği zaman durdurulup başlatılacak şekilde tasarlanır. Durdur bağlantısını kullanarak hizmet çalışanınızı açıkça durdurmak bu durumu simüle edebilir. Hizmet çalışanın durdurulması, hizmet çalışanı tekrar başlatıldığında kodunuzun nasıl davrandığını test etmek için harika bir yoldur. Genellikle kalıcı genel durumla ilgili hatalı varsayımlar nedeniyle hatalar ortaya çıkar. - Clients satırı, hizmet çalışanının kapsamının belirlendiği kaynağı gösterir. Odak düğmesi, genellikle birden fazla kayıtlı hizmet çalışanınız olduğunda yararlıdır. Farklı bir sekmede çalışan bir hizmet çalışanının yanındaki odaklan düğmesini tıklarsanız Chrome bu sekmeye odaklanır.
Güncelleme Döngüsü tablosunda, hizmet çalışanının etkinlikleri ve 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 The service worker lifecycle (Hizmet çalışanı yaşam döngüsü) başlıklı makaleyi inceleyin.
Hizmet çalışanı herhangi bir hataya neden olursa Service Workers sekmesinde Source satırının yanında hata sayısıyla birlikte 
Error simgesi gösterilir.
Numaralı bağlantı sizi, kaydedilen tüm hataların bulunduğu Konsol'a yönlendirir.
Tüm hizmet çalışanları hakkındaki bilgileri görmek için Service Workers (Hizmet Çalışanları) sekmesinin alt kısmındaki Tüm kayıtları göster'i tıklayın. Bu bağlantı sizi, hizmet çalışanlarınızda daha fazla hata ayıklama yapabileceğiniz chrome://serviceworker-internals/?devtools sayfasına yönlendirir.
Hizmet çalışanı önbellekleri
Önbellek Depolama sekmesinde, Cache API (hizmet çalışanı) kullanılarak önbelleğe alınmış kaynakların salt okunur bir listesi bulunur.
Bir önbelleği ilk kez açıp içine kaynak eklediğinizde DevTools'un değişikliği algılamayabileceğini unutmayın. Sayfayı yeniden yüklediğinizde önbelleği görürsünüz.
İki veya daha fazla önbellek açtıysanız bunlar Önbellek Depolama açılır listesinin altında listelenir.
Kota kullanımı
Önbellek Depolama sekmesindeki bazı yanıtlar "opak" olarak işaretlenebilir. Bu, CORS etkinleştirilmediğinde 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 üzere kullanılan (ör. QuotaExceeded istisnası oluşturulup oluşturulmadığı) ve navigator.storage API'si tarafından bildirilen opak yanıtın boyutuna önemli bir 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ırlamalarını, opak kaynakların gerçek boyutuna göre beklediğinizden çok daha kısa sürede kolayca aşabileceğiniz için kaç tane opak yanıtı önbelleğe almak istediğinizi belirlerken bunu göz önünde bulundurmalısınız.
İlgili Kılavuzlar:
- Stack Overflow: What limitations apply to opaque responses? (Stack Overflow: Opak yanıtlara hangi sınırlamalar uygulanır?)
- Workbox: Depolama alanı kotasını anlama
Depolama alanını temizle
Depolamayı Temizle sekmesi, progresif web uygulamaları geliştirirken çok kullanışlı bir özelliktir. Bu sekme, tek bir düğmeyi tıklayarak hizmet çalışanlarının kaydını silmenize ve tüm önbellekleri ve depolama alanını temizlemenize olanak tanır. Daha fazla bilgi edinmek için aşağıdaki bölüme göz atın.
İlgili Kılavuzlar:
Diğer uygulama paneli kılavuzları
Uygulama panelinin diğer bölmeleriyle ilgili daha fazla yardım için aşağıdaki kılavuzları inceleyin.
İlgili Kılavuzlar: