M
MLOG
প্রোগ্রেসিভ ওয়েব অ্যাপ আর্কিটেকচার: জাভাস্ক্রিপ্ট সার্ভিস ওয়ার্কার প্যাটার্নস | MLOG | MLOG

৪. নেটওয়ার্ক-অনলি (Network-Only)

নেটওয়ার্ক-অনলি কৌশলটি সর্বদা নেটওয়ার্ক থেকে অ্যাসেট নিয়ে আসে, ক্যাশকে পুরোপুরি বাইপাস করে। এই কৌশলটি ব্যবহার করা হয় যখন আপনার একেবারে একটি রিসোর্সের সর্বশেষ সংস্করণ প্রয়োজন এবং ক্যাশিং কাম্য নয়।

উদাহরণ: 

            
self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request)
  );
});

৫. স্টেল-হোয়াইল-রিভ্যালিডেট (Stale-While-Revalidate)

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

উদাহরণ: 

            
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        const fetchPromise = fetch(event.request).then(networkResponse => {
          caches.open('my-cache').then(cache => {
            cache.put(event.request, networkResponse.clone());
            return networkResponse;
          });
        });
        return response || fetchPromise;
      })
  );
});

৬. ক্যাশ, তারপর নেটওয়ার্ক (Cache, then Network)

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

সঠিক ক্যাশিং কৌশল নির্বাচন করা

সর্বোত্তম ক্যাশিং কৌশল আপনার অ্যাপ্লিকেশনের নির্দিষ্ট প্রয়োজনীয়তার উপর নির্ভর করে। নিম্নলিখিত বিষয়গুলি বিবেচনা করুন:

সঠিক ক্যাশিং কৌশলগুলি সাবধানে নির্বাচন করে, আপনি আপনার PWA-এর পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতা উল্লেখযোগ্যভাবে উন্নত করতে পারেন, এমনকি অফলাইন পরিবেশেও। Workbox ([https://developers.google.com/web/tools/workbox](https://developers.google.com/web/tools/workbox)) এর মতো সরঞ্জামগুলি এই কৌশলগুলির বাস্তবায়ন সহজ করতে পারে।

ব্যাকগ্রাউন্ড সিঙ্ক্রোনাইজেশন: অফলাইন মিউটেশন পরিচালনা

ব্যাকগ্রাউন্ড সিঙ্ক্রোনাইজেশন আপনার PWA-কে ব্যাকগ্রাউন্ডে কাজ সম্পাদন করার অনুমতি দেয়, এমনকি যখন ব্যবহারকারী অফলাইনে থাকে। এটি ফর্ম জমা, ডেটা আপডেট এবং অন্যান্য ক্রিয়াকলাপ যা নেটওয়ার্ক সংযোগের প্রয়োজন হয়, তা পরিচালনা করার জন্য বিশেষভাবে কার্যকর। `BackgroundSyncManager` API আপনাকে এমন টাস্ক রেজিস্টার করতে সক্ষম করে যা নেটওয়ার্ক উপলব্ধ হলে কার্যকর করা হবে।

একটি ব্যাকগ্রাউন্ড সিঙ্ক টাস্ক রেজিস্টার করা

একটি ব্যাকগ্রাউন্ড সিঙ্ক টাস্ক রেজিস্টার করতে, আপনাকে `BackgroundSyncManager`-এর `register` পদ্ধতি ব্যবহার করতে হবে। এই পদ্ধতিটি একটি অনন্য ট্যাগ নাম আর্গুমেন্ট হিসাবে নেয়। ট্যাগ নামটি সম্পাদন করার জন্য নির্দিষ্ট টাস্কটিকে চিহ্নিত করে।

উদাহরণ:

            
self.addEventListener('sync', event => {
  if (event.tag === 'my-sync-task') {
    event.waitUntil(doSomeWork());
  }
});

সিঙ্ক ইভেন্ট পরিচালনা করা

যখন ব্রাউজার নেটওয়ার্ক সংযোগ সনাক্ত করে, তখন এটি সার্ভিস ওয়ার্কারকে একটি `sync` ইভেন্ট প্রেরণ করে। আপনি এই ইভেন্টের জন্য অপেক্ষা করতে পারেন এবং প্রয়োজনীয় পদক্ষেপগুলি সম্পাদন করতে পারেন, যেমন সার্ভারে ডেটা পাঠানো।

উদাহরণ:

            
async function doSomeWork() {
  // Retrieve data from IndexedDB
  const data = await getDataFromIndexedDB();

  // Send data to the server
  try {
    const response = await fetch('/api/sync', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json'
      }
    });

    if (response.ok) {
      // Clear the data from IndexedDB
      await clearDataFromIndexedDB();
    } else {
      // Handle errors
      console.error('Sync failed:', response.status);
      throw new Error('Sync failed');
    }
  } catch (error) {
    // Handle network errors
    console.error('Network error:', error);
    throw error;
  }
}

