তাৎক্ষণিকতার সাথে পরিষেবা কর্মী আপডেটগুলি পরিচালনা করা

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

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

কোড আপনার পৃষ্ঠায় রাখা

নিম্নলিখিত কোডটি workbox-window এর একটি CDN-হোস্ট করা সংস্করণ থেকে আমদানি করা JavaScript মডিউল ব্যবহার করে একটি ইনলাইন <script> উপাদানে চলে। এটি workbox-window ব্যবহার করে একজন পরিষেবা কর্মীকে নিবন্ধন করে এবং পরিষেবা কর্মী অপেক্ষার পর্যায়ে আটকে গেলে প্রতিক্রিয়া জানাবে। যখন একজন অপেক্ষমাণ পরিষেবা কর্মী পাওয়া যায়, তখন এই কোডটি ব্যবহারকারীকে জানায় যে সাইটের একটি আপডেট সংস্করণ উপলব্ধ রয়েছে এবং তাদের পুনরায় লোড করার জন্য অনুরোধ করে৷

<!-- This script tag uses JavaScript modules, so the proper `type` attribute value is required -->
<script type="module">
  // This code sample uses features introduced in Workbox v6.
  import {Workbox} from 'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-window.prod.mjs';

  if ('serviceWorker' in navigator) {
    const wb = new Workbox('/sw.js');
    let registration;

    const showSkipWaitingPrompt = async (event) => {
      // Assuming the user accepted the update, set up a listener
      // that will reload the page as soon as the previously waiting
      // service worker has taken control.
      wb.addEventListener('controlling', () => {
        // At this point, reloading will ensure that the current
        // tab is loaded under the control of the new service worker.
        // Depending on your web app, you may want to auto-save or
        // persist transient state before triggering the reload.
        window.location.reload();
      });

      // When `event.wasWaitingBeforeRegister` is true, a previously
      // updated service worker is still waiting.
      // You may want to customize the UI prompt accordingly.

      // This code assumes your app has a promptForUpdate() method,
      // which returns true if the user wants to update.
      // Implementing this is app-specific; some examples are:
      // https://open-ui.org/components/alert.research or
      // https://open-ui.org/components/toast.research
      const updateAccepted = await promptForUpdate();

      if (updateAccepted) {
        wb.messageSkipWaiting();
      }
    };

    // Add an event listener to detect when the registered
    // service worker has installed but is waiting to activate.
    wb.addEventListener('waiting', (event) => {
      showSkipWaitingPrompt(event);
    });

    wb.register();
  }
</script>

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

তারা গ্রহণ করলে, messageSkipWaiting() অপেক্ষমাণ পরিষেবা কর্মীকে self.skipWaiting() চালু করতে বলে, যার অর্থ এটি সক্রিয় হতে শুরু করবে। একবার সক্রিয় হয়ে গেলে, নতুন পরিষেবা কর্মী যে কোনও বিদ্যমান ক্লায়েন্টের নিয়ন্ত্রণ নেবে, workbox-window controlling ইভেন্টটিকে ট্রিগার করবে। যখন এটি ঘটে, বর্তমান পৃষ্ঠাটি সমস্ত পূর্বনির্ধারিত সম্পদের সর্বশেষ সংস্করণ এবং আপডেট করা পরিষেবা কর্মীতে পাওয়া যেকোন নতুন রাউটিং লজিক ব্যবহার করে পুনরায় লোড হয়।

দ্রষ্টব্য: এই সমস্যার জন্য এটি শুধুমাত্র একটি পদ্ধতি। সমস্যাটির আরও বিশদ ব্যাখ্যা এবং বিকল্প পদ্ধতির জন্য, Redfin Engineering- এর এই নিবন্ধটি পড়ুন।

আপনার পরিষেবা কর্মীর মধ্যে রাখা কোড

একবার আপনি আপনার পৃষ্ঠার পূর্ববর্তী বিভাগ থেকে কোডটি পেয়ে গেলে, আপনাকে আপনার পরিষেবা কর্মীর সাথে কিছু কোড যোগ করতে হবে যা এটিকে কখন অপেক্ষার পর্বটি এড়িয়ে যেতে হবে তা জানতে দেয়৷ আপনি যদি workbox-build থেকে generateSW ব্যবহার করেন এবং আপনি এটির skipWaiting বিকল্পটি false (ডিফল্ট) এ সেট করে থাকেন, তাহলে আপনি যেতে পারেন, কারণ নীচের কোডটি আপনার তৈরি করা পরিষেবা কর্মী ফাইলে স্বয়ংক্রিয়ভাবে অন্তর্ভুক্ত হবে।

আপনি যদি আপনার নিজের পরিষেবা কর্মী লিখছেন - সম্ভবত injectManifest মোডে ওয়ার্কবক্সের বিল্ড টুলগুলির একটির সাথে - আপনাকে নিম্নলিখিত কোডটি যোগ করতে হবে:

addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

এটি workbox-window থেকে SKIP_WAITING এর type মান সহ পরিষেবা কর্মীকে পাঠানো বার্তাগুলি শুনবে এবং যখন এটি ঘটে, তখন self.skipWaiting() কল করে। workbox-window messageSkipWaiting() পদ্ধতি, আগের কোড নমুনায় দেখানো হয়েছে, এই বার্তা পাঠানোর জন্য দায়ী।

আপনি একটি প্রম্পট দেখাতে হবে?

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

• আপনি ব্যাপকভাবে precaching ব্যবহার. যেখানে স্ট্যাটিক সম্পদগুলি উদ্বিগ্ন, আপনি যদি নেভিগেশন অনুরোধের জন্য একটি নেটওয়ার্ক-প্রথম বা নেটওয়ার্ক-শুধু কৌশল ব্যবহার করেন, তবে অলস-লোড স্ট্যাটিক সম্পদগুলি ব্যবহার করলে পরবর্তীতে আপনার সমস্যা হতে পারে। এটি এমন পরিস্থিতির কারণ হতে পারে যেখানে সংস্করণযুক্ত সম্পদগুলি পরিবর্তিত হতে পারে এবং একজন পরিষেবা কর্মী সেগুলিকে আগে থেকে সংরক্ষণ করেননি৷ এখানে একটি পুনরায় লোড বোতাম অফার করা কিছু অপ্রত্যাশিত আচরণ এড়াতে পারে।
• আপনি precached HTML পরিবেশন করছেন. এই ক্ষেত্রে, আপনি দৃঢ়ভাবে পরিষেবা কর্মী আপডেটগুলিতে একটি পুনরায় লোড বোতাম অফার করার বিষয়ে বিবেচনা করা উচিত, যেহেতু আপডেট হওয়া পরিষেবা কর্মী নিয়ন্ত্রণ না করা পর্যন্ত সেই HTML-এর আপডেটগুলি স্বীকৃত হবে না৷
• আপনি রানটাইম ক্যাশিং উপর বেশিরভাগ নির্ভর না হলে. রানটাইমে রিসোর্স ক্যাশে করার সময়, আপনাকে ব্যবহারকারীকে জানাতে হবে না যে তাদের পুনরায় লোড করা উচিত। সংস্করণকৃত সম্পদের পরিবর্তনের সাথে সাথে, সেগুলি যথাসময়ে রানটাইম ক্যাশে যোগ করা হবে- ধরে নিচ্ছি নেভিগেশন অনুরোধগুলি একটি নেটওয়ার্ক-প্রথম বা নেটওয়ার্ক-শুধুমাত্র কৌশল ব্যবহার করে।
• একটি stale-while-revalidate কৌশল ব্যবহার করার সময়, আপনি পরিষেবা কর্মী আপডেটের ব্যবহারকারীদের অবহিত করতে workbox-broadcast-update মডিউল ব্যবহার করার কথা বিবেচনা করতে পারেন।

আপনাকে একজন পরিষেবা কর্মীকে আপডেটের বিষয়ে ব্যবহারকারীকে অবহিত করতে হবে কিনা তা নির্ভর করে আপনার আবেদন এবং এর অনন্য প্রয়োজনীয়তার উপর। আপনি যদি দেখেন যে যখন আপনি একজন নতুন পরিষেবা কর্মীকে বের করে দেন তখন আপনার ব্যবহারকারীরা অদ্ভুত আচরণের সম্মুখীন হচ্ছেন, এটি সম্ভবত আপনার সেরা সংকেত যে আপনার তাদের জানানো উচিত।