Progresif Web uygulamalarında hata ayıklama

Sofia Emelianova
Sofia Emelianova

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 sekmesi.

  • 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.

Manifest sekmesindeki Yüklenebilirlik bölümü.

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 Onay kutusu. Maskelenebilir simgeler için yalnızca minimum güvenli alanı göster seçeneğini işaretleyin.

Maskelenebilir simgeler için minimum güvenli alanları görüntüleme.

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:

  1. Chrome'da PWA'nın açılış sayfasını açın.
  2. Üstteki adres çubuğunun sağında Yükle'ye dokunmanız gerekebilir. Yükle'yi tıklayın.

    Yükle düğmesi.

  3. 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ü. üç nokta menüsünü açıp Uygulamayı yükle'ye dokunun. 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.

Manifest sekmesindeki kısayol bölümü.

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.

Manifest sekmesindeki yükleme iletişim kutusu ve ekran görüntüleri.

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:

  1. PWA'nızın açılış sayfasında DevTools'u açın. Örneğin, bu demo PWA'ya göz atın.
  2. Demo sayfasından PWA'yı yükleyin ve yükledikten sonra uygulamayı yeniden yükleyin. Tarayıcı, PWA'yı web+coffee protokolü için işleyici olarak kaydetti.
  3. 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. İşleyici test ediliyor. Bu örnekte, işleyici americano, chai ve latte-macchiato öğelerini işleyebilir.
  4. Chrome, uygulamayı açıp açamayacağını sorduğunda Protokol İşleyiciyi Aç'ı tıklayarak onaylayın. Uygulamayı açın.
  5. Sonraki iletişim kutusunda, uygulamanın web+coffee bağlantılarını işlemesine izin verin. Bağlantıların işlenmesine izin ver.

İş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.

Hizmet Çalışanları sekmesi.

  • Ş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.
  • Onay kutusu. Çevrimdışı onay kutusu, Geliştirici Araçları'nı çevrimdışı moda geçirir. Bu, panelinden veya Komut Menüsü'ndeki Go offline seçeneğiyle kullanılabilen çevrimdışı modla eşdeğerdir.
  • Onay kutusu. Yeniden yüklemede güncelle onay kutusu, hizmet çalışanını her sayfa yüklemesinde güncelleme yapmaya zorlar.
  • Onay kutusu. 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ığı paneline yönlendirir (is:service-worker-intercepted filtresi).
  • 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. Onay kutusu. 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. Genişlet düğmelerini tıklayın.

    Etkinlikler ve bunların zaman damgaları.

    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. 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.

Console'da hizmet çalışanı hataları.

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.

serviceworker-internals alanındaki Service Worker kayıtları.

Hizmet çalışanı önbellekleri

Cache Storage sekmesi, (Service Worker) Cache API kullanılarak önbelleğe alınan kaynakların salt okunur bir listesini sunar.

Hizmet çalışanı önbellek sekmesi.

İ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.

Birden fazla hizmet çalışanı önbelleği.

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:

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: