কি একটি ভাল প্রগতিশীল ওয়েব অ্যাপ তৈরি করে?

প্রগ্রেসিভ ওয়েব অ্যাপস (PWA) আধুনিক API-এর সাথে তৈরি এবং উন্নত করা হয়েছে যাতে বর্ধিত ক্ষমতা, নির্ভরযোগ্যতা এবং ইনস্টলেবিলিটি প্রদান করা হয় যখন যেকোনও জায়গায়, যেকোনও ডিভাইসে একটি একক কোডবেসের মাধ্যমে পৌঁছানো যায়। আপনাকে সর্বোত্তম সম্ভাব্য অভিজ্ঞতা তৈরি করতে সাহায্য করতে, আপনাকে গাইড করার জন্য মূল এবং সর্বোত্তম চেকলিস্ট এবং সুপারিশগুলি ব্যবহার করুন।

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

দ্রুত শুরু হয়, দ্রুত থাকে

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

কেন

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

যদিও সমস্ত অ্যাপ্লিকেশানের বিভিন্ন প্রয়োজন রয়েছে, Lighthouse-এর কর্মক্ষমতা অডিটগুলি কোর ওয়েব ভাইটালগুলির উপর ভিত্তি করে করা হয় এবং সেই অডিটগুলিতে উচ্চ স্কোর করা আপনার ব্যবহারকারীদের একটি উপভোগ্য অভিজ্ঞতার সম্ভাবনাকে আরও বেশি করে তুলবে৷ আপনি আপনার ওয়েব অ্যাপের জন্য বাস্তব-বিশ্ব কর্মক্ষমতা ডেটা পেতে PageSpeed ​​Insights বা Chrome ব্যবহারকারীর অভিজ্ঞতার প্রতিবেদনও ব্যবহার করতে পারেন৷

কিভাবে

কিভাবে আপনার PWA দ্রুত শুরু করতে হয় এবং দ্রুত থাকতে হয় তা শিখতে দ্রুত লোডের সময় সম্পর্কে আমাদের গাইড অনুসরণ করুন।

যেকোনো ব্রাউজারে কাজ করে

ব্যবহারকারীরা আপনার ওয়েব অ্যাপটি ইনস্টল করার আগে অ্যাক্সেস করতে বেছে নেওয়া যেকোনো ব্রাউজার ব্যবহার করতে পারেন।

কেন

প্রগ্রেসিভ ওয়েব অ্যাপস হল প্রথমে ওয়েব অ্যাপস, এবং এর মানে তাদের ব্রাউজার জুড়ে কাজ করতে হবে।

এটি করার একটি কার্যকর উপায় হল, রেসিলিয়েন্ট ওয়েব ডিজাইনের জেরেমি কিথের মতে, মূল বৈশিষ্ট্যগুলি চিহ্নিত করা, সহজতম সম্ভাব্য প্রযুক্তি ব্যবহার করে সেই বৈশিষ্ট্যগুলি উপলব্ধ করা এবং তারপর যেখানে সম্ভব অভিজ্ঞতা বৃদ্ধি করা৷ অনেক ক্ষেত্রে, এর অর্থ হল মূল বৈশিষ্ট্যগুলি তৈরি করতে শুধুমাত্র HTML দিয়ে শুরু করা এবং আরও আকর্ষক অভিজ্ঞতা তৈরি করতে CSS এবং JavaScript-এর মাধ্যমে ব্যবহারকারীর অভিজ্ঞতা বৃদ্ধি করা।

উদাহরণস্বরূপ ফর্ম জমা নিন। এটি বাস্তবায়নের সবচেয়ে সহজ উপায় হল একটি HTML ফর্ম যা একটি POST অনুরোধ জমা দেয়। এটি তৈরি করার পরে, আপনি জাভাস্ক্রিপ্টের সাথে ফর্ম যাচাইকরণের অভিজ্ঞতা বাড়াতে পারেন এবং AJAX এর মাধ্যমে ফর্ম জমা দিতে পারেন, যারা এটি সমর্থন করতে পারেন তাদের অভিজ্ঞতার উন্নতি করতে পারেন৷

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

কিভাবে

জেরেমি কিথের রেসিলিয়েন্ট ওয়েব ডিজাইন এই ক্রস-ব্রাউজার, প্রগতিশীল পদ্ধতিতে ওয়েব ডিজাইন সম্পর্কে কীভাবে চিন্তা করতে হয় তা বর্ণনা করে একটি চমৎকার সম্পদ।

অতিরিক্ত পড়া

যে কোনো পর্দার আকার প্রতিক্রিয়াশীল

ব্যবহারকারীরা আপনার পিডব্লিউএ যেকোন স্ক্রিনের আকারে ব্যবহার করতে পারেন এবং এর সমস্ত বিষয়বস্তু যেকোন ভিউপোর্ট আকারে উপলব্ধ।

কেন

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

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

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

কিভাবে

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

একটি কাস্টম অফলাইন পৃষ্ঠা প্রদান করে

যখন ব্যবহারকারীরা অফলাইনে থাকে, তখন তাদের আপনার PWA-তে রাখা ডিফল্ট ব্রাউজার অফলাইন পৃষ্ঠায় ফিরে যাওয়ার চেয়ে আরও বেশি নিরবচ্ছিন্ন অভিজ্ঞতা প্রদান করে।

কেন

ব্যবহারকারীরা তাদের সংযোগ স্থিতি নির্বিশেষে ইনস্টল করা অ্যাপগুলি কাজ করবে বলে আশা করে৷ একটি প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপ অফলাইনে থাকা অবস্থায় কখনই একটি ফাঁকা পৃষ্ঠা দেখায় না এবং একটি PWA কখনই ব্রাউজার ডিফল্ট অফলাইন পৃষ্ঠা দেখাতে পারে না। একটি কাস্টম অফলাইন অভিজ্ঞতা প্রদান করা, উভয়ই যখন একজন ব্যবহারকারী একটি URL এ নেভিগেট করে যা ক্যাশে করা হয়নি এবং যখন একজন ব্যবহারকারী এমন একটি বৈশিষ্ট্য ব্যবহার করার চেষ্টা করে যার জন্য একটি সংযোগ প্রয়োজন, আপনার ওয়েব অভিজ্ঞতাকে এটি চলমান ডিভাইসের অংশের মতো অনুভব করতে সহায়তা করে৷

কিভাবে

একটি পরিষেবা কর্মীর install ইভেন্ট চলাকালীন, আপনি একটি কাস্টম অফলাইন পৃষ্ঠা প্রিক্যাশ করতে পারেন যাতে কোনও ব্যবহারকারী অফলাইনে যায় তা দেখানোর জন্য৷ এটি নিজে কীভাবে বাস্তবায়ন করবেন তা শিখতে একটি অফলাইন ফলব্যাক পৃষ্ঠা তৈরি করুন দেখুন৷ মনে রাখবেন যে Chrome একটি মৌলিক অফলাইন পৃষ্ঠা দেখাবে যদি কোনোটি প্রদান করা না হয়।

ইন্সটলযোগ্য

যে ব্যবহারকারীরা তাদের ডিভাইসে অ্যাপগুলি ইনস্টল বা যুক্ত করেন তারা সেই অ্যাপগুলির সাথে বেশি জড়িত হন।

কেন

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

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

কিভাবে

কিভাবে আপনার PWA ইনস্টলযোগ্য করা যায় তা শিখতে আমাদের ইনস্টলযোগ্য গাইড অনুসরণ করুন।

সর্বোত্তম প্রগতিশীল ওয়েব অ্যাপ চেকলিস্ট

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

একটি অফলাইন অভিজ্ঞতা প্রদান করে

যেখানে কানেক্টিভিটি কঠোরভাবে প্রয়োজন হয় না, আপনার অ্যাপটি অনলাইনের মতোই অফলাইনেও কাজ করে।

কেন

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

কিভাবে

আপনার ব্যবহারকারীরা কোন বৈশিষ্ট্যগুলি অফলাইনে কাজ করবে তা নির্ধারণ করার পরে, আপনাকে আপনার সামগ্রী উপলব্ধ করতে হবে এবং অফলাইন প্রসঙ্গের সাথে মানিয়ে নিতে হবে৷ আপনি IndexedDB ব্যবহার করতে পারেন, একটি ইন-ব্রাউজার NoSQL স্টোরেজ সিস্টেম, ডেটা সঞ্চয় ও পুনরুদ্ধার করতে এবং ব্যাকগ্রাউন্ড সিঙ্ক ব্যবহার করতে পারেন যাতে ব্যবহারকারীরা অফলাইনে কাজ করতে পারেন এবং ব্যবহারকারীর আবার স্থিতিশীল সংযোগ না পাওয়া পর্যন্ত সার্ভার যোগাযোগ স্থগিত করতে পারেন। এছাড়াও আপনি পরিষেবা কর্মীদের ব্যবহার করতে পারেন অন্যান্য ধরণের সামগ্রী যেমন ইমেজ, ভিডিও ফাইল এবং অডিও ফাইল, অফলাইনে ব্যবহারের জন্য সংরক্ষণ করতে এবং ব্যবহারকারীদের প্রমাণীকরণ রাখতে নিরাপদ, দীর্ঘস্থায়ী সেশন বাস্তবায়ন করতে। ব্যবহারকারীর অভিজ্ঞতার দৃষ্টিকোণ থেকে, আপনি কঙ্কাল স্ক্রিন ব্যবহার করতে পারেন যা ব্যবহারকারীদের লোড করার সময় গতি এবং বিষয়বস্তু সম্পর্কে ধারণা দেয় যা প্রয়োজন অনুসারে ক্যাশে করা সামগ্রী বা অফলাইন সূচকে ফিরে যেতে পারে।

সম্পূর্ণরূপে অ্যাক্সেসযোগ্য

সমস্ত ব্যবহারকারীর মিথস্ক্রিয়া WCAG 2.0 অ্যাক্সেসযোগ্যতার প্রয়োজনীয়তাগুলিকে পাস করে।

কেন

বেশিরভাগ ব্যবহারকারী, তাদের জীবনের কোনো না কোনো সময়ে, WCAG 2.0 অ্যাক্সেসিবিলিটি প্রয়োজনীয়তার আওতায় আপনার PWA ব্যবহার করতে চান। আপনার PWA এর সাথে যোগাযোগ করার এবং বোঝার মানুষের ক্ষমতা একটি বর্ণালীতে বিদ্যমান এবং প্রয়োজনগুলি অস্থায়ী বা স্থায়ী হতে পারে। আপনার PWA অ্যাক্সেসযোগ্য করে, আপনি এটিকে সবার জন্য ব্যবহারযোগ্য করে তোলেন।

কিভাবে

ওয়েব অ্যাক্সেসিবিলিটির সাথে W3C এর ভূমিকা শুরু করার জন্য একটি ভাল জায়গা। বেশিরভাগ অ্যাক্সেসিবিলিটি টেস্টিং ম্যানুয়ালি করতে হবে। Lighthouse, ax , এবং Accessibility Insights-অ্যাক্সেসিবিলিটি অডিটের মতো টুলগুলি আপনাকে কিছু অ্যাক্সেসিবিলিটি টেস্টিং স্বয়ংক্রিয় করতে সাহায্য করতে পারে। আপনার নিজের থেকে সেই উপাদানগুলি পুনরায় তৈরি করার পরিবর্তে শব্দার্থগতভাবে সঠিক উপাদানগুলি ব্যবহার করাও গুরুত্বপূর্ণ, উদাহরণস্বরূপ, a এবং button উপাদানগুলি। এটি নিশ্চিত করে যে যখন আপনাকে আরও উন্নত বৈশিষ্ট্যগুলি তৈরি করতে হবে, অ্যাক্সেসযোগ্যতার প্রত্যাশা পূরণ করা হয় (যেমন কখন ট্যাব বনাম তীর ব্যবহার করতে হবে)। A11Y নিউট্রিশন কার্ডে কিছু সাধারণ উপাদানের জন্য এই বিষয়ে চমৎকার পরামর্শ রয়েছে।

অনুসন্ধানের মাধ্যমে আবিষ্কার করা যায়

আপনার PWA সহজেই অনুসন্ধানের মাধ্যমে আবিষ্কার করা যেতে পারে।

কেন

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

কিভাবে

প্রতিটি ইউআরএলে একটি অনন্য, বর্ণনামূলক শিরোনাম এবং মেটা বিবরণ রয়েছে তা নিশ্চিত করে শুরু করুন। তারপরে আপনি আপনার PWA এর সাথে ডিবাগ এবং আবিষ্কারযোগ্যতার সমস্যাগুলি সমাধান করতে বাতিঘরে Google অনুসন্ধান কনসোল এবং অনুসন্ধান ইঞ্জিন অপ্টিমাইজেশন অডিটগুলি ব্যবহার করতে পারেন৷ আপনি Bing 's বা Yandex- এর সাইটের মালিকের সরঞ্জামগুলিও ব্যবহার করতে পারেন এবং আপনার PWA-তে Schema.org থেকে স্কিম ব্যবহার করে কাঠামোগত ডেটা অন্তর্ভুক্ত করার কথা বিবেচনা করতে পারেন৷

যেকোনো ইনপুট টাইপের সাথে কাজ করে

আপনার PWA একটি মাউস, একটি কীবোর্ড, একটি স্টাইলাস বা স্পর্শের সাথে সমানভাবে ব্যবহারযোগ্য।

কেন

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

কিভাবে

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

অনুমতি অনুরোধের জন্য প্রসঙ্গ প্রদান করে

শক্তিশালী API ব্যবহার করার অনুমতি চাওয়ার সময়, প্রসঙ্গ প্রদান করুন এবং শুধুমাত্র যখন API প্রয়োজন হয় তখনই জিজ্ঞাসা করুন।

কেন

এপিআই যেগুলি একটি অনুমতি প্রম্পট ট্রিগার করে, যেমন বিজ্ঞপ্তি, ভূ-অবস্থান, এবং শংসাপত্রগুলি, ইচ্ছাকৃতভাবে ব্যবহারকারীর জন্য বিঘ্নিত করার জন্য ডিজাইন করা হয়েছে কারণ সেগুলি শক্তিশালী বৈশিষ্ট্যগুলির সাথে সম্পর্কিত যেগুলির জন্য অপ্ট-ইন প্রয়োজন৷ পৃষ্ঠা লোডের মতো অতিরিক্ত প্রসঙ্গ ছাড়াই এই প্রম্পটগুলিকে ট্রিগার করার ফলে ব্যবহারকারীদের সেই অনুমতিগুলি গ্রহণ করার সম্ভাবনা কম এবং ভবিষ্যতে তাদের অবিশ্বাস করার সম্ভাবনা বেশি। পরিবর্তে, কেন আপনার সেই অনুমতি প্রয়োজন তার জন্য ব্যবহারকারীকে একটি অন্তর্নিহিত যুক্তি প্রদান করার পরেই সেই প্রম্পটগুলিকে ট্রিগার করুন৷

কিভাবে

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

স্বাস্থ্যকর কোডের জন্য সর্বোত্তম অনুশীলন অনুসরণ করে

আপনার কোডবেসকে সুস্থ রাখা আপনার লক্ষ্যগুলি পূরণ করা এবং নতুন বৈশিষ্ট্যগুলি সরবরাহ করা সহজ করে তোলে।

কেন

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

কিভাবে

একটি স্বাস্থ্যকর কোডবেস নিশ্চিত করার জন্য বেশ কয়েকটি উচ্চ-অগ্রাধিকার চেক রয়েছে:

  • পরিচিত দুর্বলতা সহ লাইব্রেরি ব্যবহার করা এড়িয়ে চলুন।
  • নিশ্চিত করুন যে আপনি অপ্রচলিত API ব্যবহার করছেন না।
  • আপনার কোডবেস থেকে অনিরাপদ কোডিং অনুশীলনগুলি সরান (যেমন document.write() ব্যবহার করা বা নন-প্যাসিভ স্ক্রোল ইভেন্ট লিসেনার থাকা),
  • বিশ্লেষণ বা অন্যান্য তৃতীয় পক্ষের লাইব্রেরি লোড করতে ব্যর্থ হলে আপনার PWA ভেঙে না যায় তা নিশ্চিত করতে আপনি এমনকি আত্মরক্ষামূলকভাবে কোড করতে পারেন।
  • স্ট্যাটিক কোড বিশ্লেষণের প্রয়োজন বিবেচনা করুন, যেমন লিন্টিং, সেইসাথে একাধিক ব্রাউজার এবং রিলিজ চ্যানেলে স্বয়ংক্রিয় পরীক্ষা। এই কৌশলগুলি এটি উত্পাদন করার আগে ত্রুটিগুলি ধরতে সহায়তা করতে পারে।