প্রোগ্রেসিভ ওয়েব অ্যাপস: জাভাস্ক্রিপ্ট ডেভেলপারদের জন্য একটি আধুনিক গাইড

জাভাস্ক্রিপ্ট শিখতে আগ্রহী? আমার ইবুক পান jshandbook.com-এ

প্রোগ্রেসিভ ওয়েব অ্যাপস (PWA) হল মোবাইল অ্যাপ্লিকেশন ডেভেলপমেন্ট-এ ওয়েব টেকনোলজি ব্যবহার করে সর্বশেষ ট্রেন্ড। লেখার সময় (২০১৮ শুরুর দিকে), এগুলো শুধু অ্যান্ড্রয়েড ডিভাইসের জন্য প্রযোজ্য।

PWAs আসছে iOS 11.3 এবং macOS 10.13.4-এ, খুব শীঘ্র।

WebKit, Safari এবং Mobile Safari-এর অন্তর্নিহিত টেক, اخیرেই (আগস্ট ২০১৭) ঘোষণা করল যে তারা Service Workers ব্রাউজারে আনার কাজ শুরু করেছে। এর মানে শীঘ্রই এগুলো iOS ডিভাইসগুলোকেও পৌঁছে দেবে। তাই প্রোগ্রেসিভ ওয়েব অ্যাপস কনসেপ্ট সম্ভবত iPhone এবং iPad-এও প্রযোজ্য হবে, যদি অ্যাপল এই পদ্ধতিকে উৎসাহিত করে।

এটি কোনো გাণ্ডব্রেকিং নতুন টেকনোলজি নয়, বরং একটি নতুন টার্ম যা техникের একটি বান্ডেলকে চিহ্নিত করে যার লক্ষ্য হল ওয়েব-ভিত্তিক অ্যাপের জন্য একটি ভালো অভিজ্ঞতা তৈরি করা।

প্রোগ্রেসিভ ওয়েব অ্যাপ কী?

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

এই টেকনিকটি মূলত গুগল দ্বারা ২০১৫ সালে চালু করা হয়েছিল, এবং এটি ডেভেলপার এবং ব্যবহারকারী দুজনকেই অনেক সুবিধা আনে বলে প্রমাণিত।

ডেভেলপাররা প্রায়-ফার্স্ট-ক্লাস অ্যাপ্লিকেশন বানাতে পারেন একটি ওয়েব স্ট্যাক ব্যবহার করে। এটি সবসময় নেটিভ অ্যাপ্লিকেশন বানানোর চেয়ে নিখুঁত সহজ এবং সস্তা, বিশেষ করে ক্রস-প্ল্যাটফর্ম অ্যাপ বানানো এবং মেইনটেইন করার ইমপ্লিকেশন বিবেচনা করলে।

ডেভস কম ইনস্টলেশন friCTION-র সুবিধা পান, এবং একসময় যখন স্টোরে একটি অ্যাপ থাকা ৯৯.৯৯% অ্যাপের জন্য ডিসকভারিবিলিটির ক্ষেত্রে কিছুই আনে না, গুগল সার্চ একই সুবিধা যদি না বেশি দিতে পারে।

একটি প্রোগ্রেসিভ ওয়েব অ্যাপ হল একটি ওয়েবসাইট যা কিছু নির্দিষ্ট টেকনোলজি ব্যবহার করে ডেভেলপ করা হয়েছে যা মোবাইল অভিজ্ঞতাকে একটি সাধারণ মোবাইল-অপ্টিমাইজড ওয়েবসাইটের চেয়ে অনেক বেশি সुखদ করে তোলে। এটি প্রায় নেটিভ অ্যাপে কাজ করার মতো লাগে, কারণ এটি নিচের ফিচারগুলো অফার করে:

• অফলাইন সাপোর্ট
• দ্রুত লোড হয়
• নিরাপদ
• পুশ নোটিফিকেশন ইমিট করতে সক্ষম
• URL বার ছাড়া ইমার্সিভ, ফুল-স্ক্রিন ইউজার এক্সপেরিয়েন্স

