Progressive Web App: Bekerja dengan Worker

1. Selamat Datang

Dalam lab ini, Anda akan mengambil aplikasi web yang ada dan menambahkan pekerja web untuk membagikan status di antara dua jendela yang terbuka. Ini adalah codelab kedelapan dalam serangkaian codelab pendamping untuk workshop Progressive Web App. Codelab sebelumnya adalah Service Worker Includes. Ini adalah codelab terakhir dalam seri ini.

Yang akan Anda pelajari

  • Menambahkan pekerja bersama di antara beberapa jendela yang terbuka
  • Gunakan Comlink untuk mempermudah bekerja dengan pekerja

Yang perlu Anda ketahui

  • JavaScript

Yang akan Anda butuhkan

2. Memulai Persiapan

Mulai dengan meng-clone atau mendownload kode awal yang diperlukan untuk menyelesaikan codelab ini:

Jika Anda meng-clone repo, pastikan Anda berada di cabang pwa06--working-with-workers. File ZIP juga berisi kode untuk cabang tersebut.

Basis kode ini memerlukan Node.js 14 atau yang lebih baru. Setelah kode tersedia, jalankan npm ci dari command line di folder kode untuk menginstal semua dependensi yang Anda perlukan. Kemudian, jalankan npm start untuk memulai server pengembangan codelab.

File README.md kode sumber memberikan penjelasan untuk semua file yang didistribusikan. Selain itu, berikut adalah file utama yang sudah ada dan akan Anda gunakan selama codelab ini:

File Utama

  • js/preview.js - File JavaScript halaman pratinjau
  • js/main.js - File JavaScript aplikasi utama

3. Menulis Pekerja

Saat ini, fungsi pratinjau aplikasi web Anda hanya menampilkan konten terbaru saat dimuat. Idealnya, pratinjau langsung akan ditampilkan saat pengguna mengetik. Tindakan ini memerlukan kompilasi data dalam jumlah yang berpotensi besar dan memindahkannya di antara dua jendela terbuka yang berbeda. Oleh karena itu, kita tidak ingin melakukan hal ini di thread utama jendela yang terbuka. Sebagai gantinya, mari kita gunakan pekerja web bersama.

Untuk memulai, buat file js/worker.js dengan kode berikut:

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]);

Penjelasan

Kode ini menyiapkan class, yang disebut Compiler, yang memungkinkan konten ditetapkan dan memungkinkan langganan dipanggil setelah konten tersebut dikompilasi. Karena merupakan pekerja bersama, hanya boleh ada satu instance class ini yang digunakan, sehingga instance Compiler baru di-instantiate. Kemudian, agar penggunaan class ini terasa lancar dari luar pekerja, Comlink digunakan untuk mengekspos instance compiler, sehingga kita dapat menggunakan semua metodenya seolah-olah dideklarasikan dalam kode yang menggunakannya. Karena ini adalah pekerja bersama, bukan pekerja khusus, pekerja ini harus diekspos ke semua koneksi.

4. Mengirim Konten ke Worker

Setelah pekerja dibuat, kita perlu mengirim konten ke dalamnya. Untuk melakukannya, update js/main.js untuk melakukan hal berikut:

  • Impor ekspor bernama wrap dari comlink
  • Buat Shared Worker baru berjenis modul bernama worker, tetapkan jenisnya ke module, dan tunjuk ke Shared Worker tersebut menggunakan pola new URL (new URL('./worker.js', import.meta.url))
  • Buat variabel compiler yang wrap worker.port
  • Dalam fungsi update editor (editor.onUpdate), setelah menyimpan konten ke database, tunggu hingga compiler.set selesai, dengan meneruskan konten

Penjelasan

Membungkus ekspor Comlink memungkinkan hal-hal seperti metode class yang diekspos digunakan seolah-olah tidak dibagikan di seluruh batas pekerja, dengan pengecualian bahwa sekarang semuanya bersifat asinkron. Karena ini adalah pekerja bersama, bukan pekerja khusus, Comlink perlu membungkus port pekerja, bukan pekerja itu sendiri. Sekarang, setiap kali editor diperbarui, konten akan dikirim ke pekerja untuk diproses.

5. Memperbarui Halaman Pratinjau

Langkah terakhir adalah mendapatkan konten yang dikompilasi dari pekerja bersama ke pratinjau. Penyiapannya sebagian besar sama, tetapi karena fungsi tidak dapat diteruskan di antara batas pekerja, proxy untuk fungsi harus digunakan sebagai gantinya. Comlink sekali lagi siap membantu. Perbarui js/preview.js untuk melakukan hal berikut:

  • Impor ekspor bernama wrap dan proxy dari comlink
  • Buat dan bungkus pekerja bersama seperti yang Anda lakukan di js/main.js
  • Panggil metode subscribe compiler dengan fungsi proxy yang menetapkan properti compiled data yang masuk ke HTML dalam area pratinjau

Setelah selesai, buka pratinjau, mulai mengetik di editor, dan nikmati serta kagumi saat markdown Anda dikompilasi secara otomatis dan muncul secara real time di area pratinjau, tanpa memblokir thread utama halaman mana pun.

6. Selamat!

Anda telah mempelajari cara menggunakan shared worker untuk membagikan status di antara beberapa instance PWA.