Web uygulaması manifestlerini, hizmet çalışanları ve Service Worker önbelleklerini denetlemek, değiştirmek ve hata ayıklamak için Uygulama panelini kullanın.
Progresif Web Uygulamaları (PWA), 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:
- Kararsız ağ koşullarında bile güvenilirdir.
- Mac OS X'te Uygulamalar klasörü, Windows'da Başlat menüsü ve Android ile iOS'ta ana ekran gibi işletim sistemi yüzeylerini başlatmak için 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 açıklanmaktadır. Diğer bölmelerle ilgili 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ı manifestinizi incelemek için Manifest sekmesini kullanın.
- Hizmet Çalışanları sekmesini, bir hizmetin kaydını iptal etme veya güncelleme, push etkinliklerini öykünme, çevrimdışı olma ya da bir hizmet çalışanını durdurma gibi hizmet çalışanlarıyla ilgili tüm görevler için kullanın.
- Önbellek Depolama Alanı sekmesinden hizmet çalışanı önbelleğinizi görüntüleyin.
- Depolama alanını temizle sekmesinden tek bir düğmeyi tıklayarak bir hizmet çalışanının kaydını iptal edebilir ve tüm depolama alanları ile önbellekleri temizleyebilirsiniz.
Web uygulaması manifesti
Kullanıcılarınızın uygulamanızı Mac OS X'te Applications (Uygulamalar) klasörüne, Windows'da Başlat menüsüne, Android ve iOS'ta ise ana ekrana ekleyebilmesini istiyorsanız 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 uygulamanın başlangıçta nasıl görüneceğini tanımlar.
Manifest dosyanızı ayarladıktan sonra incelemek için Uygulama panelinin Manifest sekmesini kullanabilirsiniz.
- Manifest kaynağına bakmak için Uygulama Manifest etiketinin altındaki bağlantıyı tıklayın (yukarıdaki ekran görüntüsünde
manifest.webmanifest). - Kimlik ve Sunu bölümleri, manifest kaynağındaki alanları daha kullanıcı dostu bir şekilde görüntüler.
- Protokol İşleyicileri 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örüntüler ve 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 grubunda, uygulamanızın daha zengin bir yükleme kullanıcı arayüzüne ilişkin ekran görüntüleri görüntülenir.
Ayrıca Geliştirici Araçları, 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
Uygulamanızın tüm simgeleri, Manifest sekmesinin Simgeler bölümünde görüntülenir. Bu bölümde, platformlara uyum sağlayan simgelerin biçimi olan maskelenebilir simgeler için güvenli alanları da kontrol edebilirsiniz.
Simgeleri yalnızca minimum güvenli alanı gösterecek şekilde kırpmak için 
Maskelenebilir simgeler için yalnızca minimum güvenli alanı göster seçeneğini işaretleyin.
Logonuzun tamamı güvenli alanda görünürse devam edebilirsiniz.
Yükleme tetikleyicisi
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.
Üstteki adres çubuğunun sağında
Yükle'yi tıklayın.
Ekrandaki talimatları uygulayın.
Uygulamayı yükleme özelliği, mobil cihazların iş akışını simüle edemez. DevTools 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ıyla ekleyebilirseniz mobil cihazlar için de çalışır.
Orijinal mobil deneyimi test etmek istiyorsanız uzaktan hata ayıklama ile gerçek bir mobil cihazı DevTools'a bağlayabilirsiniz. Bağlı mobil cihazda yükleme işlemini tetiklemek için 
üç nokta menüsünü açıp 
Uygulamayı yükle'yi tıklayın.
Kısayolları incele
Uygulama kısayolları, kullanıcıların sıklıkla 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.
Ekran görüntülerini daha zengin bir yükleme kullanıcı arayüzü için inceleyin
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 sekmesinin Ekran görüntüsü #N bölümlerine gidin.
URL protokol işleyici kaydını test et
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ı bölümüne bakın.
İşleyicinizi test etmek için:
- PWA'nızın açılış sayfasında DevTools'u açın. Örneğin, bu demo PWA'ya göz atın.
- Demo sayfasından PWA'yı yükleyin ve yükledikten sonra uygulamayı yeniden yükleyin. Tarayıcı, PWA'yı
web+coffeeprotokolü için işleyici olarak kaydetti. - Application (Uygulama) > Manifest (Manifest) > Protocol Handler (Protokol İşleyici) bölümünde işleyicinin test etmesini istediğiniz URL'yi girin ve Test Protocol'u (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çılmış bir kahve fincanı resmi görürsünüz.
Hizmet çalışanları
Service Worker'lar, geleceğin web platformunun temel teknolojileridir. Bunlar, tarayıcının, bir web sayfasından ayrı olarak, arka planda ç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 Hizmet Çalışanları sekmesi, DevTools'da hizmet çalışanlarını denetlemek ve hata ayıklamak için kullanılan ana yerdir.
- Şu anda açık olan sayfaya bir Service Worker yüklüyse bu sekmede listelendiğini görürsünüz. Örneğin, yukarıdaki ekran görüntüsünde
https://airhorner.com/kapsamı için yüklenmiş bir Service Worker 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ışı modla eşdeğerdir.
Yeniden yüklemede güncelle onay kutusu, hizmet çalışanını her sayfa yüklemesinde güncelleme yapmaya zorlar.
Ağı 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 çalışanıyla ilgili yakalanan isteklerin listesinin yer aldığı Ağ paneline yönlendirir (
is:service-worker-interceptedfiltresi). - Güncelle bağlantısı, belirtilen hizmet çalışanı için tek seferlik bir güncelleme gerçekleştirir.
- Bas düğmesi, yük olmadan push bildirimi emülasyonu yapar (gıdıklama olarak da bilinir).
- Senkronize Et düğmesi, bir arka plan senkronizasyon etkinliğini emüle eder.
- Kaydı iptal et bağlantısı, belirtilen hizmet çalışanının kaydını siler. Bir hizmet çalışanının kaydını iptal etmenin ve depolama alanını ve önbellekleri tek bir düğmeyi tıklayarak temizlemenin bir yolu için Depolama alanını temizleme 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 bildirir. 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), Service Worker'ın kaç kez güncellendiğini gösterir.
Yeniden yüklemede güncelle onay kutusunu etkinleştirirseniz her sayfa yüklemesinde sayının arttığını görürsünüz.
Durumun yanında bir başlat bağlantısı (hizmet çalışanı durdurulmuşsa) veya bir durdurma bağlantısı (hizmet çalışanı çalışıyorsa) görürsünüz. Service Worker'lar, tarayıcı tarafından herhangi bir zamanda durdurulacak ve başlatılacak şekilde tasarlanmıştır. Durdur bağlantısını kullanarak hizmet çalışanınızı açıkça durdurmak bu durumu simüle edebilir. Service Worker'ınızı durdurmak, tekrar çalışmaya başladığında kodunuzun nasıl davranacağını test etmenin etkili bir yoludur. Sürekli küresel durum hakkında hatalı varsayımlardan dolayı sıklıkla hataları ortaya çıkarır. - İstemciler satırı, hizmet çalışanının kapsama dahil olduğu kaynağı belirtir. Odak düğmesi, birden fazla kayıtlı Service Worker olduğunda özellikle kullanışlıdır. Farklı bir sekmede çalışan bir hizmet çalışanının yanındaki odak düğmesini tıklarsanız Chrome bu sekmeye odaklanır.
Güncelleme Döngüsü tablosu, hizmet çalışanının etkinliklerini ve geçen süreleri (ör. yükleme, bekleme ve etkinleştirme) gösterir. 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ının yaşam döngüsü başlıklı makaleyi inceleyin.
Hizmet çalışanı herhangi bir hataya neden olursa Service Workers sekmesinde, Kaynak satırının yanında hata sayısının yanında bir 
Hata simgesi gösterilir.
Numaranın bulunduğu bağlantı, sizi günlüğe kaydedilen tüm hataların yer aldığı Konsol'a yönlendirir.
Tüm Service Worker'larla ilgili bilgileri görmek için Service Workers sekmesinin alt kısmındaki Tüm kayıtları göster seçeneğini tıklayın. Bu bağlantı, hizmet çalışanlarınızla ilgili daha fazla hata ayıklaması yapabileceğiniz chrome://serviceworker-internals/?devtools sayfasına yönlendirir.
Hizmet çalışanı önbellekleri
Cache Storage sekmesi, (Service Worker) Cache API kullanılarak önbelleğe alınan kaynakların salt okunur bir listesini sunar.
İlk kez bir önbelleği 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.
İki veya daha fazla önbelleğiniz açıksa bunları Önbellek Depolama Alanı açılır menüsünün altında listelenmiş olarak görürsünüz.
Kota kullanımı
Önbellek Depolama sekmesindeki bazı yanıtlar "opak" olarak işaretlenebilir. Bu, CORS etkin olmadığında CDN veya uzak API gibi farklı bir kaynaktan alınan bir yanıtı ifade eder.
Alanlar arası bilgilerin sızdırılmasını önlemek amacıyla, depolama alanı kota sınırlarını hesaplamak için kullanılan opak yanıtın boyutuna önemli miktarda dolgu eklenir (ör. bir QuotaExceeded istisnasının atılıp navigator.storage API tarafından raporlanması).
Bu dolgunun ayrıntıları tarayıcıdan tarayıcıya değişir ancak Google Chrome için bu, önbelleğe alınan herhangi bir opak yanıtın toplam depolama alanı kullanımına katkıda bulunduğu minimum boyutun yaklaşık 7 megabayt olduğu anlamına gelir. Önbelleğe almak istediğiniz opak yanıt sayısını belirlerken bunu göz önünde bulundurmalısınız, çünkü opak kaynakların gerçek boyutuna bağlı olarak depolama alanı kota sınırlarını normalde beklediğinizden çok daha kısa sürede aşabilirsiniz.
İlgili Kılavuzlar:
- Stack Overflow: Opak yanıtlar için hangi sınırlamalar geçerlidir?
- Workbox: Depolama Alanı Kotasını Anlama
Depolama alanını temizle
Depolama Alanını Temizle sekmesi, progresif web uygulamaları geliştirirken çok kullanışlı bir özelliktir. Bu sekme sayesinde hizmet çalışanlarının kaydını iptal edebilir, tek bir düğmeyi tıklayarak tüm önbellekleri ve depolama alanlarını temizleyebilirsiniz. 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 rehberlere bakın.
İlgili Kılavuzlar: