Araçlar ve hata ayıklama

Kitaplıklar, çerçeveler, kod düzenleyiciler, derleyiciler, geliştirici araçları, hata ayıklayıcılar ve daha birçok araç dahil olmak üzere, web geliştirmede kullanıma sunulan tüm araçlar progresif web uygulaması geliştirme için de faydalıdır. Ancak yüklenebilirlik, hizmet çalışanları, çevrimdışı destek gibi PWA'ya özgü özelliklerle çalışırken PWA'ya uygun bazı araçlar ekstra faydalı olur. Bu çözümleri uygulamalı olarak görelim.

Temeller bölümünde bahsedildiği gibi, her bağlamda her kullanıcıya en iyi deneyimi sunmak için bağımsız tasarım kalıpları kullanmalısınız. Ancak deneyimlerinizi farklı cihazlarda test etmeniz önerilir.

iPhone, Android telefon, tablet ve farklı işletim sistemlerine sahip masaüstü veya dizüstü bilgisayarlar da dahil olmak üzere düzinelerce fiziksel cihazınız büyük olasılıkla olmayacaktır. Bu yüzden simülatörler ve emülatörler var.

Basit simülatörler

Tarayıcılardaki çoğu geliştirici aracı, PWA'larınızı farklı ekran boyutlarında veya ağ koşullarında tek bir masaüstü tarayıcı motoru kullanarak test etmenize olanak tanır. Bu araçlardan bazıları, söz konusu simülasyonlar altında farklı bir kullanıcı aracısını zorunlu kılabilir.

Kullanabileceğiniz simülatörlerden bazıları şunlardır:

  • Chromium Geliştirici Araçları: Cihaz Modu, ağ kısıtlama ve çeşitli sensör simülasyonları
  • Firefox Geliştirici Araçları: Duyarlı Tasarım Modu
  • Safari Web Denetleyicisi: Duyarlı Tasarım Modu Mobil cihazları simüle eden Chromium Geliştirici Araçları. Firefox Geliştirici Araçları, mobil cihazları simüle ediyor. Safari Web Denetleyicisi Duyarlı Tasarım modu. Açık kaynaklı Duyarlı uygulama gibi bazı ticari ve ücretsiz çözümler, geliştiriciler ve tasarımcılar için optimize edilmiştir.

Apple simülatörleri

Apple, web uygulamanızı çeşitli işletim sistemi sürümlerinde farklı iPhone'lar ve iPad'lerde test etmenize olanak tanıyan Simülatör uygulamasını (eski adıyla iOS Simülatörü) sunar.

Simülatör uygulaması yalnızca macOS bilgisayarlarda kullanılabilir. Uygulama, AppStore'da mevcut olan [Xcode] uygulamasıyla birlikte gelir. Farklı cihaz yapılandırmalarıyla iOS ve iPadOS'i simüle eder. PWA'nız ana ekrana yüklendiğinde kullanılan gerçek Mobile Safari uygulamasını ve Web.app motorunu içerir. Bu nedenle karşınıza çıkacak son deneyim, gerçek bir cihazı oldukça iyi temsil eder.

iPhone ve iPad'de Safari web sitelerini oluşturma simülatörü.

Xcode'u yükledikten sonra uygulamayı başlatmak için Xcode menüsünden Open Developer Tools'yi ve ardından Simulator'yi seçerek Simülatör'ü açabilirsiniz. Simülatörü açtıktan sonra Safari'yi gerçek bir iPhone veya iPad'deymiş gibi açabilirsiniz. Önce File, ardından Open Simulator menüsünü seçerek diğer cihazları açabilirsiniz.

Web geliştiricileri için PWA'ları test etmek amacıyla Simülasyon Aracı'nı kullanırken işinize yarayacak bazı kısayollar şunlardır:

  • Command-Shift-H: Ana ekrana gitme.
  • Control-Command-Shift-H: Uygulama Değiştirici'ye erişin.
  • Command-Right ve Command-Left: Cihazı döndürün.

Simülatör bir sanal makine değildir. iPhone veya iPad'e benzer şekilde, macOS'inizin üzerinde çalışan bir uygulamadır. Dolayısıyla kendi TCP yığınına sahip değildir. Bu nedenle, Simülatör'de localhost kullanıyorsanız Safari, macOS localhost cihazınızı işaret eder.

Varsayılan olarak, Xcode yalnızca iOS'in en son sürümünü yükler ancak Xcode'a gidip Preferences menüsünü kullanabilir ve Components sekmesinden eski Simülatörleri indirebilirsiniz.

PWA'nızı iOS'in en son sürümünde, önceki alt sürümde ve en az bir önceki ana sürümde test etmeniz önerilir.

