أفضل الممارسات لتطبيقات الويب

تتضمّن عملية تطوير صفحات ويب وتطبيقات للأجهزة الجوّالة تحديات مختلفة مقارنةً بعملية تطوير صفحة ويب لمتصفحات الويب على أجهزة الكمبيوتر. يمكن أن تساعدك الممارسات التالية في توفير تطبيق الويب الأكثر فعالية على Android والأجهزة الجوّالة الأخرى.

  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">

    لمزيد من المعلومات حول كيفية استخدام البيانات الوصفية لإطار العرض على الأجهزة التي تعمل بنظام التشغيل Android، يُرجى قراءة مقالة إتاحة تطبيقات الويب على شاشات مختلفة.

  4. استخدِم تخطيطًا خطيًا عموديًا. تجنَّب الحاجة إلى أن ينتقل المستخدم إلى اليمين واليسار أثناء تصفّح صفحتك. يسهّل التنقّل للأعلى والأسفل على المستخدم ويجعل صفحتك أبسط.
  5. اضبط ارتفاع التنسيق وعرضه على match_parent. يضمن ضبط ارتفاع وعرض عنصر WebView على match_parent أن يتم تحديد حجم طرق العرض في تطبيقك بشكل صحيح. ننصح بعدم ضبط الارتفاع على wrap_content لأنّ ذلك يؤدي إلى تحديد حجم غير صحيح. وبالمثل، لا يمكن ضبط عرض التنسيق على wrap_content، وسيؤدي ذلك إلى استخدام WebView لعرض العنصر الرئيسي بدلاً من ذلك. وبسبب هذا السلوك، من المهم أيضًا التأكّد من أنّ ارتفاع وعرض أي من عناصر تصميم العنصر الرئيسي الخاصة بعنصر WebView لم يتم ضبطهما على wrap_content.
  6. تجنُّب طلبات ملفات متعددة: بما أنّ سرعة الاتصال على الأجهزة الجوّالة تكون عادةً أبطأ من سرعة الاتصال على أجهزة الكمبيوتر المكتبي، احرص على تحميل صفحتك بأسرع ما يمكن. إحدى طرق تسريع ذلك هي تجنُّب تحميل ملفات إضافية، مثل ملفات أوراق الأنماط وملفات النصوص البرمجية، في <head>. ننصحك أيضًا بإجراء تحليل للأجهزة الجوّالة باستخدام أداة &quot;إحصاءات PageSpeed&quot; من Google للحصول على اقتراحات تفصيلية بشأن التحسين خاصة بتطبيقك.
  7. إيقاف عمليات التنزيل التلقائي لرموز المواقع المفضّلة إذا لم تكن بحاجة إليها تنزّل WebView تلقائيًا رمز الموقع المفضّل عند الانتقال إلى أي موقع إلكتروني. تحتفظ WebView بنسختَين من كل رمز مفضّل تم تنزيله (إحداهما في Java والأخرى في الذاكرة الأصلية)، لذا يؤدي إيقاف عمليات تنزيل الرموز المفضّلة إلى توفير مساحة الذاكرة (حوالي 8 كيلوبايت لكل مثيل من WebView) وتقليل استهلاك النطاق الترددي. إذا كان تطبيقك لا يستخدم رموز المواقع المفضّلة أو يعرضها، استخدِم WebSettingsCompat.setDownloadFaviconsEnabled() من مكتبة Jetpack Webkit لإيقاف عمليات التنزيل التلقائي:

    Kotlin

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

    Java

    // 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() لتجنُّب تجاوز الحد الأقصى المسموح به في Android وهو savedInstanceState ميغابايت. لمزيد من المعلومات، يُرجى الاطّلاع على إدارة حالة WebView بكفاءة.
  9. تحسين اتصالات الشبكة وتحميل الصفحات باستخدام واجهات برمجة التطبيقات الخاصة بالتحميل المبني على توقّع. لتقليل وقت استجابة التنقّل، استخدِم واجهات برمجة تطبيقات Jetpack Webkit لإعداد اتصالات الشبكة والمحتوى مسبقًا. استخدِم Profile.addQuicHints لإعداد بروتوكول HTTP/3 مسبقًا عبر QUIC كي يتمكّن WebView من استخدام QUIC على الفور عند إجراء الاتصال الأول، واستخدِم Profile.preconnect لإعداد مآخذ توصيل الشبكة مسبقًا. عندما تكون عناوين URL للوجهة معروفة أو محتملة، استخدِم Profile.prefetchUrlAsync أو WebViewCompat.prerenderUrlAsync لجلب الصفحات أو عرضها في الخلفية. لمزيد من المعلومات، يُرجى قراءة المقالة التحميل المبني على توقُّع في WebView.
  10. إيقاف عمليات التنزيل التلقائي لرموز المواقع المفضّلة إذا لم تكن بحاجة إليها تنزّل WebView تلقائيًا رمز الموقع المفضّل عند الانتقال إلى أي موقع إلكتروني. تحتفظ WebView بنسختَين من كل رمز مفضّل تم تنزيله (إحداهما في Java والأخرى في الذاكرة الأصلية)، لذا يؤدي إيقاف عمليات تنزيل الرموز المفضّلة إلى توفير مساحة الذاكرة (حوالي 8 كيلوبايت لكل مثيل من WebView) وتقليل استهلاك النطاق الترددي. إذا كان تطبيقك لا يستخدم رموز المواقع المفضّلة أو يعرضها، استخدِم WebSettingsCompat.setDownloadFaviconsEnabled() من مكتبة Jetpack Webkit لإيقاف عمليات التنزيل التلقائي:

    Kotlin

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

    Java

    // 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() لتجنُّب تجاوز الحد الأقصى المسموح به في Android وهو savedInstanceState ميغابايت. لمزيد من المعلومات، يُرجى الاطّلاع على إدارة حالة WebView بكفاءة.

مراجع إضافية