সার্ভিস ওয়ার্কার লাইফসাইকেল

Jake Archibald

সতর্কতা: এই পৃষ্ঠার এক বা একাধিক ডেমো আর কাজ করে না, কারণ Glitch হোস্টিং বন্ধ করে দিয়েছে।

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

এটি একটি ডিপ ডাইভ, তবে প্রতিটি বিভাগের শুরুতে বুলেটগুলি আপনার যা জানা দরকার তার বেশিরভাগই কভার করে।

ইনটেন্ট

লাইফসাইকেলের উদ্দেশ্য হল:

• অফলাইন-ফার্স্ট সম্ভব করে তোলে।
• বর্তমান সার্ভিস ওয়ার্কারকে বিঘ্নিত না করে নতুন সার্ভিস ওয়ার্কারকে নিজেকে প্রস্তুত করার অনুমতি দিন।
• নিশ্চিত করুন যে ইন-স্কোপ পৃষ্ঠাটি পুরো সময় ধরে একই সার্ভিস ওয়ার্কার (অথবা কোনও সার্ভিস ওয়ার্কার নয়) দ্বারা নিয়ন্ত্রিত হয়।
• একবারে আপনার সাইটের একটিই ভার্সন চলছে কিনা তা নিশ্চিত করুন।

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

সতর্কতা: ব্যবহারকারীরা ডেটা হারিয়ে যাওয়া একেবারেই পছন্দ করেন না। এর ফলে তারা খুব কষ্ট পায়।

প্রথম সার্ভিস ওয়ার্কার

সংক্ষেপে:

• install ইভেন্ট হল প্রথম ইভেন্ট যা কোনও সার্ভিস ওয়ার্কার পায় এবং এটি শুধু একবারই হয়।
• installEvent.waitUntil()-এ পাস করা প্রমিস আপনার ইনস্টলের সময়সীমা এবং সাফল্য বা ব্যর্থতার সিগন্যাল দেয়।
• কোনও সার্ভিস ওয়ার্কার ইনস্টল করা সম্পূর্ণ না হওয়া এবং "অ্যাক্টিভ" না হওয়া পর্যন্ত fetch এবং push-এর মতো ইভেন্ট পাবে না।
• সাধারণত, কোনও পৃষ্ঠার ফেচ সার্ভিস ওয়ার্কারের মাধ্যমে হয় না, যদি না পৃষ্ঠার অনুরোধটি নিজেই সার্ভিস ওয়ার্কারের মাধ্যমে হয়। তাই সার্ভিস ওয়ার্কারের প্রভাব দেখতে আপনাকে পৃষ্ঠাটি রিফ্রেশ করতে হবে।
• clients.claim() এই ডিফল্ট ওভাররাইড করতে এবং কন্ট্রোল না করা পৃষ্ঠার কন্ট্রোল নিতে পারবে।

এই HTML নিন:

<!DOCTYPE html>
An image will appear here in 3 seconds:
<script>
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('SW registered!', reg))
    .catch(err => console.log('Boo!', err));

  setTimeout(() => {
    const img = new Image();
    img.src = '/dog.svg';
    document.body.appendChild(img);
  }, 3000);
</script>

এটি একটি সার্ভিস ওয়ার্কার রেজিস্টার করে এবং ৩ সেকেন্ড পরে একটি কুকুরের ছবি যোগ করে।

এখানে এর সার্ভিস ওয়ার্কার, sw.js:

self.addEventListener('install', event => {
  console.log('V1 installing…');

  // cache a cat SVG
  event.waitUntil(
    caches.open('static-v1').then(cache => cache.add('/cat.svg'))
  );
});

self.addEventListener('activate', event => {
  console.log('V1 now ready to handle fetches!');
});

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);

  // serve the cat SVG from the cache if the request is
  // same-origin and the path is '/dog.svg'
  if (url.origin == location.origin && url.pathname == '/dog.svg') {
    event.respondWith(caches.match('/cat.svg'));
  }
});

এটি একটি বিড়ালের ছবি ক্যাশে করে এবং যখনই /dog.svg-এর জন্য অনুরোধ আসে তখনই এটি পরিবেশন করে। তবে, আপনি উপরের উদাহরণটি রান করলে, প্রথমবার পৃষ্ঠা লোড করার সময় একটি কুকুরের ছবি দেখতে পাবেন। রিফ্রেশ করুন এবং আপনি বিড়ালটি দেখতে পাবেন।

মনে রাখবেন: বিড়াল কুকুরের চেয়ে ভালো। সেগুলি আছে।

সুযোগ ও কন্ট্রোল

স্ক্রিপ্ট URL-এর সাপেক্ষে সার্ভিস ওয়ার্কার রেজিস্ট্রেশনের ডিফল্ট স্কোপ হল ./। এর অর্থ হল, আপনি //example.com/foo/bar.js-এ কোনও সার্ভিস ওয়ার্কার রেজিস্টার করলে, সেটির ডিফল্ট স্কোপ হল //example.com/foo/।

আমরা পৃষ্ঠা, কর্মী ও শেয়ার করা কর্মীদের clients বলি। আপনার সার্ভিস ওয়ার্কার শুধুমাত্র ইন-স্কোপ ক্লায়েন্টদের নিয়ন্ত্রণ করতে পারে। কোনও ক্লায়েন্ট "নিয়ন্ত্রিত" হলে, তার ফেচ ইন-স্কোপ সার্ভিস ওয়ার্কারের মাধ্যমে হয়। আপনি শনাক্ত করতে পারবেন যে কোনও ক্লায়েন্ট navigator.serviceWorker.controller-এর মাধ্যমে কন্ট্রোল করা হচ্ছে কিনা, যা নাল বা কোনও সার্ভিস ওয়ার্কার ইনস্ট্যান্স হবে।

ডাউনলোড, পার্স ও এক্সিকিউট করুন

আপনি .register() কল করলে, আপনার প্রথম সার্ভিস ওয়ার্কার ডাউনলোড হয়। আপনার স্ক্রিপ্ট ডাউনলোড, পার্স করতে না পারলে বা প্রাথমিক এক্সিকিউশনে কোনও সমস্যা দেখা দিলে, রেজিস্টার প্রমিস বাতিল হয়ে যায় এবং সার্ভিস ওয়ার্কার বাতিল করা হয়।

Chrome-এর DevTools কনসোলে এবং অ্যাপ্লিকেশন ট্যাবের সার্ভিস ওয়ার্কার বিভাগে সমস্যাটি দেখায়:

ইনস্টল করুন

সার্ভিস ওয়ার্কার প্রথম যে ইভেন্ট পায় সেটি হল install। ওয়ার্কার এক্সিকিউট করার সাথে সাথেই এটি ট্রিগার হয় এবং প্রতিটি সার্ভিস ওয়ার্কারের জন্য এটি একবারই কল করা হয়। আপনি যদি নিজের সার্ভিস ওয়ার্কার স্ক্রিপ্ট পরিবর্তন করেন, তাহলে ব্রাউজার এটিকে একটি ভিন্ন সার্ভিস ওয়ার্কার হিসেবে বিবেচনা করে এবং এটি নিজস্ব install ইভেন্ট পাবে। আমি আপডেট সম্পর্কে পরে বিস্তারিত জানাব।

install ইভেন্ট হল ক্লায়েন্টদের নিয়ন্ত্রণ করার আগে আপনার প্রয়োজনীয় সবকিছু ক্যাশে করার সুযোগ। event.waitUntil()-এ আপনি যে প্রমিস পাস করেন, তা থেকে ব্রাউজার জানতে পারে যে আপনার ইনস্টল কখন সম্পূর্ণ হয়েছে এবং সেটি সফল হয়েছে কিনা।

আপনার প্রমিস বাতিল হয়ে গেলে, এটি ইনস্টল ব্যর্থ হওয়ার সিগন্যাল দেয় এবং ব্রাউজার সার্ভিস ওয়ার্কারকে সরিয়ে দেয়। এটি কখনও ক্লায়েন্টদের নিয়ন্ত্রণ করবে না। এর অর্থ হল, আমাদের fetch ইভেন্টে ক্যাশেতে cat.svg উপস্থিত থাকার উপর আমরা নির্ভর করতে পারি। এটি একটি ডিপেন্ডেন্সি।

চালু করুন

আপনার সার্ভিস ওয়ার্কার ক্লায়েন্টদের নিয়ন্ত্রণ করতে এবং push ও sync-এর মতো ফাংশনাল ইভেন্ট ম্যানেজ করতে রেডি হয়ে গেলে, আপনি একটি activate ইভেন্ট পাবেন। তবে এর অর্থ এই নয় যে .register()-কে কল করা পৃষ্ঠাটি নিয়ন্ত্রণ করা হবে।

আপনি প্রথমবার ডেমো লোড করার সময়, সার্ভিস ওয়ার্কার অ্যাক্টিভেট হওয়ার অনেক পরে dog.svg-এর অনুরোধ করা হলেও, এটি অনুরোধ ম্যানেজ করে না এবং আপনি এখনও কুকুরের ছবি দেখতে পান। ডিফল্ট হল কনসিস্টেন্সি, আপনার পৃষ্ঠা যদি কোনও সার্ভিস ওয়ার্কার ছাড়াই লোড হয়, তাহলে এর সাবরিসোর্সও লোড হবে না। আপনি দ্বিতীয়বার ডেমো লোড করলে (অন্যভাবে বলতে গেলে, পৃষ্ঠা রিফ্রেশ করলে), এটি কন্ট্রোল করা হবে। পৃষ্ঠা এবং ছবি, উভয়ই fetchটি ইভেন্টের মধ্যে দিয়ে যাবে এবং আপনি এর পরিবর্তে একটি বিড়াল দেখতে পাবেন।

clients.claim

আপনার সার্ভিস ওয়ার্কার অ্যাক্টিভেট হয়ে গেলে, তার মধ্যে clients.claim() কল করে আপনি কন্ট্রোল না করা ক্লায়েন্টদের কন্ট্রোল করতে পারবেন।

এখানে উপরের ডেমোর একটি ভেরিয়েশন দেওয়া হল যা activate ইভেন্টে clients.claim() কল করে। প্রথমবার আপনার একটি বিড়াল দেখতে পাওয়া উচিত। আমি "উচিত" বলছি, কারণ এটি টাইমিংয়ের উপর নির্ভর করে। আপনি কেবল তখনই একটি বিড়াল দেখতে পাবেন যদি পরিষেবা কর্মী সক্রিয় হয় এবং ছবিটি লোড করার চেষ্টা করার আগে clients.claim() কার্যকর হয়।

নেটওয়ার্কের মাধ্যমে যেভাবে পৃষ্ঠা লোড হয় তার থেকে আলাদাভাবে পৃষ্ঠা লোড করার জন্য আপনি যদি সার্ভিস ওয়ার্কার ব্যবহার করেন, তাহলে clients.claim()-এর ক্ষেত্রে সমস্যা হতে পারে, কারণ আপনার সার্ভিস ওয়ার্কার এমন কিছু ক্লায়েন্টকে নিয়ন্ত্রণ করে যা এটি ছাড়াই লোড হয়।

মনে রাখবেন: আমি clients.claim() সহ অনেক লোককে বয়লারপ্লেট হিসেবে দেখি, কিন্তু আমি নিজে খুব কমই তা করি। এটি শুধুমাত্র প্রথমবার লোড করার সময় গুরুত্বপূর্ণ এবং প্রোগ্রেসিভ এনহ্যান্সমেন্টের কারণে পৃষ্ঠাটি সাধারণত সার্ভিস ওয়ার্কার ছাড়াই কাজ করে।

সার্ভিস ওয়ার্কার আপডেট করা হচ্ছে

সংক্ষেপে:

• নিম্নলিখিতগুলির মধ্যে যেকোনও একটি ঘটলে আপডেট ট্রিগার করা হয়:
  • ইন-স্কোপ পৃষ্ঠায় নেভিগেট করা।
  • push এবং sync-এর মতো ফাংশনাল ইভেন্ট, যদি না আগের ২৪ ঘণ্টার মধ্যে কোনও আপডেট চেক করা হয়।
  • সার্ভিস ওয়ার্কার URL পরিবর্তন হলে তবেই .register() কল করা হচ্ছে। তবে, আপনার ওয়ার্কার URL পরিবর্তন করা এড়িয়ে চলা উচিত।
• Chrome 68 এবং তার পরবর্তী ভার্সন সহ বেশিরভাগ ব্রাউজার, রেজিস্টার করা সার্ভিস ওয়ার্কার স্ক্রিপ্টের আপডেট চেক করার সময় ডিফল্ট হিসেবে ক্যাশিং হেডার উপেক্ষা করে। importScripts()-এর মাধ্যমে সার্ভিস ওয়ার্কারের মধ্যে লোড করা রিসোর্স ফেচ করার সময় এগুলি এখনও ক্যাশিং হেডার মেনে চলে। আপনার সার্ভিস ওয়ার্কার রেজিস্টার করার সময় updateViaCache বিকল্প সেট করে আপনি এই ডিফল্ট অ্যাকশন ওভাররাইড করতে পারবেন।
• ব্রাউজারে আগে থেকে থাকা সার্ভিস ওয়ার্কারের সাথে বাইট-ডিফারেন্ট হলে, আপনার সার্ভিস ওয়ার্কার আপডেট করা হয়েছে বলে বিবেচনা করা হয়। (আমরা এটি আরও বাড়াচ্ছি যাতে ইমপোর্ট করা স্ক্রিপ্ট/মডিউলও অন্তর্ভুক্ত করা যায়।)
• আপডেট করা সার্ভিস ওয়ার্কার আগে থেকে থাকা সার্ভিস ওয়ার্কারের সাথে লঞ্চ করা হয় এবং এটি নিজস্ব install ইভেন্ট পায়।
• আপনার নতুন ওয়ার্কারের স্ট্যাটাস কোড ঠিক না থাকলে (যেমন, 404), পার্স করতে না পারলে, এক্সিকিউশনের সময় কোনও সমস্যা হলে বা ইনস্টল করার সময় বাতিল হয়ে গেলে, নতুন ওয়ার্কারকে বাদ দেওয়া হয়, তবে বর্তমান ওয়ার্কার অ্যাক্টিভ থাকে।
• ইনস্টল করা হয়ে গেলে, আপডেট করা ওয়ার্কার wait করবে, যতক্ষণ না আগে থেকে থাকা ওয়ার্কার শূন্য ক্লায়েন্ট কন্ট্রোল করছে। (মনে রাখবেন যে রিফ্রেশ করার সময় ক্লায়েন্ট ওভারল্যাপ করে।)
• self.skipWaiting() অপেক্ষা করা প্রতিরোধ করে, যার অর্থ হল ইনস্টল করা শেষ হওয়ার সাথে সাথেই সার্ভিস ওয়ার্কার অ্যাক্টিভেট হয়ে যায়।

ধরা যাক, আমরা আমাদের সার্ভিস ওয়ার্কার স্ক্রিপ্ট পরিবর্তন করেছি যাতে বিড়ালের পরিবর্তে ঘোড়ার ছবি দিয়ে উত্তর দেওয়া যায়:

const expectedCaches = ['static-v2'];

self.addEventListener('install', event => {
  console.log('V2 installing…');

  // cache a horse SVG into a new cache, static-v2
  event.waitUntil(
    caches.open('static-v2').then(cache => cache.add('/horse.svg'))
  );
});

self.addEventListener('activate', event => {
  // delete any caches that aren't in expectedCaches
  // which will get rid of static-v1
  event.waitUntil(
    caches.keys().then(keys => Promise.all(
      keys.map(key => {
        if (!expectedCaches.includes(key)) {
          return caches.delete(key);
        }
      })
    )).then(() => {
      console.log('V2 now ready to handle fetches!');
    })
  );
});

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);

  // serve the horse SVG from the cache if the request is
  // same-origin and the path is '/dog.svg'
  if (url.origin == location.origin && url.pathname == '/dog.svg') {
    event.respondWith(caches.match('/horse.svg'));
  }
});

মনে রাখবেন: ঘোড়ার ব্যাপারে আমার কোনও জোরালো মতামত নেই।

উপরে উল্লেখ করা বিষয়ের ডেমো দেখুন। আপনার এখনও বিড়ালের ছবি দেখা উচিত। কারণ…

ইনস্টল করুন

মনে রাখবেন যে আমি ক্যাশের নাম static-v1 থেকে static-v2-এ পরিবর্তন করেছি। এর অর্থ হল, আমি বর্তমান ক্যাশেতে থাকা জিনিস ওভাররাইট না করেই নতুন ক্যাশে সেট-আপ করতে পারব, যা পুরনো সার্ভিস ওয়ার্কার এখনও ব্যবহার করছে।

এই প্যাটার্ন ভার্সন-নির্দিষ্ট ক্যাশে তৈরি করে, যা নেটিভ অ্যাপের এক্সিকিউটেবল ফাইলের সাথে অ্যাসেট বান্ডেল করার মতো। এছাড়াও, আপনার কাছে এমন ক্যাশে থাকতে পারে যা ভার্সন-নির্দিষ্ট নয়, যেমন avatars।

অপেক্ষা করা হচ্ছে

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

আপনি আপডেট করা ডেমো চালালে, এখনও বিড়ালের ছবি দেখতে পাবেন, কারণ V2 ওয়ার্কার এখনও অ্যাক্টিভেট হয়নি। DevTools-এর "অ্যাপ্লিকেশন" ট্যাবে আপনি নতুন সার্ভিস ওয়ার্কারকে অপেক্ষা করতে দেখতে পাবেন:

ডেমোর জন্য আপনার কাছে শুধুমাত্র একটি ট্যাব খোলা থাকলেও, নতুন ভার্সন চালু করার জন্য পৃষ্ঠাটি রিফ্রেশ করাই যথেষ্ট নয়। ব্রাউজার নেভিগেশন কীভাবে কাজ করে তার উপর এটি নির্ভর করে। আপনি নেভিগেট করার সময়, রেসপন্স হেডার না পাওয়া পর্যন্ত বর্তমান পৃষ্ঠাটি চলে যায় না এবং রেসপন্সে Content-Disposition হেডার থাকলে, বর্তমান পৃষ্ঠাটি থেকে যেতে পারে। এই ওভারল্যাপের কারণে, রিফ্রেশ করার সময় বর্তমান সার্ভিস ওয়ার্কার সবসময় ক্লায়েন্টকে নিয়ন্ত্রণ করছে।

আপডেট পেতে, বর্তমান সার্ভিস ওয়ার্কার ব্যবহার করে সব ট্যাব বন্ধ করুন বা অন্য ট্যাবে যান। তারপর, আপনি আবার ডেমোতে নেভিগেট করলে, ঘোড়াটি দেখতে পাবেন।

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

চালু করুন

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

উপরের ডেমোতে, আমি ক্যাশের একটি তালিকা বজায় রাখি যা আমি আশা করি সেখানে থাকবে এবং activate ইভেন্টে আমি অন্য যেকোনও কিছু থেকে মুক্তি পাই, যা পুরনো static-v1 ক্যাশ সরিয়ে দেয়।

সতর্কতা: আপনি হয়ত আগের ভার্সন থেকে আপডেট করছেন না। এটি অনেক পুরনো ভার্সনের সার্ভিস ওয়ার্কার হতে পারে।

আপনি event.waitUntil()-এ প্রমিস পাস করলে, প্রমিস সমাধান না হওয়া পর্যন্ত এটি ফাংশনাল ইভেন্ট (fetch, push, sync ইত্যাদি) বাফার করবে। তাই, আপনার fetch ইভেন্ট ফায়ার হলে, অ্যাক্টিভেশন সম্পূর্ণ হয়।

সতর্কতা: ক্যাশে স্টোরেজ API হল "অরিজিন স্টোরেজ" (যেমন localStorage এবং IndexedDB)। আপনি একই অরিজিনে (যেমন, yourname.github.io/myapp) একাধিক সাইট চালালে, অন্য সাইটের ক্যাশে যাতে মুছে না যায় সেই ব্যাপারে সতর্ক থাকুন। এটি এড়াতে, আপনার ক্যাশের নামের আগে বর্তমান সাইটের জন্য অনন্য প্রিফিক্স যোগ করুন, যেমন myapp-static-v1 এবং myapp- দিয়ে শুরু না হলে ক্যাশ স্পর্শ করবেন না।

অপেক্ষা করার ধাপ এড়িয়ে যান

অপেক্ষা করার ফেজ মানে হল, আপনি একবারে আপনার সাইটের একটিই ভার্সন চালাচ্ছেন, তবে আপনার যদি সেই ফিচারের প্রয়োজন না হয়, তাহলে আপনি self.skipWaiting()-এ কল করে আপনার নতুন সার্ভিস ওয়ার্কারকে আরও তাড়াতাড়ি অ্যাক্টিভেট করতে পারবেন।

এর ফলে আপনার সার্ভিস ওয়ার্কার বর্তমান অ্যাক্টিভ ওয়ার্কারকে সরিয়ে দেয় এবং ওয়েটিং ফেজে প্রবেশ করার সাথে সাথেই (অথবা আগে থেকেই ওয়েটিং ফেজে থাকলে অবিলম্বে) নিজেকে অ্যাক্টিভেট করে। এর ফলে আপনার ওয়ার্কার ইনস্টল করা এড়িয়ে যায় না, শুধু অপেক্ষা করে।

আপনি কখন skipWaiting()-কে কল করছেন তা গুরুত্বপূর্ণ নয়, যতক্ষণ না এটি অপেক্ষা করার সময় বা তার আগে হচ্ছে। install ইভেন্টে এটি কল করা খুবই সাধারণ:

self.addEventListener('install', event => {
  self.skipWaiting();

  event.waitUntil(
    // caching etc
  );
});

তবে, আপনি হয়ত সার্ভিস ওয়ার্কারের কাছে postMessage()-এর ফলাফল হিসেবে এটি কল করতে চাইবেন। যেমন, আপনি ব্যবহারকারীর ইন্টার‍্যাকশনের পরে skipWaiting() করতে চান।

এখানে একটি ডেমো দেওয়া হল যা skipWaiting() ব্যবহার করে। অন্য কোথাও নেভিগেট না করেই আপনি গরুর ছবি দেখতে পাবেন। clients.claim()-এর মতো এটিও একটি রেস, তাই পেজটি ছবি লোড করার চেষ্টা করার আগে নতুন সার্ভিস ওয়ার্কার ফেচ, ইনস্টল এবং অ্যাক্টিভেট করলে তবেই আপনি গরুটি দেখতে পাবেন।

সতর্কতা: skipWaiting()-এর অর্থ হল, আপনার নতুন সার্ভিস ওয়ার্কার সম্ভবত এমন পৃষ্ঠা কন্ট্রোল করছে যা পুরনো ভার্সনের মাধ্যমে লোড করা হয়েছে। এর অর্থ হল, আপনার পৃষ্ঠার কিছু ফেচ আপনার পুরনো সার্ভিস ওয়ার্কারের মাধ্যমে ম্যানেজ করা হবে, তবে আপনার নতুন সার্ভিস ওয়ার্কার পরবর্তী ফেচ ম্যানেজ করবে। এর ফলে কোনও সমস্যা হতে পারে বলে মনে হলে, skipWaiting() ব্যবহার করবেন না।

ম্যানুয়াল আপডেট

আমি আগেই বলেছি, নেভিগেশন ও ফাংশনাল ইভেন্টের পরে ব্রাউজার অটোমেটিক আপডেট চেক করে, তবে আপনি ম্যানুয়ালিও তা ট্রিগার করতে পারেন:

navigator.serviceWorker.register('/sw.js').then(reg => {
  // sometime later…
  reg.update();
});

ব্যবহারকারী রিলোড না করে আপনার সাইট দীর্ঘ সময় ধরে ব্যবহার করবেন বলে আপনি মনে করলে, নির্দিষ্ট সময় অন্তর (যেমন, প্রতি ঘণ্টায়) update() কল করতে পারেন।

আপনার সার্ভিস ওয়ার্কার স্ক্রিপ্টের URL পরিবর্তন করা এড়িয়ে চলুন

আপনি যদি ক্যাশিং পেশাদার পদ্ধতি সম্পর্কে আমার পোস্ট পড়ে থাকেন, তাহলে আপনার সার্ভিস ওয়ার্কারের প্রতিটি ভার্সনকে একটি অনন্য URL দেওয়ার কথা বিবেচনা করতে পারেন। এটি করবেন না! এটি সাধারণত সার্ভিস ওয়ার্কারের জন্য খারাপ অভ্যাস, শুধু বর্তমান লোকেশনে স্ক্রিপ্ট আপডেট করুন।

এর ফলে আপনি এই ধরনের সমস্যার সম্মুখীন হতে পারেন:

1. index.html, sw-v1.js-কে সার্ভিস ওয়ার্কার হিসেবে রেজিস্টার করে।
2. sw-v1.js ক্যাশে করে এবং index.html পরিবেশন করে যাতে এটি অফলাইন-ফার্স্ট কাজ করে।
3. আপনি index.html আপডেট করেন যাতে এটি আপনার নতুন এবং চকচকে sw-v2.js রেজিস্টার করে।

আপনি উপরে উল্লিখিত কাজটি করলে, ব্যবহারকারী কখনই sw-v2.js পাবেন না, কারণ sw-v1.js তার ক্যাশে থেকে index.html-এর পুরনো ভার্সন পরিবেশন করছে। আপনি নিজেকে এমন একটি অবস্থানে রেখেছেন যেখানে আপনার পরিষেবা কর্মী আপডেট করার জন্য আপনাকে আপনার পরিষেবা কর্মী আপডেট করতে হবে। বিরক্তিকর।

