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

পিট লেপেজ
পিট লেপেজ
স্যাম রিচার্ড
স্যাম রিচার্ড

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

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

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

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

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

কেন

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

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

কিভাবে

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

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

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

কেন

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

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

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

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

কিভাবে

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

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

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

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

কেন

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

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

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

কিভাবে

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

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

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

কেন

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

কিভাবে

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

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

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

কেন

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

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

কিভাবে

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

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

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

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

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

কেন

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

কিভাবে

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

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

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

কেন

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

কিভাবে

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

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

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

কেন

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

কিভাবে

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

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

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

কেন

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

কিভাবে

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

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

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

কেন

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

কিভাবে

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

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

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

কেন

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

কিভাবে

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