برنامه های وب پیشرو: کار با کارگران

1. خوش آمدید

در این آزمایشگاه، شما یک برنامه وب موجود را می‌گیرید و اضافه می‌کنید تا حالت را بین دو پنجره باز به اشتراک بگذارید. این هشتمین مورد از مجموعه کدهای همراه برای کارگاه برنامه کاربردی وب پیشرو است. آزمایشگاه کد قبلی Service Worker Includes بود. این آخرین کد لبه سری است.

چیزی که یاد خواهید گرفت

  • یک کارگر مشترک بین چند پنجره باز اضافه کنید
  • از Comlink برای تسهیل کار با کارگران استفاده کنید

آنچه شما باید بدانید

  • جاوا اسکریپت

آنچه شما نیاز خواهید داشت

2. راه اندازی کنید

با شبیه‌سازی یا دانلود کد شروع مورد نیاز برای تکمیل این لبه کد شروع کنید:

اگر مخزن را شبیه سازی می کنید، مطمئن شوید که در شاخه pwa06--working-with-workers هستید. فایل فشرده حاوی کد آن شاخه نیز می باشد.

این پایگاه کد به Node.js 14 یا بالاتر نیاز دارد. هنگامی که کد را در دسترس دارید، npm ci از خط فرمان موجود در پوشه کد اجرا کنید تا تمام وابستگی های مورد نیاز خود را نصب کنید. سپس، npm start اجرا کنید تا سرور توسعه برای Codelab راه اندازی شود.

فایل README.md کد منبع توضیحی برای همه فایل های توزیع شده ارائه می دهد. علاوه بر این، فایل‌های موجود کلیدی که در سرتاسر این Codelab با آنها کار خواهید کرد، به شرح زیر است:

فایل های کلیدی

  • js/preview.js - فایل جاوا اسکریپت صفحه پیش نمایش
  • js/main.js - فایل جاوا اسکریپت برنامه اصلی

3. یک کارگر بنویسید

در حال حاضر، عملکرد پیش‌نمایش برنامه وب شما فقط آخرین محتوا را در حال بارگذاری نشان می‌دهد. در حالت ایده‌آل، یک پیش‌نمایش زنده هنگام تایپ کاربر نشان می‌دهد. این امر مستلزم گردآوری مقادیر بالقوه زیادی از داده و انتقال آن بین دو پنجره باز متفاوت است. به همین دلیل، این کاری نیست که ما بخواهیم در موضوع اصلی هیچ یک از پنجره های باز انجام دهیم. در عوض، بیایید از یک وب کار مشترک استفاده کنیم.

برای شروع، یک فایل js/worker.js با کد زیر ایجاد کنید:

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

توضیح

این کد کلاسی به نام Compiler ایجاد می‌کند که اجازه تنظیم محتوا را می‌دهد و اجازه می‌دهد اشتراک‌ها پس از کامپایل شدن محتوا فراخوانی شوند. از آنجایی که این یک کارگر مشترک است، باید فقط یک نمونه از این کلاس استفاده شود، بنابراین یک نمونه جدید از Compiler نمونه سازی می شود. سپس، برای اینکه کار با این کلاس از بیرون کارگر یکپارچه به نظر برسد، از Comlink برای افشای نمونه کامپایلر استفاده می‌شود و به ما اجازه می‌دهد تا از تمام متدهای موجود در آن استفاده کنیم که گویی در کد با استفاده از آن اعلام شده است. از آنجا که این یک کارگر مشترک به جای یک کارگر اختصاصی است، باید در معرض همه ارتباطات قرار گیرد.

4. ارسال محتوا برای کارگر

با ایجاد کارگر، اکنون باید محتوا را به آن ارسال کنیم. برای انجام این کار، js/main.js برای انجام کارهای زیر به روز کنید:

  • wrap صادراتی نامگذاری شده را از comlink وارد کنید
  • یک Shared Worker با ماژول جدید به نام worker ایجاد کنید، نوع آن را روی module تنظیم کنید و با استفاده از الگوی new URL به آن اشاره کنید ( new URL('./worker.js', import.meta.url) )
  • یک متغیر compiler ایجاد کنید که worker.port را wrap
  • در عملکرد به‌روزرسانی ویرایشگر ( editor.onUpdate )، پس از ذخیره محتوا در پایگاه داده، منتظر بمانید تا compiler.set تمام شود و محتوا را ارسال کنید.

توضیح

بسته بندی صادرات Comlink اجازه می دهد تا چیزهایی مانند روش های کلاس در معرض استفاده را به گونه ای بکار ببرند که گویی در سراسر یک مرز کارگر به اشتراک گذاشته نشده اند، به استثنای این که اکنون همه چیز ناهمزمان است. از آنجا که این یک کارگر مشترک به جای یک کارگر اختصاصی است، Comlink باید پورت کارگر را به جای خود کارگر بپیچد. حال هر زمان که ویرایشگر به روز رسانی شود، محتوا به کارگر ارسال می شود تا روی آن کار شود!

5. صفحه پیش نمایش را به روز کنید

مرحله آخر این است که محتوای کامپایل شده را از کارگر اشتراکی در پیش نمایش قرار دهید! راه اندازی برای انجام این کار تا حد زیادی یکسان است، اما از آنجا که توابع نمی توانند بین مرز کارگر عبور کنند، باید به جای آن از یک پروکسی برای تابع استفاده شود. Comlink، دوباره، اینجا برای کمک است. js/preview.js برای انجام کارهای زیر به روز کنید:

  • wrap صادراتی و proxy نامگذاری شده را از comlink وارد کنید
  • همان کاری که در js/main.js انجام دادید، worker اشتراکی را ایجاد و بسته بندی کنید
  • فراخوانی متد subscribe کامپایلر با یک تابع پراکسی که ویژگی compiled داده های ورودی را به HTML داخلی ناحیه پیش نمایش تنظیم می کند.

پس از اتمام، پیش‌نمایش را باز کنید، شروع به تایپ کردن در ویرایشگر کنید، و از تماشای علامت‌گذاری به‌طور خودکار جمع‌آوری و به‌صورت بلادرنگ در ناحیه پیش‌نمایش ظاهر می‌شود، سرگرم و هیجان‌زده شوید، همه بدون مسدود کردن رشته اصلی هر یک از صفحات!

6. تبریک!

شما یاد گرفته اید که چگونه از یک کارگر اشتراکی برای اشتراک گذاری حالت بین چندین نمونه PWA استفاده کنید.