উদাহরণ: অফলাইন ফর্ম জমা দেওয়া

এমন একটি পরিস্থিতি কল্পনা করুন যেখানে একজন ব্যবহারকারী অফলাইনে থাকাকালীন একটি ফর্ম পূরণ করে। সার্ভিস ওয়ার্কার IndexedDB-তে ফর্ম ডেটা সংরক্ষণ করতে পারে এবং একটি ব্যাকগ্রাউন্ড সিঙ্ক টাস্ক রেজিস্টার করতে পারে। যখন নেটওয়ার্ক উপলব্ধ হবে, সার্ভিস ওয়ার্কার IndexedDB থেকে ফর্ম ডেটা পুনরুদ্ধার করবে এবং সার্ভারে জমা দেবে।

  1. ব্যবহারকারী অফলাইনে থাকাকালীন ফর্মটি পূরণ করে এবং সাবমিট ক্লিক করে।
  2. ফর্ম ডেটা IndexedDB-তে সংরক্ষণ করা হয়।
  3. একটি অনন্য ট্যাগ (যেমন, `form-submission`) দিয়ে একটি ব্যাকগ্রাউন্ড সিঙ্ক টাস্ক রেজিস্টার করা হয়।
  4. যখন নেটওয়ার্ক উপলব্ধ হয়, `sync` ইভেন্টটি ট্রিগার হয়।
  5. সার্ভিস ওয়ার্কার IndexedDB থেকে ফর্ম ডেটা পুনরুদ্ধার করে এবং সার্ভারে জমা দেয়।
  6. জমা দেওয়া সফল হলে, ফর্ম ডেটা IndexedDB থেকে সরানো হয়।

পুশ নোটিফিকেশন: সময়োপযোগী আপডেটের মাধ্যমে ব্যবহারকারীদের নিযুক্ত করা

পুশ নোটিফিকেশন আপনার PWA-কে ব্যবহারকারীদের কাছে সময়োপযোগী আপডেট এবং বার্তা পাঠাতে সক্ষম করে, এমনকি যখন অ্যাপটি ব্রাউজারে সক্রিয়ভাবে চলছে না। এটি ব্যবহারকারীর সম্পৃক্ততা এবং ধরে রাখার হার উল্লেখযোগ্যভাবে উন্নত করতে পারে। Push API এবং Notifications API পুশ নোটিফিকেশন সরবরাহ করার জন্য একসাথে কাজ করে।

পুশ নোটিফিকেশনের জন্য সাবস্ক্রাইব করা

পুশ নোটিফিকেশন পেতে, ব্যবহারকারীদের প্রথমে আপনার PWA-কে অনুমতি দিতে হবে। আপনি ব্যবহারকারীদের পুশ নোটিফিকেশনের জন্য সাবস্ক্রাইব করতে `PushManager` API ব্যবহার করতে পারেন।

উদাহরণ:

            
navigator.serviceWorker.ready.then(registration => {
  registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: 'YOUR_PUBLIC_VAPID_KEY'
  })
  .then(subscription => {
    // Send subscription details to your server
    sendSubscriptionToServer(subscription);
  })
  .catch(error => {
    console.error('Failed to subscribe:', error);
  });
});

গুরুত্বপূর্ণ: `YOUR_PUBLIC_VAPID_KEY`-কে আপনার আসল VAPID (Voluntary Application Server Identification) কী দিয়ে প্রতিস্থাপন করুন। VAPID কীগুলি আপনার অ্যাপ্লিকেশন সার্ভারকে সনাক্ত করতে এবং পুশ নোটিফিকেশনগুলি নিরাপদে পাঠানো নিশ্চিত করতে ব্যবহৃত হয়।

পুশ নোটিফিকেশন পরিচালনা করা

যখন একটি পুশ নোটিফিকেশন পাওয়া যায়, সার্ভিস ওয়ার্কার একটি `push` ইভেন্ট প্রেরণ করে। আপনি এই ইভেন্টের জন্য অপেক্ষা করতে পারেন এবং ব্যবহারকারীকে নোটিফিকেশনটি প্রদর্শন করতে পারেন।

উদাহরণ:

            
self.addEventListener('push', event => {
  const payload = event.data ? event.data.text() : 'No payload';

  event.waitUntil(
    self.registration.showNotification('My PWA', {
      body: payload,
      icon: 'icon.png'
    })
  );
});

