প্রগতিশীল ওয়েব অ্যাপস: অফলাইনে যাচ্ছে

১. স্বাগতম

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

আপনি যা শিখবেন

  • সার্ভিস ওয়ার্কারকে হাতে লিখুন
  • একটি বিদ্যমান ওয়েব অ্যাপ্লিকেশনে একটি সার্ভিস ওয়ার্কার যোগ করুন
  • রিসোর্সসমূহকে অফলাইনে উপলব্ধ করতে সার্ভিস ওয়ার্কার এবং ক্যাশ স্টোরেজ এপিআই ব্যবহার করুন।

আপনার যা জানা উচিত

  • বেসিক এইচটিএমএল এবং জাভাস্ক্রিপ্ট

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

২. প্রস্তুত হন

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

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

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

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

মূল ফাইল

  • js/main.js - মূল অ্যাপ্লিকেশন জাভাস্ক্রিপ্ট ফাইল
  • service-worker.js - অ্যাপ্লিকেশনটির সার্ভিস ওয়ার্কার ফাইল

৩. অফলাইনে পরীক্ষা করুন

কোনো পরিবর্তন করার আগে, চলুন পরীক্ষা করে দেখি যে ওয়েব অ্যাপটি বর্তমানে অফলাইনে কাজ করে না। এটি করার জন্য, হয় আপনার কম্পিউটারটি অফলাইনে নিয়ে ওয়েব অ্যাপটি পুনরায় লোড করুন, অথবা, আপনি যদি ক্রোম ব্যবহার করেন:

  1. ক্রোম ডেভ টুলস খুলুন
  2. অ্যাপ্লিকেশন ট্যাবে যান
  3. সার্ভিস ওয়ার্কার্স বিভাগে যান
  4. অফলাইন চেকবক্সটি চেক করুন।
  5. Chrome Dev Tools বন্ধ না করে পৃষ্ঠাটি রিফ্রেশ করুন

Chrome Dev Tools অ্যাপ্লিকেশন ট্যাবটি Service Workers-এ খুললে অফলাইন চেকবক্সটি চেক করা অবস্থায় ছিল।

সাইটটি অফলাইনে লোড হতে ব্যর্থ হওয়ায়, এখন কিছু অনলাইন কার্যকারিতা যোগ করার সময় এসেছে! অফলাইন চেকবক্সটি আনচেক করুন এবং পরবর্তী ধাপে এগিয়ে যান।

৪. এটিকে অফলাইনে নিন

এখন একটি বেসিক সার্ভিস ওয়ার্কার যোগ করার সময়! এটি দুটি ধাপে সম্পন্ন হবে: সার্ভিস ওয়ার্কারটি রেজিস্টার করা এবং রিসোর্স ক্যাশ করা।

একজন পরিষেবা কর্মীকে নিবন্ধন করুন

ইতিমধ্যে একটি খালি সার্ভিস ওয়ার্কার ফাইল রয়েছে, তাই পরিবর্তনগুলো যাতে দেখা যায় তা নিশ্চিত করতে, চলুন এটিকে আমাদের অ্যাপ্লিকেশনে রেজিস্টার করি। এটি করার জন্য, js/main.js ফাইলের শীর্ষে নিম্নলিখিত কোডটি যোগ করুন:

// Register the service worker
if ('serviceWorker' in navigator) {
  // Wait for the 'load' event to not block other work
  window.addEventListener('load', async () => {
    // Try to register the service worker.
    try {
      // Capture the registration for later use, if needed
      let reg;

      // Use ES Module version of our Service Worker in development
      if (import.meta.env?.DEV) {
        reg = await navigator.serviceWorker.register('/service-worker.js', {
          type: 'module',
        });
      } else {
        // In production, use the normal service worker registration
        reg = await navigator.serviceWorker.register('/service-worker.js');
      }

      console.log('Service worker registered! 😎', reg);
    } catch (err) {
      console.log('😥 Service worker registration failed: ', err);
    }
  });
}

ব্যাখ্যা

এই কোডটি পৃষ্ঠা লোড হওয়ার পরে একবার খালি service-worker.js সার্ভিস ওয়ার্কার ফাইলটি নিবন্ধন করে, এবং শুধুমাত্র যদি সাইটটি সার্ভিস ওয়ার্কার সমর্থন করে।

প্রি-ক্যাশ রিসোর্স

ওয়েব অ্যাপটিকে অফলাইনে চালু করার জন্য, ব্রাউজারকে নেটওয়ার্ক অনুরোধে সাড়া দিতে এবং সেগুলোকে কোথায় রাউট করতে হবে তা বেছে নিতে সক্ষম হতে হবে। এটি করার জন্য, service-worker.js এ নিম্নলিখিতটি যোগ করুন।

// Choose a cache name
const cacheName = 'cache-v1';
// List the files to precache
const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];

// When the service worker is installing, open the cache and add the precache resources to it
self.addEventListener('install', (event) => {
  console.log('Service worker install event!');
  event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
});

self.addEventListener('activate', (event) => {
  console.log('Service worker activate event!');
});

// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
self.addEventListener('fetch', (event) => {
  console.log('Fetch intercepted for:', event.request.url);
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      if (cachedResponse) {
        return cachedResponse;
      }
      return fetch(event.request);
    }),
  );
});

এখন, ব্রাউজারে ফিরে যান, আপনার প্রিভিউ ট্যাবটি বন্ধ করে আবার খুলুন। আপনি সার্ভিস ওয়ার্কারের বিভিন্ন ইভেন্টের সাথে সম্পর্কিত console.log দেখতে পাবেন!

এরপর, আবার অফলাইনে যান এবং সাইটটি রিফ্রেশ করুন। আপনি দেখবেন যে অফলাইনে থাকা সত্ত্বেও সাইটটি লোড হচ্ছে!

ব্যাখ্যা

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

সার্ভিস ওয়ার্কার একবার সাইটটি নিয়ন্ত্রণ করা শুরু করলে, অনুরোধ করা রিসোর্সগুলো একটি প্রক্সির মতো সার্ভিস ওয়ার্কারের মধ্য দিয়ে যায়। প্রতিটি অনুরোধ একটি ফেচ ইভেন্ট ট্রিগার করে, যা এই সার্ভিস ওয়ার্কারের মধ্যে ক্যাশে একটি মিল খুঁজে দেখে; যদি মিল পাওয়া যায়, তবে ক্যাশে থাকা রিসোর্স দিয়ে সাড়া দেয়। যদি কোনো মিল না পাওয়া যায়, তবে রিসোর্সটির জন্য স্বাভাবিকভাবে অনুরোধ করা হয়।

রিসোর্স ক্যাশ করার ফলে অ্যাপটি নেটওয়ার্ক রিকোয়েস্ট এড়িয়ে অফলাইনে কাজ করতে পারে। এখন অ্যাপটি অফলাইনে থাকা অবস্থায়ও 200 স্ট্যাটাস কোড দিয়ে সাড়া দিতে পারে!

৫. অভিনন্দন!

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

এই সিরিজের পরবর্তী কোডল্যাবটি হলো ওয়ার্কবক্স নিয়ে কাজ করা।