ওয়েব অ্যাপের জন্য সেরা অনুশীলন

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

  1. মোবাইল ডিভাইসগুলোকে আপনার ওয়েবসাইটের একটি নির্দিষ্ট মোবাইল সংস্করণে পুনঃনির্দেশিত করুন। সার্ভার-সাইড রিডাইরেক্ট ব্যবহার করে এটি করার বেশ কয়েকটি উপায় রয়েছে। একটি প্রচলিত পদ্ধতি হলো ওয়েব ব্রাউজার দ্বারা প্রদত্ত ইউজার এজেন্ট স্ট্রিংটি "স্নিফ" করা। আপনার সাইটের একটি মোবাইল সংস্করণ পরিবেশন করা হবে কিনা তা নির্ধারণ করতে, ইউজার এজেন্টে "mobile" স্ট্রিংটি খুঁজুন।
  2. মোবাইল ডিভাইসের জন্য HTML5 ব্যবহার করুন। HTML5 হলো মোবাইল ওয়েবসাইটের জন্য ব্যবহৃত সবচেয়ে প্রচলিত মার্কআপ ল্যাঙ্গুয়েজ। এই স্ট্যান্ডার্ডটি মোবাইল-ফার্স্ট ডেভেলপমেন্টকে উৎসাহিত করে, যা ওয়েবসাইটগুলোকে বিভিন্ন ডিভাইসে কাজ করতে সাহায্য করে। পূর্ববর্তী ওয়েব ল্যাঙ্গুয়েজগুলোর থেকে ভিন্ন, HTML5-এ সহজতর <DOCTYPE> এবং charset ডিক্লারেশন ব্যবহার করা হয়। 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. আপনার ওয়েব পেজের আকার সঠিকভাবে পরিবর্তন করতে ভিউপোর্ট মেটাডেটা ব্যবহার করুন। আপনার ডকুমেন্টের <head> অংশে মেটাডেটা প্রদান করুন, যা নির্দিষ্ট করে দেবে আপনি ব্রাউজারের ভিউপোর্টে আপনার ওয়েব পেজটি কীভাবে রেন্ডার করতে চান। উদাহরণস্বরূপ, আপনার ভিউপোর্ট মেটাডেটা ব্রাউজারের ভিউপোর্টের উচ্চতা ও প্রস্থ, পেজের প্রাথমিক স্কেল এবং টার্গেট স্ক্রিন ডেনসিটি নির্দিষ্ট করতে পারে।

    নিম্নলিখিত উদাহরণটি দেখায় কিভাবে ভিউপোর্ট মেটাডেটা সেট করতে হয়:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    অ্যান্ড্রয়েড-চালিত ডিভাইসগুলিতে ভিউপোর্ট মেটাডেটা কীভাবে ব্যবহার করতে হয় সে সম্পর্কে আরও তথ্যের জন্য, "ওয়েব অ্যাপে বিভিন্ন স্ক্রিন সমর্থন করুন" পড়ুন।

  4. একটি উল্লম্ব রৈখিক বিন্যাস ব্যবহার করুন। আপনার পৃষ্ঠাটি নেভিগেট করার সময় ব্যবহারকারীকে ডানে-বামে স্ক্রল করার প্রয়োজন থেকে বিরত থাকুন। ব্যবহারকারীর জন্য উপরে-নিচে স্ক্রল করা সহজ এবং এটি আপনার পৃষ্ঠাটিকে আরও সরল করে তোলে।
  5. লেআউটের উচ্চতা এবং প্রস্থ match_parent এ সেট করুন। আপনার WebView অবজেক্টের উচ্চতা এবং প্রস্থ match_parent এ সেট করলে আপনার অ্যাপের ভিউগুলো সঠিকভাবে সাইজ করা নিশ্চিত হয়। আমরা উচ্চতা wrap_content এ সেট করতে নিরুৎসাহিত করি, কারণ এর ফলে ভুল সাইজিং হয়। একইভাবে, লেআউটের প্রস্থ wrap_content এ সেট করা সমর্থিত নয় এবং এর ফলে আপনার WebView তার প্যারেন্টের প্রস্থ ব্যবহার করে। এই আচরণের কারণে, এটাও নিশ্চিত করা গুরুত্বপূর্ণ যে আপনার WebView অবজেক্টের কোনো প্যারেন্ট লেআউট অবজেক্টের উচ্চতা এবং প্রস্থ যেন wrap_content এ সেট করা না থাকে।
  6. একাধিক ফাইল রিকোয়েস্ট করা থেকে বিরত থাকুন। যেহেতু মোবাইল ডিভাইসের ইন্টারনেট সংযোগের গতি সাধারণত ডেস্কটপ কম্পিউটারের চেয়ে কম থাকে, তাই আপনার পেজটি যত দ্রুত সম্ভব লোড হওয়ার ব্যবস্থা করুন। এর গতি বাড়ানোর একটি উপায় হলো <head> ট্যাগে স্টাইলশিট এবং স্ক্রিপ্ট ফাইলের মতো অতিরিক্ত ফাইল লোড করা এড়িয়ে চলা। এছাড়াও, আপনার অ্যাপের জন্য নির্দিষ্ট ও বিস্তারিত অপটিমাইজেশন পরামর্শের জন্য গুগলের পেজস্পিড ইনসাইটস (PageSpeed ​​Insights) ব্যবহার করে মোবাইল অ্যানালাইসিস করার কথা বিবেচনা করতে পারেন।
  7. আপনার প্রয়োজন না হলে স্বয়ংক্রিয় ফেভিকন ডাউনলোড বন্ধ করুন। ডিফল্টরূপে, নেভিগেশনের সময় কোনো সাইট ভিজিট করা হলে WebView স্বয়ংক্রিয়ভাবে একটি ফেভিকন ডাউনলোড করে। WebView প্রতিটি ডাউনলোড করা ফেভিকনের দুটি কপি রাখে (একটি জাভাতে এবং একটি নেটিভ মেমরিতে), তাই ফেভিকন ডাউনলোড বন্ধ করলে মেমরি সাশ্রয় হয় (প্রতিটি WebView ইনস্ট্যান্সের জন্য প্রায় ৮ কিলোবাইট) এবং ব্যান্ডউইথ খরচ কমে। যদি আপনার অ্যাপ ফেভিকন ব্যবহার বা প্রদর্শন না করে, তাহলে স্বয়ংক্রিয় ডাউনলোড বন্ধ করতে Jetpack Webkit লাইব্রেরি থেকে WebSettingsCompat.setDownloadFaviconsEnabled() ব্যবহার করুন।

    কোটলিন 

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
}

    জাভা 

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
}

অতিরিক্ত সম্পদ

,

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

  1. মোবাইল ডিভাইসগুলোকে আপনার ওয়েবসাইটের একটি নির্দিষ্ট মোবাইল সংস্করণে পুনঃনির্দেশিত করুন। সার্ভার-সাইড রিডাইরেক্ট ব্যবহার করে এটি করার বেশ কয়েকটি উপায় রয়েছে। একটি প্রচলিত পদ্ধতি হলো ওয়েব ব্রাউজার দ্বারা প্রদত্ত ইউজার এজেন্ট স্ট্রিংটি "স্নিফ" করা। আপনার সাইটের একটি মোবাইল সংস্করণ পরিবেশন করা হবে কিনা তা নির্ধারণ করতে, ইউজার এজেন্টে "mobile" স্ট্রিংটি খুঁজুন।
  2. মোবাইল ডিভাইসের জন্য HTML5 ব্যবহার করুন। HTML5 হলো মোবাইল ওয়েবসাইটের জন্য ব্যবহৃত সবচেয়ে প্রচলিত মার্কআপ ল্যাঙ্গুয়েজ। এই স্ট্যান্ডার্ডটি মোবাইল-ফার্স্ট ডেভেলপমেন্টকে উৎসাহিত করে, যা ওয়েবসাইটগুলোকে বিভিন্ন ডিভাইসে কাজ করতে সাহায্য করে। পূর্ববর্তী ওয়েব ল্যাঙ্গুয়েজগুলোর থেকে ভিন্ন, HTML5-এ সহজতর <DOCTYPE> এবং charset ডিক্লারেশন ব্যবহার করা হয়। 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. আপনার ওয়েব পেজের আকার সঠিকভাবে পরিবর্তন করতে ভিউপোর্ট মেটাডেটা ব্যবহার করুন। আপনার ডকুমেন্টের <head> অংশে মেটাডেটা প্রদান করুন, যা নির্দিষ্ট করে দেবে আপনি ব্রাউজারের ভিউপোর্টে আপনার ওয়েব পেজটি কীভাবে রেন্ডার করতে চান। উদাহরণস্বরূপ, আপনার ভিউপোর্ট মেটাডেটা ব্রাউজারের ভিউপোর্টের উচ্চতা ও প্রস্থ, পেজের প্রাথমিক স্কেল এবং টার্গেট স্ক্রিন ডেনসিটি নির্দিষ্ট করতে পারে।

    নিম্নলিখিত উদাহরণটি দেখায় কিভাবে ভিউপোর্ট মেটাডেটা সেট করতে হয়:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    অ্যান্ড্রয়েড-চালিত ডিভাইসগুলিতে ভিউপোর্ট মেটাডেটা কীভাবে ব্যবহার করতে হয় সে সম্পর্কে আরও তথ্যের জন্য, "ওয়েব অ্যাপে বিভিন্ন স্ক্রিন সমর্থন করুন" পড়ুন।

  4. একটি উল্লম্ব রৈখিক বিন্যাস ব্যবহার করুন। আপনার পৃষ্ঠাটি নেভিগেট করার সময় ব্যবহারকারীকে ডানে-বামে স্ক্রল করার প্রয়োজন থেকে বিরত থাকুন। ব্যবহারকারীর জন্য উপরে-নিচে স্ক্রল করা সহজ এবং এটি আপনার পৃষ্ঠাটিকে আরও সরল করে তোলে।
  5. লেআউটের উচ্চতা এবং প্রস্থ match_parent এ সেট করুন। আপনার WebView অবজেক্টের উচ্চতা এবং প্রস্থ match_parent এ সেট করলে আপনার অ্যাপের ভিউগুলো সঠিকভাবে সাইজ করা নিশ্চিত হয়। আমরা উচ্চতা wrap_content এ সেট করতে নিরুৎসাহিত করি, কারণ এর ফলে ভুল সাইজিং হয়। একইভাবে, লেআউটের প্রস্থ wrap_content এ সেট করা সমর্থিত নয় এবং এর ফলে আপনার WebView তার প্যারেন্টের প্রস্থ ব্যবহার করে। এই আচরণের কারণে, এটাও নিশ্চিত করা গুরুত্বপূর্ণ যে আপনার WebView অবজেক্টের কোনো প্যারেন্ট লেআউট অবজেক্টের উচ্চতা এবং প্রস্থ যেন wrap_content এ সেট করা না থাকে।
  6. একাধিক ফাইল রিকোয়েস্ট করা থেকে বিরত থাকুন। যেহেতু মোবাইল ডিভাইসের ইন্টারনেট সংযোগের গতি সাধারণত ডেস্কটপ কম্পিউটারের চেয়ে কম থাকে, তাই আপনার পেজটি যত দ্রুত সম্ভব লোড হওয়ার ব্যবস্থা করুন। এর গতি বাড়ানোর একটি উপায় হলো <head> ট্যাগে স্টাইলশিট এবং স্ক্রিপ্ট ফাইলের মতো অতিরিক্ত ফাইল লোড করা এড়িয়ে চলা। এছাড়াও, আপনার অ্যাপের জন্য নির্দিষ্ট ও বিস্তারিত অপটিমাইজেশন পরামর্শের জন্য গুগলের পেজস্পিড ইনসাইটস (PageSpeed ​​Insights) ব্যবহার করে মোবাইল অ্যানালাইসিস করার কথা বিবেচনা করতে পারেন।
  7. আপনার প্রয়োজন না হলে স্বয়ংক্রিয় ফেভিকন ডাউনলোড বন্ধ করুন। ডিফল্টরূপে, নেভিগেশনের সময় কোনো সাইট ভিজিট করা হলে WebView স্বয়ংক্রিয়ভাবে একটি ফেভিকন ডাউনলোড করে। WebView প্রতিটি ডাউনলোড করা ফেভিকনের দুটি কপি রাখে (একটি জাভাতে এবং একটি নেটিভ মেমরিতে), তাই ফেভিকন ডাউনলোড বন্ধ করলে মেমরি সাশ্রয় হয় (প্রতিটি WebView ইনস্ট্যান্সের জন্য প্রায় ৮ কিলোবাইট) এবং ব্যান্ডউইথ খরচ কমে। যদি আপনার অ্যাপ ফেভিকন ব্যবহার বা প্রদর্শন না করে, তাহলে স্বয়ংক্রিয় ডাউনলোড বন্ধ করতে Jetpack Webkit লাইব্রেরি থেকে WebSettingsCompat.setDownloadFaviconsEnabled() ব্যবহার করুন।

    কোটলিন 

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.settings, false)
}

    জাভা 

    // In this example, "myWebView" is an instance of WebView.
if (WebViewFeature.isFeatureSupported(WebViewFeature.DOWNLOAD_FAVICONS_ENABLED)) {
    WebSettingsCompat.setDownloadFaviconsEnabled(myWebView.getSettings(), false);
}

অতিরিক্ত সম্পদ