পুশ নোটিফিকেশন কাস্টমাইজ করা

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

উদাহরণ:

            
self.addEventListener('push', event => {
  const data = event.data.json();
  const title = data.title || 'My PWA';
  const options = {
    body: data.body || 'No message',
    icon: data.icon || 'icon.png',
    badge: data.badge || 'badge.png',
    vibrate: [200, 100, 200],
    data: { // Custom data that you can access when the user clicks the notification
      url: data.url || '/'
    },
    actions: [
      {action: 'explore', title: 'Explore this new world',
        icon: 'images/checkmark.png'},
      {action: 'close', title: 'Close',
        icon: 'images/xmark.png'},
    ]
  };

  event.waitUntil(self.registration.showNotification(title, options));
});


self.addEventListener('notificationclick', function(event) {
  event.notification.close();

  // Check if the user clicked on an action.
  if (event.action === 'explore') {
    clients.openWindow(event.notification.data.url);
  } else {
    // Default action: open the app.
    clients.openWindow('/');
  }
});

উদাহরণ: নিউজ অ্যালার্ট

একটি সংবাদ অ্যাপ্লিকেশন ব্রেকিং নিউজ সম্পর্কে ব্যবহারকারীদের সতর্ক করতে পুশ নোটিফিকেশন ব্যবহার করতে পারে। যখন একটি নতুন আর্টিকেল প্রকাশিত হয়, সার্ভার ব্যবহারকারীর ডিভাইসে একটি পুশ নোটিফিকেশন পাঠায়, যা আর্টিকেলের একটি সংক্ষিপ্ত সারসংক্ষেপ প্রদর্শন করে। ব্যবহারকারী তারপর নোটিফিকেশনে ক্লিক করে PWA-তে পুরো আর্টিকেলটি খুলতে পারে।

অ্যাডভান্সড সার্ভিস ওয়ার্কার প্যাটার্নস

১. অফলাইন অ্যানালিটিক্স

ব্যবহারকারীরা অফলাইনে থাকলেও তাদের আচরণ ট্র্যাক করুন। স্থানীয়ভাবে অ্যানালিটিক্স ডেটা সংরক্ষণ করুন এবং নেটওয়ার্ক উপলব্ধ হলে সার্ভারে পাঠান। এটি IndexedDB এবং Background Sync ব্যবহার করে অর্জন করা যেতে পারে।

২. ভার্সনিং এবং আপডেটিং

আপনার সার্ভিস ওয়ার্কারের জন্য একটি শক্তিশালী ভার্সনিং কৌশল প্রয়োগ করুন যাতে ব্যবহারকারীরা তাদের অভিজ্ঞতা ব্যাহত না করে সর্বদা সর্বশেষ আপডেটগুলি পায়। পুরানো ক্যাশ করা অ্যাসেটগুলি অবৈধ করতে ক্যাশ বাস্টিং কৌশল ব্যবহার করুন।

৩. মডিউলার সার্ভিস ওয়ার্কার

রক্ষণাবেক্ষণ এবং পঠনযোগ্যতা উন্নত করতে আপনার সার্ভিস ওয়ার্কার কোডকে মডিউলগুলিতে সংগঠিত করুন। জাভাস্ক্রিপ্ট মডিউল (ESM) বা ওয়েবপ্যাক বা রোলআপের মতো একটি মডিউল বান্ডলার ব্যবহার করুন।

৪. ডাইনামিক ক্যাশিং

ব্যবহারকারীর মিথস্ক্রিয়া এবং ব্যবহারের ধরণগুলির উপর ভিত্তি করে গতিশীলভাবে অ্যাসেট ক্যাশ করুন। এটি ক্যাশের আকার অপ্টিমাইজ করতে এবং পারফরম্যান্স উন্নত করতে সহায়তা করতে পারে।

সার্ভিস ওয়ার্কার ডেভেলপমেন্টের জন্য সেরা অনুশীলন

উপসংহার

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

আপনার নির্দিষ্ট অ্যাপ্লিকেশনের প্রয়োজনীয়তা অনুযায়ী এই প্যাটার্নগুলি মানিয়ে নিতে এবং সর্বদা ব্যবহারকারীর অভিজ্ঞতাকে অগ্রাধিকার দিতে ভুলবেন না। সার্ভিস ওয়ার্কারের শক্তিকে আলিঙ্গন করে, আপনি এমন PWA তৈরি করতে পারেন যা কেবল কার্যকরীই নয়, ব্যবহারকারীর অবস্থান বা নেটওয়ার্ক সংযোগ নির্বিশেষে ব্যবহার করতেও আনন্দদায়ক।

আরও রিসোর্স: