แนวทางปฏิบัติที่ดีที่สุดสำหรับเว็บแอป

การพัฒนาหน้าเว็บและแอปพลิเคชันสำหรับอุปกรณ์เคลื่อนที่นั้นมีความท้าทายที่แตกต่างจากการพัฒนาหน้าเว็บสำหรับเว็บเบราว์เซอร์บนเดสก์ท็อป แนวทางปฏิบัติต่อไปนี้จะช่วยให้คุณสร้างเว็บแอปพลิเคชันที่มีประสิทธิภาพมากที่สุดสำหรับ Android และอุปกรณ์เคลื่อนที่อื่นๆ

  1. เปลี่ยนเส้นทางอุปกรณ์เคลื่อนที่ไปยังเว็บไซต์เวอร์ชันสำหรับมือถือโดยเฉพาะ คุณทำได้หลายวิธีโดยใช้การเปลี่ยนเส้นทางฝั่งเซิร์ฟเวอร์ วิธีที่นิยมใช้คือการ "ดมกลิ่น" สตริง User Agent ที่เว็บเบราว์เซอร์ระบุ หากต้องการพิจารณาว่าจะแสดงเว็บไซต์เวอร์ชันอุปกรณ์เคลื่อนที่หรือไม่ ให้มองหาสตริง "mobile" ใน User Agent
  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. ปิดใช้การดาวน์โหลด Favicon อัตโนมัติหากไม่ต้องการ โดยค่าเริ่มต้น WebView จะดาวน์โหลด favicon โดยอัตโนมัติทุกครั้งที่มีการเข้าชมเว็บไซต์ เมื่อไปยังส่วนต่างๆ WebView จะเก็บสำเนาของไอคอน Fav ที่ดาวน์โหลดแต่ละรายการไว้ 2 ชุด (ชุดหนึ่งใน Java และอีกชุดหนึ่งในหน่วยความจำดั้งเดิม) ดังนั้นการปิดใช้การดาวน์โหลดไอคอน Fav จะช่วยประหยัดหน่วยความจำ (ประมาณ 8 KB ต่ออินสแตนซ์ WebView) และลดการใช้แบนด์วิดท์ หากแอปไม่ได้ใช้หรือแสดง Favicon ให้ใช้ 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() เพื่อหลีกเลี่ยงการเกินขีดจำกัด 1 MB ของ savedInstanceState ใน Android ดูข้อมูลเพิ่มเติมได้ที่จัดการสถานะ WebView อย่างมีประสิทธิภาพ
  9. เพิ่มประสิทธิภาพการเชื่อมต่อเครือข่ายและการโหลดหน้าเว็บด้วย API การโหลดแบบคาดเดา หากต้องการลดเวลาในการตอบสนองของการนำทาง ให้ใช้ Jetpack Webkit API เพื่อเตรียมการเชื่อมต่อเครือข่ายและเนื้อหาล่วงหน้า เรียกใช้ Profile.addQuicHints เพื่อป้อนข้อมูลการรองรับ HTTP/3 ผ่าน QUIC ล่วงหน้าเพื่อให้ WebView ใช้ QUIC ได้ทันทีในการเชื่อมต่อครั้งแรก และใช้ Profile.preconnect เพื่อเตรียมซ็อกเก็ตเครือข่ายล่วงหน้า เมื่อทราบหรือคาดการณ์ URL ปลายทางได้ ให้ใช้ Profile.prefetchUrlAsync หรือ WebViewCompat.prerenderUrlAsync เพื่อดึงข้อมูลหรือแสดงหน้าเว็บในเบื้องหลัง อ่านข้อมูลเพิ่มเติมได้ที่การโหลดแบบคาดเดาใน WebView
  10. ปิดใช้การดาวน์โหลด Favicon อัตโนมัติหากไม่ต้องการ โดยค่าเริ่มต้น WebView จะดาวน์โหลด favicon โดยอัตโนมัติทุกครั้งที่มีการเข้าชมเว็บไซต์ เมื่อไปยังส่วนต่างๆ WebView จะเก็บสำเนาของไอคอน Fav ที่ดาวน์โหลดแต่ละรายการไว้ 2 ชุด (ชุดหนึ่งใน Java และอีกชุดหนึ่งในหน่วยความจำดั้งเดิม) ดังนั้นการปิดใช้การดาวน์โหลดไอคอน Fav จะช่วยประหยัดหน่วยความจำ (ประมาณ 8 KB ต่ออินสแตนซ์ WebView) และลดการใช้แบนด์วิดท์ หากแอปไม่ได้ใช้หรือแสดง Favicon ให้ใช้ 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() เพื่อหลีกเลี่ยงการเกินขีดจำกัด 1 MB ของ savedInstanceState ใน Android ดูข้อมูลเพิ่มเติมได้ที่จัดการสถานะ WebView อย่างมีประสิทธิภาพ

แหล่งข้อมูลเพิ่มเติม