Sorun giderme ve günlük kaydı

Service Worker'da hata ayıklama işlemi zordur. Yaşam döngüsü, güncellemeler, önbellekler ve bunların arasındaki etkileşimle uğraşırsınız. Workbox, hizmet çalışanının geliştirilmesini kolaylaştırdığı gibi bilgilendirici günlük kaydı sayesinde hata ayıklamayı da kolaylaştırır. Bu sayfada, kullanılabilir hata ayıklama araçlarından bazılarına, Workbox'ın günlük kaydının nasıl çalıştığına ve nasıl yapılandırılabileceğine değineceğiz.

Kullanılabilir sorun giderme araçları

Tarayıcıda, Service Worker geliştirirken hata ayıklamak ve sorun gidermek için birçok araç bulunur. İstediğiniz tarayıcıyı kullanmaya başlamanıza yardımcı olacak birkaç kaynağı burada bulabilirsiniz.

Chrome ve Edge

Chrome (ve Blink motorunu temel alan Edge'in son sürümleri) güçlü bir geliştirici araçları setine sahiptir. Bu araçlardan bazılarına, özellikle de Chrome'un Geliştirici Araçları'nda, bu dokümanın önceki bölümlerinde ele alınmıştır ancak keşfedilecek daha pek çok şey vardır:

• Progresif web uygulamalarında hata ayıklama
• Chrome Geliştirici Araçları'nda Ağ Etkinliğini Denetleme
• Video: Debugging Service Workers in Chrome
• Codelab: Hizmet Çalışanlarında Hata Ayıklama

Firefox

Firefox kullanıcıları aşağıdaki kaynaklara başvurabilir:

• Firefox Geliştirici Araçları Uygulama Panelini kullanarak hizmet çalışanlarında hata ayıklama
• Video: Firefox'ta Service Workers Hata Ayıklamaları

Safari

Safari'de şu anda hizmet çalışanlarında hata ayıklamak için daha sınırlı bir geliştirici aracı seti bulunmaktadır. Aşağıdaki kaynaklardan yararlanarak bunlar hakkında daha fazla bilgi edinebilirsiniz:

• Hizmetinizdeki Çalışanlar
• Video: Debugging Service Workers in Safari (Safari'de Hizmet Çalışanları için Hata Ayıklama).

Çalışma kutusu günlük kaydı

Workbox'ın sunduğu önemli geliştirici deneyimi iyileştirmelerinden biri de bilgilendirici günlük kaydıdır. Günlük kaydı etkinleştirildiğinde Workbox, etkinliklerinin hemen hemen tamamını ayırt edici ve işlevsel bir şekilde günlüğe kaydeder.

Workbox'ın geliştirme derlemeleri günlük kaydını varsayılan olarak etkinleştirirken, üretim derlemeleri bunu kapatır. Özel bir Workbox paketi oluşturmanıza veya workbox-sw aracılığıyla önceden paketlenmiş bir kopya kullanmanıza bağlı olarak, geliştirme ve üretim derlemeleri arasında geçiş yapmak için farklı adımlar vardır.

Paketleyici ile veya paketleyici olmadan

Paketleyiciler, ayrı ayrı modüllerden kod alan ve tarayıcıda çalışmaya hazır JavaScript çıkışı oluşturan araçlardır. Bir paketleyici kullanırken önbelleğe alma işlemine yardımcı olan paketleyiciye özel bir Workbox eklentisi de kullanabilir (ör. workbox-webpack-plugin) veya Workbox çalışma zamanı önbelleğe alma mantığını paket haline getiriyor olabilirsiniz. Her iki durumda da, paketleyici yapılandırmasında bir üretim modu ayarlanmasından Çalışma Kutusu'nun günlük kaydı etkilenir:

• Web paketinde, mode yapılandırma seçeneği 'production' veya 'development' olarak ayarlanabilir. workbox-webpack-plugin, Workbox'taki bu değere göre üretim veya geliştirme günlük kaydını kullanır.
• Birleştirme için rollup-plugin-workbox, Workbox'ın konsola herhangi bir şey kaydedip kaydetmeyeceğini de etkileyen bir mode yapılandırma seçeneğini kabul eder. Birleştirme özelliğini Workbox'a özel eklenti olmadan kullanıyorsanız process.env.NODE_ENV yerine 'development' veya 'production' eklentisini kullanmak için @rollup/plugin-replace aracını yapılandırmanız gerekir.

Varsayılan günlük kaydı davranışının geliştirme sırasında geçersiz kılınması gerektiğini varsayalım. Bu durumda, paketleyicinize uygun Workbox eklentisi, yapılandırmada hata ayıklama günlüklerine yönelik tercihin kodunu gömmenize olanak tanır. Örneğin, GenerateSW yöntemi için workbox-webpack-plugin ürününün mode seçeneğini kullanarak Workbox'a giriş yapmayı devre dışı bırakabilirsiniz.

Paketleyici olmadan

Paketleyiciler harika olsalar da her projenin bunlara ihtiyacı yoktur. Kendinizi, paketleyici kullanmayan bir projeye Workbox'ı eklemek istiyorsanız workbox-sw'i kullanmanız gerekir.

workbox-sw modülü diğer Workbox modüllerinin (ör. workbox-routing, workbox-precaching vb.) kaldırın. Geliştirme veya üretim paketlerinin yüklenip yüklenmeyeceğini, web uygulamanıza erişmek için kullanılan URL'ye bağlıdır. Varsayılan olarak workbox-sw, web uygulamanız http://localhost üzerinde çalışıyorsa Workbox'ın geliştirme sürümünü, diğer tüm zamanlarda üretim sürümünü yükler.

debug seçeneğini true olarak ayarlamak için Workbox'ın setConfig yöntemini çağırarak varsayılan davranışı geçersiz kılabilirsiniz:

// Load workbox-sw from a CDN
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');

// This must come before any other workbox.* methods.
workbox.setConfig({
  debug: true
});

// Now use workbox.routing.*, workbox.precaching.*, etc.

Herhangi bir iş akışındaki geliştirme derlemelerinin günlük kaydını devre dışı bırakma

Paketleyici kullanıp kullanmadığınızdan bağımsız olarak, hizmet çalışanınıza true adlı özel bir self.__WB_DISABLE_DEV_LOGS değişkeni atayarak geliştirme derlemelerindeki tüm günlük kayıtlarını devre dışı bırakabilirsiniz:

//
self.__WB_DISABLE_DEV_LOGS = true;

// The rest of your Workbox service worker code goes here

Bu yaklaşımın bir avantajı, paketleyici yapılandırmanızdan tamamen bağımsız olması ve workbox-sw ürününü doğrudan kullanmanız veya Workbox destekli hizmet çalışanınızı paketlemeyi yapacak bir paketleyiciye bağlı olmanız fark etmeksizin çalışmasıdır.

Daha fazla bilgi

Hatalı bir hizmet çalışanında neler olup bittiğini anlamakta zorlanıyorsanız ve günlük kaydı yeterli değilse Stack Overflow'da workbox etiketiyle bir soru yayınlamayı deneyin. Orada bir yanıt bulamazsanız GitHub'da sorun bildirin (katkıda bulunma yönergelerini okuduktan sonra). Bu, geniş bir geliştirici kitlesinin sorularınızı okuyup yanıtlamasını sağlamakla kalmaz, aynı zamanda sorunuzun cevabı, aynı durumda olan birine daha sonra yardımcı olabilir.