প্রগতিশীল ওয়েব অ্যাপস: পরিষেবা কর্মী অন্তর্ভুক্ত

1. স্বাগতম

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

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

  • একটি পরিষেবা কর্মীর একটি স্ট্রিমিং প্রতিক্রিয়া যোগ করুন

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

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

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

2. সেট আপ করুন

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

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

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

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

কী ফাইল

  • js/preview.js - পৃষ্ঠার জাভাস্ক্রিপ্ট ফাইলের পূর্বরূপ দেখুন
  • service-worker.js - PWA এর পরিষেবা কর্মী ফাইল

3. স্ট্রিমিং প্রিভিউ

পূর্বরূপ পৃষ্ঠাটি তিনটি পরিষ্কার টুকরোতে বিভক্ত করা যেতে পারে: মাথা, সংকলিত শরীর এবং পা। বর্তমানে, সংকলিত বডিটি ক্লায়েন্ট-সাইড রেন্ডার করা হচ্ছে, তবে এটি হওয়ার কোন কারণ নেই। এর সার্ভিস ওয়ার্কার এটি সরানো যাক.

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

এটি করার জন্য, প্রথমে js/preview.js এ বিষয়বস্তু পরিষ্কার করুন যাতে এটি আর কম্পাইলিং করছে না। তারপর, service-worker.js এ, নিম্নলিখিতগুলি করুন:

  • workbox-streams থেকে streamsStrategy হিসাবে নামযুক্ত রপ্তানি strategy আমদানি করুন
  • নামযুক্ত রপ্তানি openDB এবং idb থেকে আমদানি করুন এবং marked থেকে marked নামযুক্ত রপ্তানি আমদানি করুন
  • নেভিগেশনের জন্য রুট নিবন্ধনের আগে, একটি নতুন রুট নিবন্ধন যোগ করুন
    • এটি পরীক্ষা করা উচিত যে URL এর pathname /preview
    • এটি একটি স্ট্রিমিং কৌশল ব্যবহার করা উচিত যে
      1. preview/index.html এর বিষয়বস্তুর সাথে সাড়া দিন কন্টেন্ট main ট্যাগের
      2. settings-store ইনডেক্সডডিবি খোলে এমন একটি ফাংশনের সাথে সাড়া দিন, settings অবজেক্ট স্টোর থেকে বিষয়বস্তু পায় এবং সেই সামগ্রীর মার্কডাউন রেন্ডার করা সংস্করণ ফেরত দেয়।
      3. ক্লোজিং main , body এবং html ট্যাগ দিয়ে সাড়া দিন।

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

4. অভিনন্দন!

আপনি পরিষেবা কর্মী এবং ক্যাশে স্টোরেজ API ব্যবহার করে কীভাবে আপনার ওয়েব অ্যাপ অফলাইনে নিতে হয় তা শিখেছেন।

সিরিজের পরবর্তী কোডল্যাব হল ওয়ার্কিং উইথ ওয়ার্কার্স