মোবাইল প্ল্যাটফর্ম (লেখার সময় অ্যান্ড্রয়েড, কিন্তু এটি টেকনিক্যালি সেটি পর্যন্ত সীমাবদ্ধ নয়) প্রোগ্রেসিভ ওয়েব অ্যাপের জন্য বর্ধমান সাপোর্ট অফার করছে। তারা এমনকি ব্যবহারকারীকে অ্যাপটি হোম স্ক্রিনে যোগ করতে বলે যখন সে ব্যবহারকারী এমন একটি সাইটে ভিজিট করে।

কিন্তু প্রথমে, নামের上ちょっと clarification। Progressive Web App একটি confusing term হতে পারে, এবং একটি ভালো ডেফিনিশন হল: ওয়েব অ্যাপ যা মডার্ন ব্রাউজার ফিচারগুলো (যেমন ওয়েব ওয়ার্কার এবং ওয়েব অ্যাপ ম্যানিফেস্ট) অ্যালভেন্টেজ নেয় তাদের মোবাইল ডিভাইসগুলকে অ্যাপটিকে "আপগ্রেড" করে একটি ফার্স্ট-ক্লাস সিটিজেন অ্যাপের রোলে।

প্রোগ্রেসিভ ওয়েব অ্যাপস অ্যাল্টারনেটিভস

একটি PWA কীভাবে stehen করে অ্যাল্টারনেটিভের সাথে তুলনা করলে মোবাইল এক্সপেরিয়েন্স বানাতে?

আসুন প্রতিটির প্রস এবং কন্স ফোকাস করি, এবং দেখি PWAs কোথায় একটি ভালো ফিট।

নেটিভ মোবাইল অ্যাপস

নেটিভ মোবাইল অ্যাপস মোবাইল অ্যাপ বানাতে সবচেয়ে স্পষ্ট উপায়। iOS-এ Objective-C বা Swift, অ্যান্ড্রয়েডে Java/Kotlin এবং Windows Phone-এ C#।

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

নেটিভ অ্যাপের প্রধান পেইন পয়েন্ট হল ক্রস-প্ল্যাটফর্ম ডেভেলপমেন্টের জন্য অনেক ভিন্ন মেথডোলজি এবং বেস্ট প্র্যাকটিস শিখতে, মাস্টার করতে এবং আপ-টু-ডেট রাখতে হয়। যদি, উদাহরণস্বরূপ, আপনার একটি ছোট টিম থাকে অথবা আপনি একজন সোলো ডেভেলপার যিনি ৩ প্ল্যাটফর্মে অ্যাপ বানাচ্ছেন, তবে আপনাকে টেকনোলজি এবং এনভায়রনমেন্ট শিখতে অনেক সময় ব্যয় করতে হবে। আপনাকে বিভিন্ন লাইব্রেরি ম্যানেজ করতে এবং বিভিন্ন ওয়ার্কফ্লো ব্যবহার করতে হবে (উদাহরণস্বরূপ, iCloud শুধু iOS ডিভাইসে কাজ করে — এর অ্যান্ড্রয়েড ভার্সন নেই)।

হাইব্রিড অ্যাপস

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

সबচেয়ে সাধারণ প্ল্যাটফর্মগুলির মধ্যে Phonegap এবং Ionic Framework, অন্য অনেকের পাশাপাশি, এবং সাধারণত আপনি পেজে যা দেখেন সেটি একটি WebView যা Wesentlichen একটি লোকাল ওয়েবসাইট লোড করে।

আমি শুরুতে Xamarin লিস্টে অন্তর্ভুক্ত করেছিলাম, কিন্তু Carlos Eduardo Pérez সঠিকভাবে পয়েন্ট আউট করেছেন যে Xamarin নেটিভ কোড জেনারেট করে।

হাইব্রিড অ্যাপসের কী দিক হল write once, run anywhere কনসেপ্ট। ভিন্ন প্ল্যাটফর্ম কোড বিল্ড টাইমে জেনারেট হয়, এবং আপনি JavaScript, HTML এবং CSS ব্যবহার করে অ্যাপ বানাচ্ছেন, যা অদ্ভুত। ডিভাইস ক্যাপাবিলিটিগুলো (মাইক্রোফোন, ক্যামেরা, নেটওয়ার্ক, gps…) JavaScript APIs 통해 এক্সপোজ করা হয়।

হাইব্রিড অ্যাপ বানানোর খারাপ দিক হল, আপনি যদি চমৎকার কাজ না করেন, তবে আপনি একটি কমন ডিনোমিনেটর এ সেটল করতে পারেন। এটি কার্যকরভাবে একটি অ্যাপ তৈরি করে যা সব প্ল্যাটফর্মে সাব-অপ্টিমাল কারণ অ্যাপটি প্ল্যাটফর্ম-স্পেসিফিক হিউম্যান-কম্পিউটার ইন্টারঅ্যাকশন গাইডলাইন উপেক্ষা করে।

এছাড়া, জটিল ভিউসের জন্য পারফরম্যান্স সফার করতে পারে।

React Native-এ বিল্ট অ্যাপস

React Native মোবাইল ডিভাই스의 নেটিভ কন্ট্রোলগুলিকে JavaScript API 통해 এক্সপোজ করে, কিন্তু আপনি কার্যকরভাবে একটি নেটিভ অ্যাপ্লিকেশন তৈরি করছেন, একটি WebView-এর ভিতরে একটি ওয়েবসাইট এমবেড করার বদলে।

তাদের মোটো, এই পদ্ধতিকে হাইব্রিড অ্যাপস থেকে আলাদা করার জন্য, হল learn once, write anywhere. এটি মানে পদ্ধতিটি প্ল্যাটফর্ম জুড়ে একই, কিন্তু আপনি প্রতিটি প্ল্যাটফর্মে একটি চমৎকার অভিজ্ঞতা দিতে সম্পূর্ণ আলাদা অ্যাপ তৈরি করবেন।

পারফরম্যান্স নেটিভ অ্যাপের সাথে তুলনাযোগ্য, কারণ আপনি যা বানাচ্ছেন সেটি Wesentlichen একটি নেটিভ অ্যাপ যা অ্যাপ স্টোরের মাধ্যমে ডিস্ট্রিবিউট হয়।

প্রোগ্রেসিভ ওয়েব অ্যাপস ফিচারস

গত সেকশনে, আপনি প্রোগ্রেসিভ ওয়েব অ্যাপসের প্রধান competitors দেখেছেন। তাহলে PWAs কীভাবে stehen করে তাদের সাথে তুলনা করলে, এবং তাদের প্রধান ফিচারগুলো কী?

মনে রাখবেন — বর্তমানে, প্রোগ্রেসিভ ওয়েব অ্যাপস শুধু অ্যান্ড্রয়েড ডিভাইসের জন্য।

ফিচারস

প্রোগ্রেসিভ ওয়েব অ্যাপসের একটা জিনিস আছে যা সেগুলোকে উপরের পদ্ধতিগুলো থেকে সম্পূর্ণরূপে আলাদা করে: তারা অ্যাপ স্টোরে ডিপ্লয় করা হয় না।

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

প্রোগ্রেসিভ ওয়েব অ্যাপস সার্চ ইঞ্জিন ব্যবহার করে ডিসকভারেবল, এবং যখন একজন ব্যবহারকারী আপনার সাইটে পৌঁছায় যেটিতে PWAs ক্যাপাবিলিটি আছে, ব্রাউজার ডিভাইসের সাথে মিলিত হয়ে ব্যবহারকারীকে জিজ্ঞেস করে তারা অ্যাপটি হোম স্ক্রিনে ইনস্টল করতে চান কিনা। এটি বিশাল, কারণ রেগুলার SEO আপনার PWA-তে প্রযোজ্য হতে পারে, পেইড একুইজিশনে অনেক কম নির্ভরশীলতা দিয়ে।

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

PWAs মূলত HTML5 অ্যাপ্লিকেশন/রেসপন্সিভ ওয়েবসাইট স্টেরয়েডসে, কিছু কী টেকনোলজি যা اخیرেই আনা হয়েছে কিছু কী ফিচার সম্ভব করতে। আপনি যদি মনে করেন, মূল আইফোন নেটিভ অ্যাপ ডেভেলপ করার অপশন ছাড়া এলো। ডেভেলপারদের বলা হয়েছিল HTML5 মোবাইল অ্যাপ ডেভেলপ করুন যেগুলো হোম স্ক্রিনে ইনস্টল করা যাবে, কিন্তু সেই সময় টেক এই জন্য প্রস্তুত ছিল না।

প্রোগ্রেসিভ ওয়েব অ্যাপস অফলাইন চলে।

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

এছাড়া, শেয়ারেবিলিটি ব্যবহারকারীদের জন্য একটি অনেক সুন্দর অভিজ্ঞতা তৈরি করে যারা আপনার অ্যাপ শেয়ার করতে চান, কারণ তাদের শুধু একটি URL দরকার।

বেনিফিটস

তাহলে ব্যবহারকারী এবং ডেভেলপাররা কেন প্রোগ্রেসিভ ওয়েব অ্যাপস যত্ন দেবেন?

1. PWA হালকা। নেটিভ অ্যাপস ২০০MB বা বেশি হতে পারে, কিন্তু একটি PWA KB রেঞ্জে হতে পারে।
2. কোনো নেটিভ প্ল্যাটফর্ম কোড নেই
3. অ্যাকুইজিশন কস্ট কম (একজন ব্যবহারকারীকে অ্যাপ ইনস্টল করতে মনিয়ে নেওয়ার চেয়ে ওয়েবসাইট ভিজিট করিয়ে ফার্স্ট-টাইম এক্সপেরিয়েন্স দেয়া অনেক সহজ)
4. বিল্ড এবং আপডেট রিলিজ করার জন্য উল্লেখযোগ্যভাবে কম পরিশ্রম দরকার
5. রেগুলার অ্যাপ-স্টোর অ্যাপের চেয়ে অনেক বেশি ডিপ লিংক সাপোর্ট আছে

কোর কনসেপ্টস

• Responsive: UI ডিভাইস স্ক্রিন সাইজে адап্ট করে
• App-like feel: এটি একটি ওয়েবসাইটের মতো লাগে না বরং একটি অ্যাপের মতো (যতটা সম্ভব)
• Offline support: এটি ডিভাইস স্টোরেজ ব্যবহার করে অফলাইন এক্সপেরিয়েন্স প্রদান করে
• Installable: ডিভাইস ব্রাউজার ব্যবহারকারীকে আপনার অ্যাপ ইনস্টল করতে বলে
• Re-engaging: পুশ নোটিফিকেশন ইনস্টল করার পর ব্যবহারকারীদের আপনার অ্যাপ পুনরায় আবিষ্কার করতে সাহায্য করে
• Discoverable: সার্চ ইঞ্জিন এবং SEO অপ্টিমাইজেশন অ্যাপ স্টোরের চেয়ে অনেক বেশি ব্যবহারকারী দিতে পারে
• Fresh: অ্যাপটি নিজে আপডেট হয় এবং কন্টেন্ট একবার অনলাইন হলে
• Safe: এটি HTTPS ব্যবহার করে
• Progressive: এটি যেকোনো ডিভাইসে কাজ করবে, পুরানো ডিভাইসেও, এমনকি যদি এর কম ফিচার থাকে (যেমন শুধু একটি ওয়েবসাইট হিসেবে, ইনস্টলযোগ্য না)
• Linkable: URL ব্যবহার করে এটিকে পয়েন্ট করা সহজ

সার্ভিস ওয়ার্কারস

প্রোগ্রেসিভ ওয়েব অ্যাপ ডেফিনিশনের একটি অংশ হল এটি অফলাইন কাজ করতে হবে।

যেহেতু যেটি ওয়েব অ্যাপকে অফলাইন কাজ করার অনুমতি দেয় সেটি হল Service Worker, এর ইমপ্লিকেশন হল Service Workers একটি প্রোগ্রেসিভ ওয়েব অ্যাপের अनিবার্য অংশ।

WARNING: Service Workers বর্তমানে শুধু Chrome (Desktop এবং Android), Firefox, এবং Opera দ্বারা সাপোর্টেড। আপডেটেড ডেটা সাপোর্টের জন্য https://caniuse.com/#feat=serviceworkers দেখুন।

TIP: Service Workers কে Web Workers-এর সাথে গুলিয়ে ফেলবেন না। তারা সম্পূর্ণ ভিন্ন জিনিস।

একটি Service Worker হল একটি JavaScript ফাইল যা ওয়েব অ্যাপ এবং নেটওয়ার্কের মধ্যে একটি মিডলম্যান হিসেবে কাজ করে। এই কারণে এটি ক্যাশ সার্ভিস দিতে পারে, অ্যাপ রেন্ডারিং স্পিড আপ করতে পারে, এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে পারে।

সিকিউরিটি কারণগুলো için, শুধু HTTPS সাইটগুলো Service Workers ব্যবহার করতে পারে, এবং এটি প্রোগ্রেসিভ ওয়েব অ্যাপ HTTPS-এ সার্ভ হওয়া বাধ্যতামূলক করার একটি অংশ।

Service Workers ডিভাইসে উপলব্ধ নেই প্রথমবার ব্যবহারকারী অ্যাপে ভিজিট করলে। প্রথম ভিজিটে সার্ভিস ওয়ার্কার ইনস্টল হয়, এবং তারপর সাইটের আলাদা আলাদা পেজে পরবর্তী ভিজিটে, এই Service Worker কল হবে।

Service Workers-র সম্পূর্ণ গাইড চেক আউট করুন

দ্য অ্যাপ ম্যানিফেস্ট

The App Manifest হল একটি JSON ফাইল যা আপনি আপনার প্রোগ্রেসিভ ওয়েব অ্যাপের সম্পর্কে ডিভাইসকে ইনফরমেশন দিতে ব্যবহার করতে পারেন।

আপনি আপনার ওয়েব সাইটের প্রতিটি পেজের হেডারে ম্যানিফেস্টের লিংক যোগ করুন:

<link rel="manifest" href="/manifest.webmanifest">

এই ফাইলটি ডিভাইসকে বলে দেবে কীভাবে সেট করতে হয়:

• অ্যাপের নাম এবং সংক্ষিপ্ত নাম
• আইকনদের লোকেশন, বিভিন্ন আকারে
• স্টার্টিং URL, ডোমেনের সাপেক্ষে
• ডিফল্ট অরিয়েন্টেশন
• স্প্ল্যাশ স্ক্রিন

উদাহরণ

{ "name": "The Weather App", "short_name": "Weather", "description": "Progressive Web App Example", "icons": [{ "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "images/icons/icon-256x256.png", "sizes": "256x256", "type": "image/png" }], "start_url": "/index.html?utm_source=app_manifest", "orientation": "portrait", "display": "standalone", "background_color": "#3E4EB8", "theme_color": "#2F3BA2" }

The App Manifest হল একটি W3C Working Draft, পাওয়া যাবে https://www.w3.org/TR/appmanifest/-এ

দ্য অ্যাপ শেল

The App Shell একটি টেকনোলজি নয় বরং একটি ডিজাইন কনসেপ্ট। এটি ওয়েব অ্যাপ কন্টেইনারটি প্রথমে লোড এবং রেন্ডার করার লক্ষ্য রাখে, এবং একচুঁকি পর আসল কন্টেন্ট, যাতে ব্যবহারকারীকে একটি সুন্দর অ্যাপ-লাইক ইমপ্রেশন मिलে।

উদাহরণস্বরূপ, Apple-এর Human Interface Guidelines-এর সাজেশন নিন স্প্ল্যাশ স্ক্রিন ব্যবহার করার যা ইউজার ইন্টারফেসের সাথে সাদৃশ্যপূর্ণ। এটি একটি মনস্তাত্ত্বিক হিন্ট দেয় যা খুঁজে পাওয়া গেলো অ্যাপ লোড হতে লম্বা সময় লাগছে সেই ধারণা কমিয়ে দেয়।

ক্যাশিং

The App Shell কন্টেন্ট থেকে আলাদা করে ক্যাশ করা হয়, এবং এটি সেটআপ করা থাকে যাতে ক্যাশ থেকে শেল বিল্ডিং ব্লকগুলো রিট্রিভ করতে খুব কম সময় লাগে।

জাভাস্ক্রিপ্ট শিখতে আগ্রহী? আমার ইবুক পান jshandbook.com-এ