بهترین روش ها برای برنامه های وب

توسعه صفحات وب و برنامه‌های کاربردی برای دستگاه‌های تلفن همراه، چالش‌های متفاوتی را در مقایسه با توسعه یک صفحه وب برای مرورگرهای وب دسکتاپ ارائه می‌دهد. شیوه‌های زیر می‌تواند به شما در ارائه مؤثرترین برنامه وب برای اندروید و سایر دستگاه‌های تلفن همراه کمک کند.

  1. دستگاه‌های تلفن همراه را به یک نسخه اختصاصی موبایل از وب‌سایت خود هدایت کنید. روش‌های مختلفی برای انجام این کار با استفاده از هدایت‌های سمت سرور وجود دارد. یکی از روش‌های رایج، «استخراج» رشته عامل کاربر ارائه شده توسط مرورگر وب است. برای تعیین اینکه آیا باید نسخه موبایل سایت خود را ارائه دهید یا خیر، رشته «موبایل» را در عامل کاربر جستجو کنید.
  2. از HTML5 برای دستگاه‌های تلفن همراه استفاده کنید. HTML5 رایج‌ترین زبان نشانه‌گذاری مورد استفاده برای وب‌سایت‌های تلفن همراه است. این استاندارد، توسعه مبتنی بر موبایل را تشویق می‌کند تا اطمینان حاصل شود که وب‌سایت‌ها روی دستگاه‌های مختلف کار می‌کنند. برخلاف زبان‌های وب قبلی، HTML5 از اعلان‌های ساده‌تر <DOCTYPE> و charset استفاده می‌کند: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. از متادیتای viewport برای تغییر اندازه صحیح صفحه وب خود استفاده کنید. در سند <head> خود، متادیتایی را ارائه دهید که مشخص می‌کند می‌خواهید viewport مرورگر چگونه صفحه وب شما را رندر کند. به عنوان مثال، متادیتای viewport شما می‌تواند ارتفاع و عرض viewport مرورگر، مقیاس اولیه صفحه و تراکم صفحه هدف را مشخص کند.

    مثال زیر نحوه تنظیم متادیتای viewport را نشان می‌دهد:

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

    برای اطلاعات بیشتر در مورد نحوه استفاده از ابرداده‌های viewport برای دستگاه‌های دارای سیستم عامل اندروید، بخش «پشتیبانی از صفحات نمایش مختلف در برنامه‌های وب» را مطالعه کنید.

  4. از یک طرح‌بندی خطی عمودی استفاده کنید. از نیاز کاربر به اسکرول کردن به چپ و راست هنگام پیمایش صفحه جلوگیری کنید. اسکرول کردن به بالا و پایین برای کاربر آسان‌تر است و صفحه شما را ساده‌تر می‌کند.
  5. ارتفاع و عرض طرح‌بندی را روی match_parent تنظیم کنید. تنظیم ارتفاع و عرض شیء WebView روی match_parent تضمین می‌کند که اندازه نماهای برنامه شما به درستی تنظیم شده است. ما تنظیم ارتفاع روی wrap_content را توصیه نمی‌کنیم زیرا منجر به اندازه نادرست می‌شود. به طور مشابه، تنظیم عرض طرح‌بندی روی wrap_content پشتیبانی نمی‌شود و باعث می‌شود WebView شما به جای آن از عرض والد خود استفاده کند. به دلیل این رفتار، همچنین مهم است که مطمئن شوید هیچ یک از اشیاء طرح‌بندی والد شیء WebView شما ارتفاع و عرض خود را روی wrap_content تنظیم نکرده باشند.
  6. از درخواست‌های چندگانه فایل خودداری کنید. از آنجا که دستگاه‌های تلفن همراه معمولاً سرعت اتصال کمتری نسبت به رایانه‌های رومیزی دارند، صفحه خود را تا حد امکان سریع بارگذاری کنید. یکی از راه‌های افزایش سرعت آن، جلوگیری از بارگذاری فایل‌های اضافی مانند فایل‌های استایل‌شیت و اسکریپت در <head> است. همچنین، برای دریافت پیشنهادات بهینه‌سازی دقیق مخصوص برنامه خود ، تجزیه و تحلیل موبایل را با Google's PageSpeed ​​Insights در نظر بگیرید.
  7. اگر به دانلود خودکار فاویکون‌ها نیازی ندارید، آن‌ها را غیرفعال کنید. به‌طور پیش‌فرض، WebView هر زمان که سایتی در هنگام پیمایش بازدید می‌شود، به‌طور خودکار یک فاویکون دانلود می‌کند. WebView دو نسخه از هر فاویکون دانلود شده را نگه می‌دارد (یکی در جاوا و دیگری در حافظه اصلی)، بنابراین غیرفعال کردن دانلود فاویکون باعث صرفه‌جویی در حافظه (تقریباً ۸ کیلوبایت برای هر نمونه WebView ) و کاهش مصرف پهنای باند می‌شود. اگر برنامه شما از فاویکون‌ها استفاده نمی‌کند یا آن‌ها را نمایش نمی‌دهد، از WebSettingsCompat.setDownloadFaviconsEnabled() از کتابخانه Jetpack Webkit برای غیرفعال کردن دانلودهای خودکار استفاده کنید:

    کاتلین 

    // 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. دستگاه‌های تلفن همراه را به یک نسخه اختصاصی موبایل از وب‌سایت خود هدایت کنید. روش‌های مختلفی برای انجام این کار با استفاده از هدایت‌های سمت سرور وجود دارد. یکی از روش‌های رایج، «استخراج» رشته عامل کاربر ارائه شده توسط مرورگر وب است. برای تعیین اینکه آیا باید نسخه موبایل سایت خود را ارائه دهید یا خیر، رشته «موبایل» را در عامل کاربر جستجو کنید.
  2. از HTML5 برای دستگاه‌های تلفن همراه استفاده کنید. HTML5 رایج‌ترین زبان نشانه‌گذاری مورد استفاده برای وب‌سایت‌های تلفن همراه است. این استاندارد، توسعه مبتنی بر موبایل را تشویق می‌کند تا اطمینان حاصل شود که وب‌سایت‌ها روی دستگاه‌های مختلف کار می‌کنند. برخلاف زبان‌های وب قبلی، HTML5 از اعلان‌های ساده‌تر <DOCTYPE> و charset استفاده می‌کند: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. از متادیتای viewport برای تغییر اندازه صحیح صفحه وب خود استفاده کنید. در سند <head> خود، متادیتایی را ارائه دهید که مشخص می‌کند می‌خواهید viewport مرورگر چگونه صفحه وب شما را رندر کند. به عنوان مثال، متادیتای viewport شما می‌تواند ارتفاع و عرض viewport مرورگر، مقیاس اولیه صفحه و تراکم صفحه هدف را مشخص کند.

    مثال زیر نحوه تنظیم متادیتای viewport را نشان می‌دهد:

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

    برای اطلاعات بیشتر در مورد نحوه استفاده از ابرداده‌های viewport برای دستگاه‌های دارای سیستم عامل اندروید، بخش «پشتیبانی از صفحات نمایش مختلف در برنامه‌های وب» را مطالعه کنید.

  4. از یک طرح‌بندی خطی عمودی استفاده کنید. از نیاز کاربر به اسکرول کردن به چپ و راست هنگام پیمایش صفحه جلوگیری کنید. اسکرول کردن به بالا و پایین برای کاربر آسان‌تر است و صفحه شما را ساده‌تر می‌کند.
  5. ارتفاع و عرض طرح‌بندی را روی match_parent تنظیم کنید. تنظیم ارتفاع و عرض شیء WebView روی match_parent تضمین می‌کند که اندازه نماهای برنامه شما به درستی تنظیم شده است. ما تنظیم ارتفاع روی wrap_content را توصیه نمی‌کنیم زیرا منجر به اندازه نادرست می‌شود. به طور مشابه، تنظیم عرض طرح‌بندی روی wrap_content پشتیبانی نمی‌شود و باعث می‌شود WebView شما به جای آن از عرض والد خود استفاده کند. به دلیل این رفتار، همچنین مهم است که مطمئن شوید هیچ یک از اشیاء طرح‌بندی والد شیء WebView شما ارتفاع و عرض خود را روی wrap_content تنظیم نکرده باشند.
  6. از درخواست‌های چندگانه فایل خودداری کنید. از آنجا که دستگاه‌های تلفن همراه معمولاً سرعت اتصال کمتری نسبت به رایانه‌های رومیزی دارند، صفحه خود را تا حد امکان سریع بارگذاری کنید. یکی از راه‌های افزایش سرعت آن، جلوگیری از بارگذاری فایل‌های اضافی مانند فایل‌های استایل‌شیت و اسکریپت در <head> است. همچنین، برای دریافت پیشنهادات بهینه‌سازی دقیق مخصوص برنامه خود ، تجزیه و تحلیل موبایل را با Google's PageSpeed ​​Insights در نظر بگیرید.
  7. اگر به دانلود خودکار فاویکون‌ها نیازی ندارید، آن‌ها را غیرفعال کنید. به‌طور پیش‌فرض، WebView هر زمان که سایتی در هنگام پیمایش بازدید می‌شود، به‌طور خودکار یک فاویکون دانلود می‌کند. WebView دو نسخه از هر فاویکون دانلود شده را نگه می‌دارد (یکی در جاوا و دیگری در حافظه اصلی)، بنابراین غیرفعال کردن دانلود فاویکون باعث صرفه‌جویی در حافظه (تقریباً ۸ کیلوبایت برای هر نمونه WebView ) و کاهش مصرف پهنای باند می‌شود. اگر برنامه شما از فاویکون‌ها استفاده نمی‌کند یا آن‌ها را نمایش نمی‌دهد، از WebSettingsCompat.setDownloadFaviconsEnabled() از کتابخانه Jetpack Webkit برای غیرفعال کردن دانلودهای خودکار استفاده کنید:

    کاتلین 

    // 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);
}

منابع اضافی