প্রগতিশীল ওয়েব অ্যাপস: ওয়ার্কবক্সের সাথে কাজ করা

1. স্বাগতম

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

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

• ওয়ার্কবক্স ব্যবহার করতে একটি বিদ্যমান পরিষেবা কর্মীকে রূপান্তর করুন
• একটি PWA-তে একটি অফলাইন ফলব্যাক যোগ করুন

আপনি কি জানা উচিত

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

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

• একটি ব্রাউজার যা পরিষেবা কর্মীদের সমর্থন করে

2. সেট আপ করুন

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

রেপো ক্লোন করুন

জিপ ডাউনলোড করুন

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

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

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

কী ফাইল

• service-worker.js - অ্যাপ্লিকেশনের পরিষেবা কর্মী ফাইল
• offline.html - একটি পৃষ্ঠা উপলব্ধ না হলে অফলাইন HTML ব্যবহার করতে হবে৷

3. ওয়ার্কবক্সে স্থানান্তর করুন৷

বিদ্যমান পরিষেবা কর্মীর দিকে তাকালে, প্রিক্যাচিং দেখে মনে হচ্ছে এটি দুটি ধাপে বিভক্ত করা যেতে পারে:

• সার্ভিস ওয়ার্কার ইনস্টল করার সময় প্রাসঙ্গিক ফাইল ক্যাশে করুন
• শুধুমাত্র ক্যাশে কৌশল দিয়ে সেই ফাইলগুলিকে আবার পরিবেশন করুন

index.html ফাইল এবং / রুট উভয়ই এখনও প্রিক্যাচ করার অর্থ বহন করে, কারণ এই ওয়েব অ্যাপের এইচটিএমএল খুব বেশি পরিবর্তন করতে যাচ্ছে না, তবে CSS এবং জাভাস্ক্রিপ্টের মতো অন্যান্য ফাইলগুলি পরিবর্তিত হতে পারে এবং আমরা আসলেই চাই না যে তারা প্রতিবার পরিষেবা কর্মী লাইফসাইকেলের মধ্য দিয়ে যেতে হবে। অতিরিক্তভাবে, বর্তমান পরিষেবা কর্মী শুধুমাত্র আমাদের CSS এবং JavaScript-এর একটি উপসেট বিবেচনা করে, আমরা এটি সবই কভার করতে চাই। একটি Stale while Revalidate কৌশলের মাধ্যমে এই আইটেমগুলিকে ক্যাশ করা আরও বোধগম্য হয়; দ্রুত প্রতিক্রিয়া যা প্রয়োজন অনুসারে পটভূমিতে আপডেট করা যেতে পারে।

প্রিক্যাচিং রিভিজিট করা হয়েছে

ওয়ার্কবক্সে স্থানান্তরিত করার জন্য, আমাদের বিদ্যমান কোডগুলির কোনোটি রাখতে হবে না, তাই service-worker.js এ সবকিছু মুছে ফেলুন। পূর্ববর্তী ল্যাবে, আমরা এই পরিষেবা কর্মীকে কম্পাইল করার জন্য সেট আপ করেছি, তাই আমরা এর NPM মডিউলগুলি থেকে Workbox আনতে এখানে ESModule আমদানি ব্যবহার করতে পারি। প্রিক্যাচিং রিভিজিট করে শুরু করা যাক। service-worker.js এ, নিম্নলিখিত কোড যোগ করুন:

import { warmStrategyCache } from 'workbox-recipes';
import { CacheFirst } from 'workbox-strategies';
import { registerRoute } from 'workbox-routing';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';

// Set up page cache
const pageCache = new CacheFirst({
  cacheName: 'page-cache',
  plugins: [
    new CacheableResponsePlugin({
      statuses: [0, 200],
    }),
    new ExpirationPlugin({
      maxAgeSeconds: 30 * 24 * 60 * 60,
    }),
  ],
});

warmStrategyCache({
  urls: ['/index.html', '/'],
  strategy: pageCache,
});

registerRoute(({ request }) => request.mode === 'navigate', pageCache);

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

ব্যাখ্যা

/index.html এবং / জন্য প্রিক্যাচিং সেট আপ করার জন্য, পাঁচটি মডিউল থেকে টানতে হবে। যদিও এটি অনেকটা মনে হতে পারে, এই কোডটি লেখা আগের কোডের চেয়ে অনেক বেশি শক্তিশালী।

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

এর পরে, কৌশলটির ক্যাশে /index.html এবং / উষ্ণ কৌশল ক্যাশে ওয়ার্কবক্স রেসিপি ব্যবহার করে উষ্ণ হয়। এটি পরিষেবা কর্মীর ইনস্টল ইভেন্টের সময় এই আইটেমগুলিকে এই ক্যাশে যুক্ত করবে৷

অবশেষে, একটি নতুন রুট নিবন্ধিত হয়. যেকোন অনুরোধ যা একটি পৃষ্ঠা নেভিগেশন এই ক্যাশে ফার্স্ট কৌশল দ্বারা পরিচালিত হবে, হয় ক্যাশে বা নেটওয়ার্ক থেকে টেনে নিয়ে তারপর প্রতিক্রিয়া ক্যাশে করা হবে।

ক্যাশিং সম্পদ

রুট প্রিক্যাচিং সাজানোর সাথে সাথে, সাইটের সম্পদের জন্য ক্যাশিং পুনরায় প্রয়োগ করার সময় এসেছে; এটি সিএসএস এবং জাভাস্ক্রিপ্ট। এটি করার জন্য, প্রথমে আপনার workbox-strategies আমদানিতে StaleWhileRevalidate যোগ করুন, তারপর আপনার পরিষেবা কর্মীর নীচে নিম্নলিখিত কোডটি যুক্ত করুন:

// Set up asset cache
registerRoute(
  ({ request }) => ['style', 'script', 'worker'].includes(request.destination),
  new StaleWhileRevalidate({
    cacheName: 'asset-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  }),
);

ব্যাখ্যা

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

4. অফলাইন ফলব্যাক যোগ করুন

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

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

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

// Set up offline fallback
offlineFallback({
  pageFallback: '/offline.html',
});

ব্যাখ্যা

অফলাইন ফলব্যাক রেসিপি একটি ক্যাশে অনলি কৌশল সেট আপ করে যা প্রদত্ত ফলব্যাকগুলির সাথে উষ্ণ হয়৷ এটি তারপরে একটি ওয়ার্কবক্স ডিফল্ট ক্যাচ হ্যান্ডলার সেট আপ করে, যেকোনো ব্যর্থ রাউটিং অনুরোধগুলি (যদি ক্যাশে কিছু না থাকে এবং নেটওয়ার্কে কিছু পৌঁছানো না যায়), ক্যাশে থেকে প্রাসঙ্গিক ফাইলের বিষয়বস্তু টেনে নিয়ে এবং যতক্ষণ পর্যন্ত অনুরোধ ব্যর্থ হতে থাকে ততক্ষণ এটিকে সামগ্রী হিসাবে ফেরত দেয়।

5. অভিনন্দন!

আপনি রুটগুলির জন্য ক্যাশিং কৌশল সেট আপ করতে এবং আপনার PWA এর জন্য একটি অফলাইন ফলব্যাক প্রদান করতে Workbox ব্যবহার করতে শিখেছেন।

সিরিজের পরবর্তী কোডল্যাব হল IndexedDB