ওয়েব অ্যাপের জন্য পেশাদার পদ্ধতি

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

  1. মোবাইল ডিভাইসকে আপনার ওয়েবসাইটের নির্দিষ্ট মোবাইল ভার্সনে রিডাইরেক্ট করুন। সার্ভার-সাইড রিডাইরেক্ট ব্যবহার করে এটি করার বিভিন্ন উপায় আছে। একটি সাধারণ পদ্ধতি হল ওয়েব ব্রাউজারের মাধ্যমে প্রদান করা ইউজার এজেন্ট স্ট্রিং "স্নিফ" করা। আপনার সাইটের মোবাইল ভার্সন দেখানো হবে কিনা তা নির্ধারণ করতে, ইউজার এজেন্টে "মোবাইল" স্ট্রিং খুঁজুন।
  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">

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

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

    Kotlin

    // 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);
}
  8. সেভ করা স্ট্যাটাস ম্যানেজ করুন এবং ট্রানজ্যাকশনের সীমা এড়িয়ে চলুন। আপনি যদি লাইফসাইকেল ইভেন্ট চলাকালীন saveState(Bundle) ব্যবহার করে WebView স্টেট সেভ করেন, তাহলে Android-এর ১ এমবি savedInstanceState সীমা যাতে পেরিয়ে না যায়, তার জন্য WebViewCompat.saveState() ব্যবহার করে পেলোড সাইজের সীমা এনফোর্স করুন। আরও তথ্যের জন্য, WebView-এর স্ট্যাটাস দক্ষতার সাথে ম্যানেজ করুন দেখুন।
  9. স্পেকুলেটিভ লোডিং API-এর মাধ্যমে নেটওয়ার্ক কানেকশন ও পৃষ্ঠা লোডিং অপ্টিমাইজ করুন। নেভিগেশন লেটেন্সি কমাতে, আগে থেকে নেটওয়ার্ক কানেকশন ও কন্টেন্ট প্রস্তুত করতে Jetpack Webkit API ব্যবহার করুন। QUIC-এর মাধ্যমে HTTP/3 সাপোর্ট অটো-ফিল করতে Profile.addQuicHints কল করুন যাতে WebView প্রথম কানেকশনেই অবিলম্বে QUIC ব্যবহার করতে পারে এবং নেটওয়ার্ক সকেট প্রি-ওয়ার্ম করতে Profile.preconnect ব্যবহার করুন। গন্তব্য URL জানা থাকলে বা সম্ভাব্য হলে, ব্যাকগ্রাউন্ডে পৃষ্ঠা ফেচ বা রেন্ডার করতে Profile.prefetchUrlAsync বা WebViewCompat.prerenderUrlAsync ব্যবহার করুন। আরও তথ্যের জন্য, WebView-এ স্পেকুলেটিভ লোডিং সম্পর্কে পড়ুন।
  10. আপনার প্রয়োজন না হলে অটোমেটিক ফেভিকন ডাউনলোড করার সুবিধা বন্ধ করুন। ডিফল্ট হিসেবে, নেভিগেশনের সময় কোনও সাইট ভিজিট করা হলে, WebView অটোমেটিক ফেভিকন ডাউনলোড করে। WebView প্রতিটি ডাউনলোড করা ফেভিকনের দুটি কপি রাখে (একটি জাভাতে এবং একটি নেটিভ মেমরিতে), তাই ফেভিকন ডাউনলোড বন্ধ করলে মেমরি সাশ্রয় হয় (প্রতি WebView ইনস্ট্যান্সে প্রায় ৮ কেবি) এবং ব্যান্ডউইথ খরচ কমে। আপনার অ্যাপ ফেভিকন ব্যবহার বা ডিসপ্লে না করলে, অটোমেটিক ডাউনলোড বন্ধ করতে Jetpack Webkit লাইব্রেরি থেকে WebSettingsCompat.setDownloadFaviconsEnabled() ব্যবহার করুন:

    Kotlin

    // 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);
}
  11. সেভ করা স্ট্যাটাস ম্যানেজ করুন এবং ট্রানজ্যাকশনের সীমা এড়িয়ে চলুন। আপনি যদি লাইফসাইকেল ইভেন্ট চলাকালীন saveState(Bundle) ব্যবহার করে WebView স্টেট সেভ করেন, তাহলে Android-এর ১ এমবি savedInstanceState সীমা যাতে পেরিয়ে না যায়, তার জন্য WebViewCompat.saveState() ব্যবহার করে পে-লোড সাইজের সীমা এনফোর্স করুন। আরও তথ্যের জন্য, WebView-এর স্ট্যাটাস দক্ষতার সাথে ম্যানেজ করুন দেখুন।

অতিরিক্ত রিসোর্স