প্রগতিশীল ওয়েব অ্যাপস: কর্মীদের সাথে কাজ করা

1. স্বাগতম

এই ল্যাবে, আপনি দুটি খোলা উইন্ডোর মধ্যে অবস্থা ভাগ করার জন্য একটি বিদ্যমান ওয়েব অ্যাপ্লিকেশন অ্যাড অ্যাড ওয়েব ওয়ার্কার নেবেন। প্রোগ্রেসিভ ওয়েব অ্যাপ ওয়ার্কশপের জন্য সহচর কোডল্যাবগুলির একটি সিরিজের মধ্যে এটি অষ্টম ৷ আগের কোডল্যাব ছিল সার্ভিস ওয়ার্কার ইনক্লুডস । এটি সিরিজের চূড়ান্ত কোডল্যাব।

আপনি কি শিখবেন

• একাধিক খোলা উইন্ডোর মধ্যে একটি ভাগ করা কর্মী যোগ করুন
• কর্মীদের সাথে কাজ করা সহজ করতে Comlink ব্যবহার করুন

আপনি কি জানতে হবে

• জাভাস্ক্রিপ্ট

আপনি কি প্রয়োজন হবে

• একটি ব্রাউজার যা শেয়ার করা ওয়েব কর্মীদের সমর্থন করে

2. সেট আপ করুন

এই কোডল্যাবটি সম্পূর্ণ করার জন্য প্রয়োজনীয় স্টার্টার কোডটি ক্লোনিং বা ডাউনলোড করে শুরু করুন:

রেপো ক্লোন করুন

জিপ ডাউনলোড করুন

আপনি যদি রেপো ক্লোন করেন, নিশ্চিত করুন যে আপনি pwa06--working-with-workers শাখায় আছেন। জিপ ফাইলটিতে সেই শাখার কোডও রয়েছে।

এই কোডবেসের জন্য Node.js 14 বা উচ্চতর প্রয়োজন। কোডটি উপলব্ধ হয়ে গেলে, আপনার প্রয়োজনীয় সমস্ত নির্ভরতা ইনস্টল করার জন্য কোডের ফোল্ডারে কমান্ড লাইন থেকে npm ci চালান। তারপর, কোডল্যাবের জন্য ডেভেলপমেন্ট সার্ভার শুরু করতে npm start চালান।

সোর্স কোডের README.md ফাইলটি সমস্ত বিতরণ করা ফাইলের জন্য একটি ব্যাখ্যা প্রদান করে। এছাড়াও, এই কোডল্যাব জুড়ে আপনি যে মূল বিদ্যমান ফাইলগুলির সাথে কাজ করবেন তা নিম্নরূপ:

কী ফাইল

• 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 আপডেট করুন:

• comlink থেকে নামযুক্ত রপ্তানি wrap আমদানি করুন
• worker নামে একটি নতুন মডিউল-টাইপ করা শেয়ার্ড ওয়ার্কার তৈরি করুন, এর ধরনটি module সেট করুন এবং new URL প্যাটার্ন ব্যবহার করে এটিকে নির্দেশ করুন ( new URL('./worker.js', import.meta.url) )
• একটি compiler ভেরিয়েবল তৈরি করুন যা worker.port এর wrap
• সম্পাদকের আপডেট ফাংশনে ( editor.onUpdate ), ডাটাবেসে সামগ্রী সংরক্ষণ করার পরে, compiler.set সমাপ্ত হওয়ার জন্য অপেক্ষা করুন, বিষয়বস্তু পাস করুন

ব্যাখ্যা

একটি কমলিংক রপ্তানি মোড়ক উন্মোচিত ক্লাস পদ্ধতির মতো জিনিসগুলিকে এমনভাবে ব্যবহার করার অনুমতি দেয় যেন সেগুলি কোনও কর্মী সীমানা জুড়ে ভাগ করা হয়নি, একটি ব্যতিক্রম হল যে এখন সবকিছুই অ্যাসিঙ্ক্রোনাস৷ যেহেতু এটি একটি নিবেদিত কর্মীর পরিবর্তে একটি ভাগ করা কর্মী, কমলিঙ্ককে কর্মী বন্দরের পরিবর্তে শ্রমিকের পোর্ট মোড়ানো প্রয়োজন৷ এখন, যখনই সম্পাদকের একটি আপডেট করা হবে, বিষয়বস্তুটি কাজ করার জন্য কর্মীকে পাঠানো হবে!

5. পূর্বরূপ পৃষ্ঠা আপডেট করুন

চূড়ান্ত পদক্ষেপ হল শেয়ার্ড ওয়ার্কার থেকে কম্পাইল করা বিষয়বস্তু প্রিভিউতে নিয়ে আসা! এটি করার জন্য সেটআপটি মূলত একই, কিন্তু যেহেতু ফাংশনগুলি কর্মী সীমানার মধ্যে পাস করতে পারে না, এর পরিবর্তে ফাংশনের জন্য একটি প্রক্সি ব্যবহার করা প্রয়োজন৷ Comlink, আবার, সাহায্য করার জন্য এখানে আছে. নিম্নলিখিতগুলি করতে js/preview.js আপডেট করুন:

• comlink থেকে নামযুক্ত রপ্তানি wrap এবং proxy আমদানি করুন
• আপনি js/main.js এর মত শেয়ার্ড ওয়ার্কার তৈরি করুন এবং মোড়ানো করুন
• একটি প্রক্সি ফাংশন সহ কম্পাইলারের subscribe পদ্ধতিতে কল করুন যা প্রাকদর্শন এলাকার ভিতরের HTML এ আগত ডেটার compiled সম্পত্তি সেট করে

একবার হয়ে গেলে, প্রিভিউ খুলুন, এডিটরে টাইপ করা শুরু করুন এবং আপনার মার্কডাউন স্বয়ংক্রিয়ভাবে কম্পাইল করা এবং রিয়েল-টাইমে প্রিভিউ এরিয়াতে উপস্থিত হতে দেখে আনন্দিত ও উত্তেজিত হন, সব কিছুই পৃষ্ঠার মূল থ্রেড ব্লক না করেই!

6. অভিনন্দন!

আপনি একাধিক PWA দৃষ্টান্তের মধ্যে রাষ্ট্র ভাগ করতে একটি শেয়ার্ড ওয়ার্কার ব্যবহার করতে শিখেছেন।