একটি প্রগতিশীল ওয়েব অ্যাপ একটি ওয়েবসাইট; এর সমস্ত সম্পদগুলি ওয়েবের মতোই, কিন্তু নতুন টুলগুলির সাহায্যে সেই সম্পদগুলিকে অনলাইনে দ্রুত লোড করা যায় এবং অফলাইনে পাওয়া যায়৷
অ্যাপের উপাদান
একটি অ্যাপ্লিকেশন ডেভেলপ করার ক্ষেত্রে সাধারণত যুক্তি এবং কোড (সংকলিত বা না) থেকে শুরু করে স্ক্রিন ডিজাইন, ছবি, লোগো এবং ফন্টের মতো ব্যবহারকারীর ইন্টারফেস উপাদান পর্যন্ত বেশ কিছু সম্পদ এবং সম্পদ জড়িত থাকে।
একটি প্রগতিশীল ওয়েব অ্যাপ হল একটি ওয়েবসাইট, তাই এর সমস্ত সম্পদ ওয়েবের মতোই:
- বিষয়বস্তু এবং প্রাথমিক পৃষ্ঠা রেন্ডারিংয়ের জন্য HTML।
- যুক্তিবিদ্যার জন্য জাভাস্ক্রিপ্ট, ওয়েব অ্যাসেম্বলি মডিউল (সংকলিত কোড) চালানো এবং 2D এবং 3D হার্ডওয়্যার-অপ্টিমাইজড গ্রাফিক্স রেন্ডার করার ক্ষমতা সহ।
- লেআউট, স্টাইলিং এবং অ্যানিমেশনের জন্য CSS।
- ওয়েব ফরম্যাটে ছবি, যেমন PNG, JPEG, WebP, এবং SVG।
- ওয়েব ফরম্যাটে ভিডিও, যেমন MPEG-4 এবং WebM।
- ওয়েব ফন্ট।
- JSON বা অন্যান্য বিন্যাসে ডেটা।
ডিফল্টরূপে, ওয়েবসাইটগুলি নেটওয়ার্কের মাধ্যমে সম্পদ ডাউনলোড করে, এইচটিএমএল দিয়ে শুরু করে এবং বাকি সম্পদগুলি চালিয়ে যায়৷
দ্রুত লোড করতে এবং অফলাইনে উপলব্ধ হওয়ার জন্য সেই সংস্থানগুলি পরিচালনা করা ওয়েবের জন্য একটি চ্যালেঞ্জ। আজকাল, PWA গুলি পূর্বে শুধুমাত্র প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপগুলির সাথে যুক্ত ক্ষমতাগুলি ব্যবহার করে।
প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপ বনাম PWA
আপনি যখন একটি প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপ ইনস্টল করেন তখন আপনি সাধারণত একটি প্যাকেজ ডাউনলোড করছেন যাতে অ্যাপের সমস্ত সম্পদ অন্তর্ভুক্ত থাকে: কোড, ছবি, ফন্ট, ভিডিও ইত্যাদি। অতএব, অ্যাপটি অফলাইনে থাকাকালীনও, আপনার ডিভাইস স্টোরেজ থেকে এই সমস্ত সংস্থানগুলি উপলব্ধ।
অন্যদিকে, একটি ক্লাসিক ওয়েবসাইটের প্রয়োজন হলে সম্পদগুলি ডাউনলোড করার জন্য একটি নেটওয়ার্ক সংযোগ প্রয়োজন৷ আপনি যদি অফলাইনে থাকেন, তাহলে আপনি ব্রাউজার থেকে একটি ত্রুটি দেখতে পাবেন কারণ সেখানে কোনো সম্পদ ক্লায়েন্ট-সাইড নেই।
PWA পদ্ধতিটি প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপগুলির মতো কিছু বা সমস্ত সম্পদ উপলব্ধ ক্লায়েন্ট-সাইড তৈরি করে ঐতিহ্যগত ওয়েব অভিজ্ঞতা বাড়ায়। অতএব, আপনি যখন একটি PWA খুলবেন, প্রাথমিক রেন্ডারিং একটি প্ল্যাটফর্ম অ্যাপের মতো তাত্ক্ষণিক হতে পারে কারণ সম্পদগুলি নেটওয়ার্কে না গিয়েই উপলব্ধ।
ক্যাশে এবং স্টোরেজ
ওয়েবের শুরু থেকে, ডেভেলপারদের সম্পূর্ণ নিয়ন্ত্রণ নেই যে কিভাবে একটি সম্পদ ক্যাশে করা হয়। ব্রাউজারটি এইচটিটিপি ক্যাশের দায়িত্বে রয়েছে এবং এটি বিভিন্ন নীতির উপর ভিত্তি করে সংস্থানগুলি ক্যাশ করতে বা পরিবেশন করতে পারে বা নাও করতে পারে৷ ওয়েব স্টোরেজ এবং ইনডেক্সডডিবি-র মতো অন্যান্য স্টোরেজ বিকল্পগুলি সাধারণ ডেটা এবং অবজেক্টগুলি সংরক্ষণ করার জন্য ছিল।
PWA গুলিকে তাদের বিষয়বস্তুর জন্য শুধুমাত্র সেই নীতিগুলির উপর নির্ভর করতে হবে না। পরিবর্তে, কখন এবং কীভাবে সংস্থানগুলি ক্যাশে করা যায় এবং কখন এবং কীভাবে সেগুলি স্থানীয়ভাবে সরবরাহ করা যায় তার উপর আরও ভাল নিয়ন্ত্রণ পাওয়ার জন্য আমাদের কাছে আজ সমাধান রয়েছে: ক্যাশে স্টোরেজ API। ওয়েবে ক্লায়েন্ট-সাইড স্টোরেজ সমাধানের কয়েকটি উপলব্ধ রয়েছে:
- ওয়েব স্টোরেজ :
localStorageএবংsessionStorageঅন্তর্ভুক্ত। এই APIগুলি সাধারণ কী/মান স্ট্রিং জোড়া সঞ্চয় করে। ওয়েব স্টোরেজ সীমিত, এবং একটি সিঙ্ক্রোনাস API আছে, তাই যখনই সম্ভব এটি এড়ানো উচিত। - IndexedDB : একটি অ্যাসিঙ্ক্রোনাস API সহ একটি অবজেক্ট-ভিত্তিক ডাটাবেস (No-SQL) যা ওয়েব পারফরম্যান্সের জন্য ভাল। IndexedDB কাঠামোগত এবং বাইনারি ডেটা ক্লায়েন্ট-সাইড সংরক্ষণ করতে পারে। এটি সাধারণত আপনি ডেটা সঞ্চয় করতে যা ব্যবহার করবেন, যেমন আপনি API অনুরোধ হিসাবে কী পাবেন বা পাঠাবেন। এটি অবিলম্বে স্থানীয়ভাবে ডেটা সংরক্ষণ করা এবং পরে সার্ভারে সিঙ্ক করাও দরকারী। IndexedDB API ডাটাবেসের সাথে ইন্টারঅ্যাক্ট করতে ব্যবহৃত হয়।
- ক্যাশে সঞ্চয়স্থান : HTTP অনুরোধ এবং প্রতিক্রিয়া জোড়ার একটি সংগ্রহ যা আপনি সম্পদগুলি সংরক্ষণ এবং পুনরুদ্ধার করতে ব্যবহার করতে পারেন — তাদের HTTP শিরোনাম সহ — ঠিক যেমন সেগুলি সার্ভার থেকে বিতরণ করা হয়। ক্যাশে স্টোরেজ API আপনাকে নেটওয়ার্ক অনুরোধগুলি সঞ্চয়, পুনরুদ্ধার, আপডেট এবং মুছে ফেলার অনুমতি দেয়, উদাহরণস্বরূপ আপনার সম্পদের জন্য, এমনকি অফলাইনে থাকাকালীনও৷
সেবা কর্মীদের প্রয়োজন
একটি PWA তার সম্পদগুলি ক্যাশে স্টোরেজ এবং IndexedDB-এ সঞ্চয় করতে পারে, কিন্তু কীভাবে আমরা আপনার ব্যবহারকারীদের কাছে দ্রুত এবং অফলাইন অভিজ্ঞতা প্রদান করতে সেই সম্পদগুলি ব্যবহার করতে পারি। উত্তর? সেবা কর্মীরা।
একজন পরিষেবা কর্মীর সাথে, আপনি নেটওয়ার্কে না গিয়ে সম্পদ পরিবেশন করতে পারেন, ব্যবহারকারীকে বিজ্ঞপ্তি পাঠাতে পারেন, আপনার PWA আইকনে একটি ব্যাজ যোগ করতে পারেন, পটভূমিতে সামগ্রী আপডেট করতে পারেন এবং এমনকি আপনার সম্পূর্ণ PWA অফলাইনে কাজ করতে পারেন৷ পরবর্তী অধ্যায়ে পরিষেবা কর্মীদের সম্পর্কে আরও জানুন।
অফলাইন-প্রস্তুত
ব্যবহারকারীরা আশা করে যে আপনার অ্যাপ্লিকেশন একটি দ্রুত এবং সর্বদা প্রস্তুত অভিজ্ঞতা প্রদান করবে। তার মানে আপনার অ্যাপ অফলাইনে কাজ করা উচিত।
অফলাইন-প্রস্তুত হওয়ার অর্থ এই নয় যে আপনার সমস্ত সামগ্রী বা পরিষেবাগুলি নেটওয়ার্ক সংযোগ ছাড়াই উপলব্ধ হওয়া উচিত৷ তবে ব্যবহারকারী অফলাইনে থাকাকালীন অন্তত একটি মৌলিক অভিজ্ঞতা থাকা, যেমন একটি পৃষ্ঠা যা আপনাকে চালিয়ে যেতে ইন্টারনেটের সাথে সংযোগ করতে বলে, একটি সাধারণ ব্রাউজার ত্রুটির পরিবর্তে ব্যবহারকারীকে আপনার অ্যাপের অভিজ্ঞতার মধ্যে রেখে আরও ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদান করবে। . কিছু ব্রাউজারে PWA ইনস্টলেশনের মানদণ্ডে উত্তীর্ণ হওয়ার জন্য এটি একটি আবশ্যক বৈশিষ্ট্য। ক্যাশে কন্টেন্ট সহ আপনার PWA এর ইউজার ইন্টারফেস প্রদর্শন করা ভালো। ব্যবহারকারীদের আপনার সম্পূর্ণ PWA ব্যবহার চালিয়ে যেতে দেওয়া এবং যখন তারা অনলাইনে ফিরে আসে তখন সার্ভার পরিবর্তনগুলি সিঙ্ক করা অফলাইনে কাজ করার জন্য স্বর্ণের মান।
আপনার অ্যাপটি অফলাইনে উপলব্ধ করতে, আপনাকে আপনার অফলাইন অভিজ্ঞতার জন্য প্রয়োজনীয় সম্পদগুলি ক্যাশে করতে হবে এবং আপনার পরিষেবা কর্মীকে সেগুলি পরে পরিবেশন করতে হবে৷ আপনার প্রয়োজনের আগে আপনার ক্যাশে অফলাইন সম্পদ যোগ করতে ভুলবেন না। এটি একটি বিশেষ ক্ষেত্রে যেখানে অনুরোধ করা হলে আপনি তাদের ক্যাশে করতে পারবেন না।
প্রায়শই ব্যবহৃত ক্যাশে পদ্ধতি
আপনার PWA-তে, আপনি সমস্ত সিদ্ধান্তের ভারপ্রাপ্ত। আপনি ক্যাশে বা আপনার প্রয়োজনের উপর ভিত্তি করে সম্পদ ইনস্টল করার সর্বোত্তম পদ্ধতি বেছে নিতে পারেন। কিছু সিদ্ধান্ত নিতে হবে:
- Precaching: প্রথম লোডে আপনি যে সম্পদগুলি ইনস্টল করতে চান তা বাছাই করুন; সেগুলির মধ্যে HTML এবং অ্যাপ রেন্ডার করার জন্য ন্যূনতম সম্পদ অন্তর্ভুক্ত করা উচিত। precache ব্যবহার করার সময় মনে রাখবেন আপনি ডিভাইসের স্থান এবং নেটওয়ার্ক ব্যবহার করছেন। সম্পদ ডাউনলোড করার সময় এবং সেগুলি ক্যাশ করার সময় সচেতন এবং দায়িত্বশীল হন।
- প্রয়োজন অনুযায়ী ক্যাশে: অনুরোধ করা হলে ক্যাশে সম্পদ যোগ করতে ব্যবহৃত হয়। সাধারণত এগুলি এমন সম্পদ যা আপনার অ্যাপের সংস্করণ থেকে স্বাধীনভাবে পরিবর্তন করতে পারে, যেমন ছবি বা বিষয়বস্তু। প্রয়োজন অনুসারে কীভাবে ক্যাশে করা যায় সে সম্পর্কে বিভিন্ন কৌশলের জন্য ক্যাশিং বিভাগটি দেখুন।
- API এবং ওয়েব পরিষেবা: API কল ক্যাশে করা যেতে পারে; অথবা, API প্রতিক্রিয়া ক্যাশ করার পরিবর্তে, আপনি IndexedDB-তে তাদের ডেটা সংরক্ষণ করতে পারেন।
সম্পদ আপডেট করা হচ্ছে
অ্যাপ ক্যাটালগ ইনস্টল করা অ্যাপের জন্য স্ট্যান্ডার্ড অ্যাপ মডেলে, যখন ডেভেলপারদের তাদের অ্যাপ আপডেট করার প্রয়োজন হয়, তারা একটি নতুন প্যাকেজ প্রকাশ করে। ব্যবহারকারীদের পুরো প্যাকেজটি আবার ডাউনলোড করতে হবে, এমনকি যদি বেশিরভাগ সম্পদ পরিবর্তিত না হয়। পিডব্লিউএ-এর সাথে, উপরের বিভাগের পদ্ধতিগুলি ব্যবহার করে, আপনি কীভাবে এবং কখন সম্পদ আপডেট করবেন তা নির্ধারণ করেন। সম্পদ আপডেট করার জন্য এখানে বিভিন্ন বিকল্প রয়েছে:
- সম্পূর্ণ আপডেট: এই ক্ষেত্রে, আপনি যতবার অ্যাপে একটি পরিবর্তন করবেন, এমনকি একটি ছোটখাটোও, আপনার কোড ক্যাশে আবার সমস্ত সম্পদ ডাউনলোড করবে।
- আংশিক আপডেট: এই পদ্ধতিতে, আপনি কোন সম্পদগুলি আপডেট করা হয়েছে তা নির্ধারণ করার জন্য একটি পদ্ধতি তৈরি করেন এবং আপনি ব্যবহারকারীর হস্তক্ষেপের সাথে বা ছাড়াই শুধুমাত্র সেগুলি আপডেট করেন।
- ক্রমাগত আপডেট: এই কৌশলটি ব্যবহার করে, প্রতিটি PWA ব্যবহারে স্বয়ংক্রিয়ভাবে আপনার সম্পদ চেক করা হবে এবং আপডেট করা হবে
আকার এবং জীবনকাল
সাধারণত প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপগুলি আকারের সীমা নিয়ে কাজ করে না; ইনস্টলেশনের সময়, অ্যাপগুলি গিগাবাইট বা তার বেশি আকারের হতে পারে। যতক্ষণ পর্যন্ত ডিভাইসের ক্ষমতা আছে ততক্ষণ ইনস্টল করার অনুমতি দেওয়া হবে। এছাড়াও, অ্যাপটি ইনস্টল করার সময়, আপনি অ্যাপটি ব্যবহার করেন বা না করেন তা বিবেচনা না করেই এটি মোট স্টোরেজের পরিমাণ ব্যবহার করবে। PWA-এর জন্য স্টোরেজ আলাদাভাবে পরিচালনা করা হয়। আপনার PWA এর যুক্তিতে আপনি যে নীতিগুলি সংজ্ঞায়িত করেছেন তার উপর ভিত্তি করে ব্রাউজার আপনার সম্পদগুলি সংরক্ষণ করবে৷
আকারের সীমা ব্রাউজারের উপর নির্ভর করে। এটি প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপের মতো নমনীয় নয়, তবে এটি সাধারণত বেশিরভাগ ওয়েব অ্যাপের জন্য যথেষ্ট ভাল। আপনি এই নিবন্ধে ব্রাউজার দ্বারা নির্দিষ্ট সীমাবদ্ধতা খুঁজে পেতে পারেন।
ব্রাউজারগুলি স্টোরেজ চাপের উপর ভিত্তি করে সম্পদ উচ্ছেদ করতে পারে, বা কিছু সপ্তাহ নিষ্ক্রিয়তার পরে, যদি ব্যবহারকারী ব্রাউজারে আপনার PWA ব্যবহার করে থাকে। কিছু প্ল্যাটফর্মে, ব্যবহারকারী আপনার PWA ইনস্টল করলে, উচ্ছেদ ঘটবে না। যেখানে উপলব্ধ, কোডটি সেই উচ্ছেদ এড়াতে একটি API এর মাধ্যমে অবিরাম সঞ্চয়ের অনুরোধ করতে পারে।