روال‌های مطلوب برای برنامه‌های وب

توسعه صفحات وب و برنامه‌ها برای دستگاه‌های همراه در مقایسه با توسعه صفحه وب برای مرورگرهای وب رایانه چالش‌های متفاوتی دارد. روش‌های زیر می‌تواند به شما کمک کند تا مؤثرترین برنامه وب را برای 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 دو نسخه از هر نماد وب‌سایت بارگیری‌شده را نگه می‌دارد (یکی در Java و دیگری در حافظه بومی)، بنابراین غیرفعال کردن بارگیری نماد وب‌سایت باعث صرفه‌جویی در حافظه (تقریباً ۸ کیلوبایت برای هر نمونه 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);
}
  8. مدیریت کردن وضعیت ذخیره‌شده و اجتناب از محدودیت‌های تراکنش. اگر وضعیت WebView را درطول رویدادهای چرخه حیات بااستفاده از saveState(Bundle) ذخیره می‌کنید، بااستفاده از WebViewCompat.saveState() محدودیت‌های اندازه بار داده را اعمال کنید تا از حد مجاز ۱ مگابایتی savedInstanceState Android فراتر نروید. برای اطلاعات بیشتر، به مدیریت کارآمد وضعیت WebView مراجعه کنید.
  9. اتصال‌های شبکه و بار کردن صفحه را با میاناهای برنامه‌سازی کاربردی بار کردن حدسی بهینه‌سازی کنید. برای کاهش تأخیر پیمایش، از Jetpack Webkit API برای آماده‌سازی اتصالات شبکه و محتوا ازقبل استفاده کنید. ‫Profile.addQuicHints را فراخوانی کنید تا پشتیبانی HTTP/3 ازطریق QUIC ازپیش تکمیل شود تا «وب‌نما» بتواند بلافاصله در اولین اتصال از QUIC استفاده کند، و از Profile.preconnect برای پیش‌گرم کردن سوکت‌های شبکه استفاده کنید. وقتی نشانی‌های وب مقصد مشخص یا محتمل هستند، از Profile.prefetchUrlAsync یا WebViewCompat.prerenderUrlAsync برای واکشی یا پردازاندن صفحه‌ها در پس‌زمینه استفاده کنید. برای اطلاعات بیشتر، بار کردن حدسی در WebView را بخوانید.
  10. اگر به بارگیری خودکار نماد وب‌سایت نیاز ندارید، آن را غیرفعال کنید. به‌طور پیش‌فرض، WebView هروقت سایتی درطول پیمایش بازدید شود، نماد وب‌سایت را به‌طور خودکار بارگیری می‌کند. WebView دو نسخه از هر نماد وب‌سایت بارگیری‌شده را نگه می‌دارد (یکی در Java و دیگری در حافظه بومی)، بنابراین غیرفعال کردن بارگیری نماد وب‌سایت باعث صرفه‌جویی در حافظه (تقریباً ۸ کیلوبایت برای هر نمونه 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);
}
  11. مدیریت کردن وضعیت ذخیره‌شده و اجتناب از محدودیت‌های تراکنش. اگر وضعیت WebView را درطول رویدادهای چرخه حیات بااستفاده از saveState(Bundle) ذخیره می‌کنید، بااستفاده از WebViewCompat.saveState() محدودیت‌های اندازه بار داده را اعمال کنید تا از حد مجاز ۱ مگابایتی savedInstanceState Android فراتر نروید. برای اطلاعات بیشتر، به مدیریت کارآمد وضعیت WebView مراجعه کنید.

منابع بیشتر