Progresif web uygulamaları: Hizmet çalışanı içerikleri

1. Hoş geldiniz

Bu laboratuvarda, mevcut bir web uygulamasına akış rotası yanıtı ekleyerek performansı artıracaksınız. Bu codelab, Progresif Web Uygulaması atölyesi ile ilgili yardımcı codelab'lerin yedincisidir. Önceki codelab'in başlığı Empowering your PWA idi. Bu seride bir codelab daha var.

Neler öğreneceksiniz?

• Bir hizmet çalışanına akış yanıtı ekleme

Bilmeniz gerekenler

• JavaScript

İhtiyacınız olanlar

• Service Workers ve Streams'i destekleyen bir tarayıcı

2. Hazırlanın

Bu codelab'i tamamlamak için gereken başlangıç kodunu klonlayarak veya indirerek başlayın:

Depoyu Klonlama

Zip dosyasını indir

Depoyu klonlarsanız pwa06--service-worker-includes dalında olduğunuzdan emin olun. Zip dosyası, söz konusu şubenin kodunu da içerir.

Bu kod tabanı için Node.js 14 veya sonraki bir sürümü gerekir. Kod kullanılabilir hale geldiğinde, ihtiyacınız olan tüm bağımlılıkları yüklemek için komut satırından kodun klasöründe npm ci komutunu çalıştırın. Ardından, kod laboratuvarı için geliştirme sunucusunu başlatmak üzere npm start komutunu çalıştırın.

Kaynak kodunun README.md dosyası, dağıtılan tüm dosyalarla ilgili açıklama sağlar. Ayrıca, bu codelab boyunca kullanacağınız mevcut temel dosyalar şunlardır:

Önemli Dosyalar

• js/preview.js - Sayfanın JavaScript dosyasını önizleme
• service-worker.js - PWA'nın hizmet çalışanı dosyası

3. Yayın Önizlemesi

Önizleme sayfası üç net parçaya ayrılabilir: başlık, derlenmiş gövde ve altbilgi. Şu anda derlenmiş gövde istemci tarafında oluşturuluyor ancak bunun için bir neden yok. Bunu Service Worker'a taşıyalım.

Gövdeyi derlemek için eşzamansız içerik araması yapılır. Gezinme yanıtında asenkron çalışma maliyetli olduğundan, bilinen içeriği önce tarayıcıya aktarmak için harika bir fırsattır.

Bunun için öncelikle js/preview.js içindeki içeriği temizleyerek derleme işleminin durdurulduğundan emin olun. Ardından, service-worker.js bölümünde aşağıdakileri yapın:

• strategy adlı dışa aktarma işlemini workbox-streams hizmetinden streamsStrategy olarak içe aktarın
• Adlandırılmış dışa aktarma işlemini openDB ve idb konumundan, adlandırılmış dışa aktarma işlemini marked ve marked konumundan içe aktarın.
• Navigasyon için rota kaydından önce yeni bir rota kaydı ekleyin
  • URL'nin pathname kısmının /preview olup olmadığını kontrol etmelidir.
  • Aşağıdaki koşulları karşılayan bir yayın stratejisi kullanılmalıdır:
    1. preview/index.html etiketinin içeriğiyle main etiketinin içerik alanından yanıt verme
    2. settings-store IndexedDB'yi açan, settings nesne deposundan içeriği alan ve bu içeriğin oluşturulmuş Markdown sürümünü döndüren bir işlevle yanıt ver.
    3. Kapanış main, body ve html etiketleriyle yanıt verin.

Yayın rotası kaydını normal navigasyon kaydından önce yaptığınızdan emin olun. Rota kayıtları, hizmet çalışanına dahil edildikleri sırayla yürütülür. Bu nedenle, işlemi tersine yaparsanız istek zaten işlenmiş olacağından akış rotası hiçbir zaman yürütülmez.

Akış yanıtı etkinleştirildikten sonra geri dönün ve tarayıcınızda site önizlemesini açın. Sayfa içeriğinin artık doğrudan hizmet çalışanından oluşturulduğunu görmelisiniz. İstemci tarafı kodu gerekmez.

Değişiklikleri görmüyorsanız Chrome DevTools'daki Applications panelinde Service Workers sekmesindeki etkin servis çalışanını kontrol ederek yeni servis çalışanınızın sayfanız tarafından kullanıldığından emin olun.

4. Tebrikler!

Service worker'ları ve önbellek depolama API'sini kullanarak web uygulamanızı nasıl çevrimdışı hale getireceğinizi öğrendiniz.

Serideki bir sonraki codelab, Çalışanlarla Çalışma'dır.