Android emülatörleri

Android ekosistemi farklı emülatörler sunar ancak en yaygın olarak Android SDK içindeki emülatörler kullanılır.

PWA geliştiricisi olarak Android emülatörünüzde tarayıcılara da ihtiyacınız vardır. Bu da test sürecini daha karmaşık hale getirir. Bunun nedeni, AOSP'nin (Android Açık Kaynak Projesi), tarayıcıları indirmek için Google Chrome veya Play Store'u içermemesidir. Bu nedenle, her Android emülatörü PWA testi için faydalı değildir.

Android SDK'sı, emülasyon için yararlı iki araçla birlikte gelir:

  • SDK Yöneticisi: Farklı işletim sistemi sürümlerini ve eklentileri indirir ve günceller.
  • AVD Manager: Sanal makine örneğine benzer şekilde, her biri bir Android OS yüklü bir cihazı temsil eden Android Sanal Cihazları (AVD'ler) ekler, düzenler ve siler.

Yalnızca Android SDK'sını veya emülatörlerle birlikte Android SDK'sını içeren ücretsiz bir IDE olan Android Studio'yu yükleyebilirsiniz. SDK ile emülatörlerinizi açıp kurmak için komut satırını kullanmanız gerekir. Android Studio ile Karşılama ekranındaki menüden gerekli araçları açabilirsiniz. AVD Manager'a girdikten sonra, farklı ekran boyutu, özellik ve Android OS sürümü kombinasyonlarıyla istediğiniz sayıda cihaz oluşturabilirsiniz.

Bir web sitesine göz atan Android Virtual cihazına sahip AVD yöneticisi

Android emülatörü kullandığınızda, PWA yükleme desteğinizi, kullanıcı deneyiminin tamamını ve kullandığınız özelliklerin beklendiği gibi çalışıp çalışmadığını kontrol edebilirsiniz.

Google Chrome'u kullanma

Google Chrome'u Android emülatöründe kullanmak için içinde Play Hizmetleri olan bir ortalama görüntüleme süresi oluşturmanız gerekir. Bunu yapmak için, aşağıdaki resimde görebileceğiniz gibi, ortalama görüntüleme sürenizde kullandığınız SDK'da Oynat simgesinin bulunduğundan emin olun:

Play Hizmetleri dahil bir işletim sistemiyle ortalama görüntüleme süresi oluşturma

Play Hizmetleri'ne sahip ortalama görüntüleme süresi (AVD) Play Store'u da içerir. Böylece, hesabınızı Google hesabınızla oluşturduktan sonra Chrome'unuzu en son sürümle güncelleyebilirsiniz.

Diğer tarayıcıları kullanma

Play hizmetleriyle birlikte bir ortalama görüntüleme süresi (AVD) kullanıyorsanız tarayıcıları Play Store'dan da indirebilirsiniz.

Samsung Internet, Microsoft Edge, Opera, Firefox ve Brave dahil Android için kullanılabilen tarayıcıların çoğu APK (Android Paketleri) olarak mevcuttur. Test etmek istediğiniz tarayıcı için APK'nız varsa dosyayı emülatöre sürüklemeniz veya ADB'yi kullanarak komut satırından yüklemeniz yeterlidir.

Microsoft Edge'i Play Store'dan yükleyen Android emülatörü.

Masaüstü emülatörleri

Farklı bir masaüstü bilgisayarın emülasyonu genellikle VirtualBox veya VMWare gibi bir sanal makine sistemi aracılığıyla gerçekleştirilir. Bu araçlarla bile bazı ortamların emülasyonunu (ör. Windows veya Linux'ta macOS'in yerine getirilmesi) mümkün değildir. Bazı seçenekler ise lisans gerektirebilir (macOS veya Windows'da Windows'u taklit etme gibi).

Fiziksel cihaz kullanımı

PWA'nızı test etmek için gerçek cihazlar kullanmak da iyi bir fikirdir. Fiziksel cihazları uzaktan kullanabileceğiniz bulut tabanlı bazı çözümler olduğundan, birden fazla cihaza sahip olmamız gerekmez. Bazı ücretsiz çözümler ve ücretsiz katman seçeneği sunan bazı ticari çözümler mevcuttur.

Samsung'dan katlanabilir telefonla Remote Test Lab.

Mevcut çözümlerden biri de PWA'nızı telefon, tablet ve katlanabilir cihazlar gibi Samsung cihazlarda test etmeniz için ücretsiz bir çözüm olan Samsung Remote Test Lab'dır.

Uzaktan inceleme

Progresif Web Uygulamanızdaki hataları gerçek bir cihazda, simülatörde veya emülatörde ayıklamak isterseniz masaüstü bilgisayarınızın tarayıcı araçlarına uzaktan inceleme oturumu bağlamak isteyebilirsiniz.

Ticari araçlar mevcuttur, ancak tüm tarayıcılar bunu yapmanın çeşitli yollarını sunar. Örneğin:

Android için bağlantı noktası yönlendirme

localhost üzerindeki PWA'ları Android fiziksel cihazlarda veya emülatörlerinde test ederken bir sorunla karşılaşırsınız. localhost, geliştirme makinenize değil, Android TCP yığınına işaret eder.

localhost yerine yerel IP adresinizi kullanabilirsiniz ancak Service Worker'lar ve localhost dışında birçok özellik yalnızca HTTPS bağlantılarıyla çalıştığından bu iyi bir fikir değildir. Bu nedenle, PWA'nız çevrimdışı çalışmaz veya PWA ölçütlerini geçmez.

Masaüstü bilgisayarınızdaki Chromium tarayıcıda bağlantı noktası yönlendirmeyi etkinleştirerek sorunu çözebilirsiniz. Bu durumda, Android cihazda localhost üzerindeki bir bağlantı noktasını, geliştirme bilgisayarınızın localhost de dahil olmak üzere ana bilgisayarınızdaki herhangi bir kaynak ve bağlantı noktasına bağlayabilirsiniz. Daha fazla bilgi için bu rehbere göz atın.

Chromium tarayıcılar

Chromium tarayıcıları, Progresif Web Uygulamaları'nda hata ayıklama ve test etme için Geliştirici Araçları'ndan başlayarak birçok araç sunar.

Samsung Internet, Microsoft Edge ve Google Chrome dahil olmak üzere Chromium tabanlı çoğu tarayıcı, Stable, Beta ve Canary gibi farklı kanallar sunar. PWA'nızı tarayıcının gelecekteki sürümlerinde test etmek üzere masaüstü ve Android'e ayrı sürümler yükleyebilirsiniz. Bu sayede henüz yaygın olarak kullanıma sunulmamış özellikler geliştirip test edebilir, kullanımdan kaldırmaları ve değişiklikleri test edebilir ve uygulamanızın yeni sürümlerde nasıl davranacağını belirleyebilirsiniz.

Uzaktan denetimi kullanarak PWA'nızı masaüstü ve Android cihazlarda hata ayıklamak ve test etmek için tüm bu araçları kullanabilirsiniz.

Hizmet çalışanı araçları

Chromium Geliştirici Araçları, hizmet çalışanlarının ve API'lerinin "Uygulama" sekmesindeki hataları ayıklamak için kullanabileceğiniz eksiksiz bir araç setine sahiptir. "Service Workers" bölümünde şunları yapabilirsiniz:

  • Service Worker'ların kurulum durumunu ve yaşam döngüsünü inceleyin.
  • Hizmet çalışanını güncelleyin ve kaydını iptal edin.
  • Güncelleme döngüsünü takip edin.
  • Mevcut Service Worker istemcilerini görün.
  • Service Worker'a push mesajı gönderin.
  • Arka Plan Senkronizasyonu ve Periyodik Arka Plan Senkronizasyonu işlemlerini kaydedin.

Chromium Geliştirici Araçları'nda, Hizmet Çalışanı hata ayıklama araçları.

Bu araçlar hakkında daha fazla bilgi edinin.

Depolama araçları

Application ve ardından Storage içinde kaynağınızdaki verileri (ör. Web Depolaması girişleri veya IndexedDB depoları) görebilir, önizleyebilir, güncelleyebilir ve silebilirsiniz. Application, Cache ve ardından Cache Storage içinde, geçerli kaynakta depolanan tüm önbellekleri görebilir, içeriği önizleyebilir ve girişleri silebilirsiniz. Önbellek aracı hakkında daha fazla bilgi edinin.

Chromium Geliştirici Araçları'nda Önbellek Denetleyicisi

Ayrıca Application ve ardından Storage seçeneklerinden birini belirleyerek Clear site data kullanarak kullanılan mevcut kotayı görebilir, özel kota depolama alanını simüle edebilir ve Service Worker kaydı da dahil olmak üzere tüm verilerinizi temizleyebilirsiniz.

Arka plan hizmetleri

Chromium Geliştirici Araçları'nda ayrıca bir dizi arka plan hizmeti etkinlik kaydetme aracı bulunur. Bu araçlara Application ve ardından Background Services tıklanarak erişilebilir. Bu sayede, Service Worker'ların API'sinin yanı sıra arka planda gerçekleşen bazı etkinlikleri görebilirsiniz. Bu araçlar hakkında daha fazla bilgi edinin.

Web uygulaması manifest araçları

Chromium Geliştirici Araçları'nda, Application, Manifest altında Web Uygulaması Manifesti ve yüklenebilirlik ölçütleri için bir bölüm vardır. Bu bölümde, manifestin doğru şekilde yüklenip yüklenmediğini, manifest değerlerini, simgelerin nasıl göründüğünü, uygulama kimliğini ve maskelenebilir simgeler için hızlı bir kontrol aracını kontrol edebilirsiniz.

Yüklenebilirlik ölçütleri sorunlarıyla ilgili uyarılar ve hatalar da bu bölümde gösterilir.

Chromium Geliştirici Araçları'nda Web Uygulaması Manifest'inde Hata Ayıklama.

Bu araçlar hakkında daha fazla bilgi edinin.

Yükleme işleminde hata ayıklama

WebAPK yükleme modunu kullanan Android cihazlarda, Chromium tarayıcılarda about:webapk uygulamasına göz atarak yüklü uygulamaların listesine erişebilirsiniz.

Buradan geçerli güncelleme durumunu görebilir ve WebAPK güncellemesi isteğinde bulunabilirsiniz.

Masaüstü bilgisayarlarda about:apps adresine göz atarak kullanıcı dostu yüklü PWA'ların listesini, about:app-service-internals adresine göz atarak ise hata ayıklama sürümünü görebilirsiniz.

Android'de Google Chrome WebAPK'sı hata ayıklama ekranı.

Safari

Bu yazının hazırlandığı tarihte Safari'de PWA testi ve hata ayıklama için daha sınırlı sayıda araç mevcuttur. iOS ve iPadOS'te hizmet çalışanlarının durumunu ve yaşam döngüsünü görüp hata ayıklamak için herhangi bir araç, önbelleğin içeriği için denetleyici, web uygulaması manifest desteği ve yüklenebilirliği için herhangi bir araç yoktur.

Safari yalnızca mevcut ürün sürümlerinde kullanılabilir. macOS'te kullanılabilen Safari Teknoloji Önizlemesi ise yalnızca Safari'nin gelecekteki sürümlerinin özelliklerini önceden denemenize olanak tanır. iOS ve iPadOS beta programları bazen test için kullanabileceğiniz yeni Safari sürümlerini içerir.

Hizmet çalışanı araçları

Safari'de (hem macOS'te hem de iOS ve iPadOS için uzaktan) yapabileceğiniz şey, çalışmakta olan bir hizmet çalışanı için bir denetleyici penceresi açmaktır.

