Progresif Web Uygulamaları: Çalışanlarla Çalışma

1. Hoş geldiniz

Bu laboratuvarda, mevcut bir web uygulamasına web çalışanı ekleyerek iki açık pencere arasında durumu paylaşacaksınız. Bu, Progresif Web Uygulaması atölyesi ile ilgili yardımcı codelab'lerin sekizincisidir. Önceki codelab'in adı Service Worker Includes idi. Bu, serideki son codelab'dir.

Neler öğreneceksiniz?

  • Açık olan birden fazla pencere arasında paylaşılan çalışan ekleme
  • İşçilerle çalışmayı kolaylaştırmak için Comlink'i kullanma

Bilmeniz gerekenler

  • JavaScript

İhtiyacınız olanlar

2. Hazırlanın

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

Depoyu klonlarsanız pwa06--working-with-workers 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 - Sayfa JavaScript dosyasını önizleme
  • js/main.js - Ana uygulama JavaScript dosyası

3. Çalışan Yazma

Şu anda web uygulamanızın önizleme işlevi yalnızca yükleme sırasında en son içeriği gösteriyor. İdeal olarak, kullanıcı yazarken canlı önizleme gösterilmelidir. Bu işlem için büyük miktarda veri derlenmesi ve iki farklı açık pencere arasında taşınması gerekir. Bu nedenle, açık pencerelerin ana iş parçacığında bu işlemi yapmak istemeyiz. Bunun yerine paylaşılan bir web çalışanı kullanalım.

Başlamak için js/worker.js aşağıdaki kodu içeren bir dosya oluşturun:

import { expose } from 'comlink';
import { marked } from 'marked';

class Compiler {
  state = {
    raw: '',
    compiled: '',
  };
  subscribers = [];

  async set(content) {
    this.state = {
      raw: content,
      compiled: marked(content),
    };

    await Promise.all(this.subscribers.map((s) => s(this.state)));
  }

  subscribe(cb) {
    this.subscribers.push(cb);
  }
}

const compiler = new Compiler();

onconnect = (e) => expose(compiler, e.ports[0]);

Açıklama

Bu kod, içeriğin ayarlanmasına ve derlendikten sonra aboneliklerin çağrılmasına olanak tanıyan Compiler adlı bir sınıf oluşturur. Paylaşılan bir çalışan olduğundan bu sınıfın yalnızca tek bir örneği kullanılmalıdır. Bu nedenle, Compiler sınıfının yeni bir örneği oluşturulur. Ardından, bu sınıfla çalışmayı işçinin dışından sorunsuz hale getirmek için derleyici örneğini kullanıma sunmak üzere Comlink kullanılır. Böylece, bu sınıfta kullanılan kodda tanımlanmış gibi tüm yöntemleri kullanabiliriz. Bu, özel bir işçi yerine paylaşılan bir işçi olduğundan tüm bağlantılara sunulması gerekir.

4. Çalışana İçerik Gönderme

Çalışan oluşturulduğuna göre artık içeriği ona göndermemiz gerekiyor. Bunun için js/main.js öğesini aşağıdaki şekilde güncelleyin:

  • Adlandırılmış dışa aktarma işlemini wrap, comlink hizmetinden içe aktarın.
  • worker adlı yeni bir modül türünde Shared Worker oluşturun, türünü module olarak ayarlayın ve new URL kalıbını (new URL('./worker.js', import.meta.url)) kullanarak bu Shared Worker'ı işaret edin.
  • compiler değişkeni oluşturun. Bu değişken, wrap worker.port
  • İçeriği veritabanına kaydettikten sonra, düzenleyicinin güncelleme işlevinde (editor.onUpdate) compiler.set'nin tamamlanmasını bekleyin ve içeriği iletin.

Açıklama

Comlink dışa aktarma işlemini sarmalama, artık her şey eşzamansız olsa da, kullanıma sunulan sınıf yöntemleri gibi öğelerin bir çalışan sınırı boyunca paylaşılmamış gibi kullanılmasını sağlar. Bu, özel bir worker yerine paylaşılan bir worker olduğundan Comlink'in worker'ın kendisi yerine worker'ın bağlantı noktasını sarması gerekir. Artık düzenleyicide her güncelleme yapıldığında içerik, üzerinde çalışılması için çalışana gönderilecek.

5. Önizleme sayfasını güncelleme

Son adım, derlenen içeriği paylaşılan çalışandan önizlemeye aktarmaktır. Bunu yapmak için gereken kurulum büyük ölçüde aynıdır ancak işlevler çalışan sınırı arasında aktarılamadığından bunun yerine işlev için bir proxy kullanılması gerekir. Comlink size yardımcı olmaya hazır. Aşağıdakileri yapmak için js/preview.js uygulamasını güncelleyin:

  • comlink dosyasından wrap ve proxy adlı dışa aktarımları içe aktarın.
  • Paylaşılan çalışanı js/main.js bölümünde yaptığınız gibi oluşturun ve sarmalayın.
  • Gelen verilerin compiled özelliğini önizleme alanının innerHTML'sine ayarlayan bir proxy işleviyle derleyicinin subscribe yöntemini çağırın.

İşlem tamamlandıktan sonra önizlemeyi açın, düzenleyicide yazmaya başlayın ve her iki sayfanın ana iş parçacığını engellemeden Markdown'ınızın otomatik olarak derlenip önizleme alanında gerçek zamanlı olarak görünmesini izleyin.

6. Tebrikler!

Durumu birden fazla PWA örneği arasında paylaşmak için paylaşılan çalışanları kullanmayı öğrendiniz.