তবে, উপরের ডেমোর জন্য, আমি সার্ভিস ওয়ার্কারের URL পরিবর্তন করেছি। ডেমো দেখানোর জন্য আপনি ভার্সনগুলির মধ্যে পরিবর্তন করতে পারেন। প্রোডাকশনে আমি এমন কিছু করব না।

ডেভেলপমেন্ট সহজ করা

সার্ভিস ওয়ার্কার লাইফসাইকেল ব্যবহারকারীর কথা মাথায় রেখে তৈরি করা হয়েছে, তবে ডেভেলপমেন্টের সময় এটি কিছুটা কষ্টকর। তবে, কিছু টুল আছে যা আপনাকে সাহায্য করতে পারে:

রিলোড করার সময় আপডেট করুন

এটি আমার প্রিয়।

এটি লাইফসাইকেলকে ডেভেলপার-বান্ধব করে তোলে। প্রতিটি নেভিগেশন:

1. সার্ভিস ওয়ার্কার আবার ফেচ করুন।
2. এটি বাইট-আইডেন্টিক্যাল হলেও নতুন ভার্সন হিসেবে ইনস্টল করুন, অর্থাৎ আপনার install ইভেন্ট রান করে এবং আপনার ক্যাশে আপডেট হয়।
3. অপেক্ষার পর্বটি এড়িয়ে যান যাতে নতুন সার্ভিস ওয়ার্কার অ্যাক্টিভেট হয়।
4. পৃষ্ঠা নেভিগেট করুন।

এর অর্থ হল, আপনি দুবার রিলোড না করে বা ট্যাব বন্ধ না করেই প্রতিটি নেভিগেশনে (রিফ্রেশ সহ) আপনার আপডেট পাবেন।

অপেক্ষা করা এড়িয়ে যান

কোনও কর্মী অপেক্ষা করলে, আপনি DevTools-এ "অপেক্ষা করা এড়িয়ে যান" বিকল্পে ক্লিক করে অবিলম্বে এটিকে "অ্যাক্টিভ" হিসেবে প্রোমোট করতে পারবেন।

Shift-রিলোড

আপনি যদি পৃষ্ঠাটি জোর করে রিলোড করেন (শিফ্ট-রিলোড), তাহলে এটি সার্ভিস ওয়ার্কারকে সম্পূর্ণভাবে বাইপাস করে। এটি নিয়ন্ত্রণ করা যাবে না। এই ফিচারটি স্পেসিফিকেশনে রয়েছে, তাই এটি অন্যান্য সার্ভিস-ওয়ার্কার-সাপোর্টিং ব্রাউজারে কাজ করে।

আপডেট ম্যানেজ করা

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

তাই, আমরা যতগুলি সম্ভব প্যাটার্ন চালু করার জন্য, সম্পূর্ণ আপডেট চক্রটি পর্যবেক্ষণযোগ্য:

navigator.serviceWorker.register('/sw.js').then(reg => {
  reg.installing; // the installing worker, or undefined
  reg.waiting; // the waiting worker, or undefined
  reg.active; // the active worker, or undefined

  reg.addEventListener('updatefound', () => {
    // A wild service worker has appeared in reg.installing!
    const newWorker = reg.installing;

    newWorker.state;
    // "installing" - the install event has fired, but not yet complete
    // "installed"  - install complete
    // "activating" - the activate event has fired, but not yet complete
    // "activated"  - fully active
    // "redundant"  - discarded. Either failed install, or it's been
    //                replaced by a newer version

    newWorker.addEventListener('statechange', () => {
      // newWorker.state has changed
    });
  });
});

navigator.serviceWorker.addEventListener('controllerchange', () => {
  // This fires when the service worker controlling this page
  // changes, eg a new worker has skipped waiting and become
  // the new active worker.
});

লাইফসাইকেল চলতেই থাকে

আপনি দেখতেই পাচ্ছেন, সার্ভিস ওয়ার্কার লাইফসাইকেল সম্পর্কে জানা থাকলে সুবিধা হয়—এবং এই বিষয়ে জানা থাকলে, সার্ভিস ওয়ার্কারের আচরণ আরও যুক্তিযুক্ত এবং কম রহস্যময় বলে মনে হবে। এই জ্ঞান আপনাকে আরও আত্মবিশ্বাস দেবে কারণ আপনি সার্ভিস ওয়ার্কার ডিপ্লয় ও আপডেট করেন।