macOS'teki Safari'deki Develop, Service Workers menüsünde şu anda çalışan tüm hizmet çalışanı oturumları listelenir. Uzaktan inceleme için Develop menüsünden incelenecek cihazı seçmeniz gerekir. Service Worker'ların bağlamları, kaynağın veya PWA'nın yüklü adının altındaki pencere bağlamlarıyla aynı alt menüde görünür.

Bunlardan birini seçerseniz Safari yalnızca Consoles, Sources ve Network Tabs dahil olmak üzere kısıtlanmış bir denetleyiciyle yeni bir pencere açar.

Safari'deki PWA'dan bir Service Worker Web Inspector.

Firefox

Firefox, tüm platformlarda Service Worker'ları, App Manifest'in ise yalnızca Android'e yüklenmesini destekler. PWA'lara yönelik araçlara masaüstünde ve Android'de USB uzaktan denetleme oturumuyla erişebilirsiniz.

Firefox Geliştirici Sürümü olarak bilinen masaüstü sürümünü kullanabilirsiniz. Chromium tarayıcıda olduğu gibi Firefox'un da masaüstü ve Android'de farklı kanallarda (mevcut, beta ve geliştirici sürümleri dahil) farklı sürümleri vardır.

PWA'lar (Progresif Web Uygulaması) için araçlar

Firefox'taki hizmet çalışanı denetleyicisi, Geliştirici Araçları'nda Application (Service Workers) altında bulunan temel bir araçtır. Kayıtlı olan hizmet çalışanını görmenize, çalışma durumunu kontrol etmenize ve kaydını iptal etmenize olanak tanır. Service Worker'ın kodunda hata ayıklama özelliği yalnızca Firefox'un bazı geliştirici sürümlerinde kullanılabilir.

Service Worker ve Manifest için Firefox Geliştirici Araçları.

Manifest aracı Application ve Manifest altında kullanılabilir ve simgelerin önizlemesiyle yalnızca manifest değerlerini oluşturur.

Storage altında, IndexedDB ve Cache Storage dahil olmak üzere kaynağın depolama alanını yönetebilirsiniz.

Web uygulamaları için Firefox geliştirici araçları hakkında daha fazla bilgi edinebilirsiniz.

Kaynaklar