একক-পৃষ্ঠা অ্যাপ্লিকেশন এবং প্রগতিশীল ওয়েব অ্যাপ্লিকেশনগুলি কী?

একক পৃষ্ঠার অ্যাপ্লিকেশন (SPAs) এবং প্রগ্রেসিভ ওয়েব অ্যাপস (PWAs) ওয়েবে বিপ্লব ঘটাচ্ছে। তারা উভয়ই অভিনব প্রযুক্তি যা দেখতে একই রকম, কিন্তু তা নয়। মুখোমুখি, মানুষ প্রায়ই তাদের বিনিময়যোগ্যভাবে ব্যবহার করে।

আসুন তাদের প্রত্যেকের মূল বৈশিষ্ট্য এবং স্থাপত্যকে আরও ভালভাবে বুঝতে পারি।

একক পৃষ্ঠা অ্যাপ্লিকেশন কি?

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

এটি বলেছিল, লক্ষ্য হল ব্যবহারকারীদের তাদের ব্যবহার করা এবং একবারে দেখার জন্য প্রয়োজনীয় সমস্ত লোড করে একই পৃষ্ঠায় রাখা। এটি একটি ভাল ব্যবহারকারীর অভিজ্ঞতায় অনুবাদ করে।

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

সুতরাং, যখন আপনি একটি SPA- তে নেভিগেট করেন, আপনি একটি একক DOM- এ প্রিলোডেড কন্টেন্ট ব্রাউজ করছেন এবং বিভিন্ন DOM- এ ভিজিট করছেন না কারণ আপনি ভুলভাবে বিশ্বাস করেছেন।

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

যদিও অন্যান্য প্রযুক্তি পছন্দ করে যেমন এবং এলম-স্পা আসছে

সম্পর্কিত: জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলি যা শেখার যোগ্য

জাভাস্ক্রিপ্ট একটি ব্যবহার করে async/অপেক্ষা করুন ফাংশন যা আপনাকে একটি ইনপুট ছাড়া অন্য অনুরোধের আউটপুট ব্লক না করে গতিশীল এবং স্ট্যাটিক সামগ্রী উভয়ই অসিঙ্ক্রোনাসভাবে লোড করতে দেয়। সুতরাং, SPA গুলি নন-ব্লকিং ইনপুট-আউটপুট (I/O) সিস্টেমে কাজ করে।

তিনি বলেন, ReactJS, Vue.js, AngularJS, Ember.js, এবং Backbone.js এর মত জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলি SPA- এর দ্রুত বিকাশকে সমর্থন করে। শুরু করার জন্য, আপনি Vue.js এর এই শিক্ষানবিসের ওভারভিউ দেখতে পারেন।

যেহেতু এটি গতি প্রদান করে, বেশিরভাগ এন্টারপ্রাইজ অ্যাপ তাদের ওয়েবসাইটগুলিকে একটি পৃষ্ঠায় রূপান্তর করার ধারণা গ্রহণ করেছে। নেটফ্লিক্স, ইউটিউব, পেপ্যাল, ফেসবুক, ইনস্টাগ্রাম, টুইটার এবং পিন্টারেস্ট সবই এসপিএর উদাহরণ।

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

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

গুগল দ্বারা 2015 সালে প্রবর্তিত, একটি PWA এর লক্ষ্য হল এমন অ্যাপ তৈরি করা যা তার ব্যবহারকারীদের সাথে সরাসরি এবং ক্রমবর্ধমানভাবে কথা বলে। এটির লক্ষ্য হল ব্যবহারকারীদের অ্যাপের সাথে প্রবাহিত রাখা, এমনকি যখন একটি দুর্বল বা অস্তিত্বহীন নেটওয়ার্ক সংযোগ রয়েছে।

সর্বদা, একটি পিডব্লিউএ একটি স্ন্যাপে আপনার যা প্রয়োজন তা সরবরাহ করে। এটি একটি SPA এর সাধারণ প্রাথমিক কন্টেন্ট লোডিং বৈশিষ্ট্যের মধ্য দিয়ে যায় না।

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

সম্পর্কিত: প্রগতিশীল ওয়েব অ্যাপস কি এবং কিভাবে আপনি একটি ইনস্টল করবেন?

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

স্পটিফাই, স্ল্যাক এবং উবারের মতো অ্যাপগুলি PWA- এর উদাহরণ।

PWAs এর সাধারণত একটি সাধারণ স্থাপত্য নিয়ম আছে। পিডব্লিউএর যেভাবে কাজ করা উচিত তার জন্য এটির নিম্নলিখিত বৈশিষ্ট্যগুলি থাকতে হবে:

1. একজন শ্রমিক

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

সম্পর্কিত: CPU ক্যাশে কিভাবে কাজ করে?

ব্যবহার করে একটি প্রতিজ্ঞা বস্তু, একজন কর্মী ব্যবহারকারীর দ্বারা চূড়ান্ত অনুরোধের ক্ষেত্রে ইতিমধ্যে ডাউনলোড করা সামগ্রী সরবরাহ করতে পারে (এমনকি তারা অফলাইনে থাকলেও)। একজন পরিষেবা কর্মী, তবে, PWA- তে একটি অবরুদ্ধ সম্পত্তি প্রদান করে।

2. একটি নিরাপদ প্রসঙ্গ

বিতরণ করা সামগ্রীর গোপনীয়তার জন্য একজন পরিষেবা কর্মীর একটি নিরাপদ সংযোগ (HTTPS) প্রয়োজন। যখন আপনি একটি অনুরোধ পাঠান, একজন কর্মী PWA এবং ব্রাউজারের মধ্যে নিরাপদ যোগাযোগ স্থাপন করে। অতএব, একটি নিরাপদ প্রেক্ষাপট PWAs- এ ম্যান-ইন-দ্য মিডল অ্যাটাক (MITM) এর মতো গোপনীয়তা লঙ্ঘন রোধ করে।

3. একটি ওয়েব অ্যাপ্লিকেশন ম্যানিফেস্ট ফাইল

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

PWAs এবং SPA এর মধ্যে মিল কি?

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

তারা উভয়েরই একটি প্রতিক্রিয়াশীল ইন্টারফেস প্রদান করে ব্যবহারকারীর অভিজ্ঞতা উন্নত করা।

যেহেতু তারা উভয়েই একটি অ্যাপের অভিজ্ঞতা প্রদান করে, তাদের মিশ্রিত করা সহজ, এবং আপনি যখন তাদের সাথে ইন্টারঅ্যাক্ট করেন তখন কোনটি আপনি খুব কমই বলতে পারেন। অবশেষে, এই নোটে, আপনি তাদের অ্যাক্সেস করার আগে উভয়েরই একটি URL প্রয়োজন।

SPAs এবং PWA এর মধ্যে মূল পার্থক্য

PWAs এবং SPAs কিছু লক্ষণীয় বৈশিষ্ট্য ভাগ করে নিতে পারে, কিন্তু তারা দুটি ভিন্ন জিনিস। এখানে মূল বৈশিষ্ট্যের পার্থক্যগুলি আপনার লক্ষ্য করা উচিত:

একক-পৃষ্ঠা অ্যাপ্লিকেশনের মূল বৈশিষ্ট্য

এগুলি কেবল ব্রাউজারের মাধ্যমে অ্যাক্সেসযোগ্য।
যদিও প্রস্তাবিত নয়, আপনি একটি অনিরাপদ নেটওয়ার্ক (HTTP) এর মাধ্যমে তাদের পরিবেশন করতে পারেন।
তাদের সেবা কর্মীদের প্রয়োজন নেই।
SPA- এর JSON ম্যানিফেস্ট ফাইল নেই, যার মানে সেগুলি আনইনস্টলযোগ্য।
সেগুলো একক পৃষ্ঠা হতে হবে।
নেটওয়ার্ক না থাকলে অ্যাক্সেসযোগ্য নয়।

প্রগতিশীল ওয়েব অ্যাপের মূল বৈশিষ্ট্য

ব্রাউজারের মাধ্যমে তাদের অ্যাক্সেস করা একটি বিকল্প কারণ তারা ইনস্টলযোগ্য।
সমস্ত PWA- এর পরিষেবা কর্মীদের প্রয়োজন এবং তাদের অবশ্যই একটি নিরাপদ নেটওয়ার্ক (HTTPS) এর মাধ্যমে অনুরোধ করতে হবে।
প্রতিক্রিয়াগুলি ক্যাশে এবং বিতরণ করা হয় a এর মাধ্যমে প্রতিজ্ঞা বস্তু
নেটওয়ার্ক সংযোগের অভাবেও এগুলি অ্যাক্সেসযোগ্য।
তারা SPAs এর চেয়ে দ্রুত।
তাদের সর্বদা একটি ম্যানিফেস্ট ফাইল থাকে, তাই সেগুলি ডাউনলোডযোগ্য, ইনস্টলযোগ্য এবং সহজেই অ্যাক্সেসযোগ্য।
একটি PWA একটি একক পৃষ্ঠার আবেদন নাও হতে পারে।

SPAs এবং PWAs ওয়েবসাইট ডেলিভারি প্রভাবিত করছে

অনেকগুলি এন্টারপ্রাইজ ওয়েবসাইট এখন এই নতুন প্রযুক্তিগুলি গ্রহণ করে, এখন তাদের পরিষেবা সরবরাহের দিকে ইতিবাচক পরিবর্তন এসেছে।

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

বাহ্যিক হার্ড ড্রাইভ পিসিতে দেখা যাচ্ছে না

শেয়ার করুন শেয়ার করুন টুইট ইমেইল সিঙ্ক্রোনাস বনাম অ্যাসিঙ্ক্রোনাস প্রোগ্রামিং: তারা কিভাবে আলাদা?

আপনার পরবর্তী প্রকল্পের জন্য আপনার কি সিঙ্ক্রোনাস বা অ্যাসিঙ্ক্রোনাস প্রোগ্রামিং ব্যবহার করা উচিত? এখানে খুঁজে বের করুন।

পরবর্তী পড়ুন সম্পর্কিত বিষয়

প্রোগ্রামিং
প্রোগ্রামিং
অ্যাপ ডেভেলপমেন্ট

লেখক সম্পর্কে ইডিসু ওমিসোলা(94 নিবন্ধ প্রকাশিত)

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

Idowu Omisola থেকে আরো

আমাদের নিউজলেটার সদস্যতা

প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!

সাবস্ক্রাইব করতে এখানে ক্লিক করুন