שיטות מומלצות לאפליקציות אינטרנט

פיתוח של דפי אינטרנט ואפליקציות למכשירים ניידים מציב אתגרים שונים בהשוואה לפיתוח של דף אינטרנט לדפדפני אינטרנט במחשב. השיטות המומלצות הבאות יעזרו לכם לספק את אפליקציית האינטרנט היעילה ביותר ל-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>. כדאי גם לבצע ניתוח לנייד באמצעות PageSpeed Insights של Google כדי לקבל הצעות מפורטות לאופטימיזציה שספציפיות לאפליקציה שלכם.
  7. אם לא צריך את סמלי האתר, כדאי להשבית את ההורדה האוטומטית שלהם. כברירת מחדל, WebView מוריד באופן אוטומטי סמל אתר בכל פעם שמבקרים באתר במהלך הניווט. ‫WebView שומר שתי עותקים של כל סמל אתר שהורד (אחד ב-Java ואחד בזיכרון Native), לכן השבתת ההורדה של סמלי אתרים חוסכת זיכרון (כ-8 KB לכל מופע של 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, שהיא savedInstanceStateMB. מידע נוסף מופיע במאמר בנושא ניהול יעיל של מצב WebView.
  9. אופטימיזציה של חיבורי רשת וטעינת דפים באמצעות ממשקי API לטעינה מראש. כדי לצמצם את זמן האחזור של הניווט, אפשר להשתמש בממשקי ה-API של Jetpack Webkit כדי להכין מראש את חיבורי הרשת והתוכן. מתקשרים אל Profile.addQuicHints כדי לאכלס מראש את התמיכה ב-HTTP/3 באמצעות QUIC, כך ש-WebView יוכל להשתמש ב-QUIC באופן מיידי בחיבור הראשון, ומשתמשים ב-Profile.preconnect כדי לחמם מראש את שקעי הרשת. אם כתובות היעד ידועות או סביר שיהיו ידועות, כדאי להשתמש ב-Profile.prefetchUrlAsync או ב-WebViewCompat.prerenderUrlAsync כדי לאחזר או לעבד דפים ברקע. מידע נוסף זמין במאמר טעינה ספקולטיבית ב-WebView.
  10. אם לא צריך את סמלי האתר, כדאי להשבית את ההורדה האוטומטית שלהם. כברירת מחדל, WebView מוריד באופן אוטומטי סמל אתר בכל פעם שמבקרים באתר במהלך הניווט. ‫WebView שומר שתי עותקים של כל סמל אתר שהורד (אחד ב-Java ואחד בזיכרון Native), לכן השבתת ההורדה של סמלי אתרים חוסכת זיכרון (כ-8 KB לכל מופע של 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, שהיא savedInstanceStateMB. מידע נוסף מופיע במאמר בנושא ניהול יעיל של מצב WebView.

מקורות מידע נוספים