ทำให้การใช้งาน WebView ง่ายขึ้นด้วย Jetpack Webkit

คู่มือนี้อธิบายถึงประโยชน์ของไลบรารี Jetpack Webkit อธิบายวิธีการทำงาน และวิธีที่คุณสามารถนำไปใช้ในโปรเจ็กต์

ภาพรวม

WebView เป็นส่วนสำคัญของการพัฒนา Android แต่บางครั้งก็จัดการได้ยากเนื่องจากฟีเจอร์ต่างๆ ไม่สอดคล้องกันในระบบปฏิบัติการ Android เวอร์ชันต่างๆ Android OS แต่ละเวอร์ชันมี WebView API ชุดหนึ่งที่กำหนดไว้ เนื่องจาก Android มีการเผยแพร่ในความถี่ที่ช้ากว่า WebView ดังนั้น Android API จึงอาจไม่ครอบคลุมฟีเจอร์ WebView ที่มีทั้งหมด ซึ่งทำให้การเปิดตัวฟีเจอร์ช้าลงและค่าใช้จ่ายในการทดสอบเพิ่มขึ้น

Jetpack Webkit แก้ปัญหาเหล่านี้ด้วยการทำหน้าที่เป็นเลเยอร์ความเข้ากันได้และใช้ประโยชน์จาก WebView APK เวอร์ชันล่าสุดในอุปกรณ์ของผู้ใช้ นอกจากนี้ยังมี API ใหม่และทันสมัยที่พร้อมใช้งานในไลบรารีนี้เท่านั้น

เหตุผลที่ควรใช้ Jetpack Webkit

นอกเหนือจากการมอบความเข้ากันได้ข้ามเวอร์ชันแล้ว Jetpack Webkit ยังมี API ใหม่และทันสมัยที่ช่วยลดความซับซ้อนในการพัฒนาและปรับปรุงฟังก์ชันการทำงานของแอปได้ด้วย ดังนี้

  • เปิดใช้การตรวจสอบสิทธิ์แบบใหม่: WebView สามารถจัดการมาตรฐานการตรวจสอบสิทธิ์ผ่านเว็บแบบใหม่ เช่น WebAuthn ได้อย่างราบรื่น ซึ่งช่วยให้ลงชื่อเข้าใช้ด้วยพาสคีย์ได้ ไลบรารี androidx.webkit ช่วยให้คุณควบคุมการผสานรวมนี้ได้อย่างเต็มที่ โดยใช้วิธี WebSettingsCompat.setWebAuthenticationSupport() ซึ่ง คุณสามารถใช้เพื่อกำหนดระดับการสนับสนุนที่แอปต้องการได้

  • ปรับปรุงประสิทธิภาพ: ปรับแต่งประสิทธิภาพของ WebView โดยใช้ API เช่น เช่น setBackForwardCacheEnabled หรือลดเวลาในการตอบสนองของการนำทางโดยใช้ API การโหลดแบบคาดเดา เช่น prefetchUrlAsync และ prerenderUrlAsync ดูข้อมูลเพิ่มเติมได้ที่การโหลดแบบคาดเดาใน WebView

  • เพิ่มความเสถียร: กู้คืนกระบวนการแสดงผลที่หยุดทำงานหรือไม่ตอบสนอง โดยไม่ทำให้แอปขัดข้อง ดูข้อมูลเพิ่มเติมได้ที่ WebViewRenderProcess#terminate()

  • ควบคุมข้อมูลการท่องเว็บได้อย่างละเอียด: หากต้องการลบข้อมูลการท่องเว็บที่ WebView จัดเก็บไว้ สำหรับต้นทางที่เฉพาะเจาะจง ให้ใช้คลาส WebStorageCompat

  • ปรับปรุงประสิทธิภาพของสถานะและหน่วยความจำ: ทำให้สถานะการนำทางเป็นอนุกรมได้อย่างปลอดภัย ภายในงบประมาณการทำธุรกรรม 1 MB และหลีกเลี่ยง TransactionTooLargeException การขัดข้องโดยใช้การทำให้สถานะเป็นอนุกรมแบบจำกัดขนาดด้วย WebViewCompat.saveState() ดูข้อมูลเพิ่มเติมได้ที่ จัดการ สถานะ WebView อย่างมีประสิทธิภาพ

ทำความเข้าใจคอมโพเนนต์ต่างๆ

หากต้องการใช้ Jetpack Webkit อย่างมีประสิทธิภาพ คุณต้องทำความเข้าใจความสัมพันธ์ระหว่างคอมโพเนนต์ต่อไปนี้

  • Android System WebView: นี่คือเอ็นจินการแสดงผลที่อิงตาม Chromium ซึ่ง Google อัปเดตเป็นประจำผ่าน Google Play Store ในความถี่เดียวกับ Chrome โดยมีฟีเจอร์ล่าสุดและโค้ดการใช้งานพื้นฐานสำหรับ WebView API ทั้งหมด

  • Framework API (android.webkit): นี่คือ API ที่กำหนดไว้สำหรับ Android OS เวอร์ชันที่เฉพาะเจาะจง ตัวอย่างเช่น แอปใน Android 10 จะเข้าถึงได้เฉพาะ API ที่พร้อมใช้งานเมื่อมีการเปิดตัวเวอร์ชันนั้น ดังนั้นจึงไม่สามารถใช้ฟีเจอร์ใหม่ที่เพิ่มลงใน WebView APK ในการอัปเดตล่าสุดได้ ตัวอย่างเช่น หากต้องการ จัดการตัวแสดงผลที่ไม่ตอบสนองด้วย WebView#getWebViewRenderProcess() คุณจะเรียกใช้ฟังก์ชันนี้ได้ใน Android 10 ขึ้นไปเท่านั้น

  • ไลบรารี Jetpack Webkit (androidx.webkit): นี่คือไลบรารีขนาดเล็กที่รวมอยู่ในแอปพลิเคชัน ไลบรารีนี้ทำหน้าที่เป็นสะพานที่เรียกใช้ WebView APK แทนที่จะเรียกใช้ API ที่กำหนดไว้ในแพลตฟอร์ม Android ซึ่งมี Android OS เวอร์ชันที่กำหนดไว้ วิธีนี้ช่วยให้แอปพลิเคชันใช้ฟีเจอร์ WebView ล่าสุดได้ แม้ว่าจะติดตั้งในอุปกรณ์ที่ใช้ Android OS เวอร์ชันเก่า เช่น Android 10 ตัวอย่างเช่น WebViewCompat.getWebViewRenderProcess() ทำงานคล้ายกับ Framework API แต่สามารถเรียกใช้ใน Android OS ทุกเวอร์ชันก่อน Android 10 ได้ด้วย

หาก API พร้อมใช้งานทั้งใน Framework และ Jetpack Webkit เราขอแนะนำให้คุณเลือกเวอร์ชัน Jetpack Webkit ซึ่งจะช่วยให้มั่นใจได้ถึงลักษณะการทำงานและความเข้ากันได้ที่สอดคล้องกันในอุปกรณ์ที่หลากหลายที่สุด

การโต้ตอบระหว่าง Jetpack Webkit กับ APK

API ใน Jetpack Webkit มีการใช้งาน 2 ส่วน ดังนี้

  • Jetpack Webkit แบบคงที่: ไลบรารี Jetpack Webkit แบบคงที่ประกอบด้วย โค้ดส่วนน้อยที่รับผิดชอบในการใช้งาน API

  • WebView APK: WebView APK ประกอบด้วยโค้ดส่วนใหญ่

แอปของคุณจะเรียกใช้ Jetpack Webkit API ซึ่งจะเรียกใช้ WebView APK

แม้ว่าคุณจะควบคุมเวอร์ชัน Jetpack Webkit ในแอปได้ แต่คุณไม่สามารถควบคุมการอัปเดต WebView APK ในอุปกรณ์ของผู้ใช้ได้ โดยทั่วไป ผู้ใช้ส่วนใหญ่มี WebView APK เวอร์ชันล่าสุด แต่แอปของคุณยังคงต้องระมัดระวังไม่ให้เรียกใช้ API ที่ WebView APK เวอร์ชันนั้นไม่รองรับ

นอกจากนี้ Jetpack Webkit ยังช่วยลดความจำเป็นในการตรวจสอบเวอร์ชัน WebView ด้วยตนเอง หากต้องการตรวจสอบว่าฟีเจอร์พร้อมใช้งานหรือไม่ ให้ตรวจสอบค่าคงที่ของฟีเจอร์นั้น เช่น เช่น, WebViewFeature.WEB_AUTHENTICATION.

วิธีการทำงานร่วมกัน

Jetpack Webkit ช่วยลดช่องว่างระหว่าง Framework API แบบคงที่กับ WebView APK ที่อัปเดตบ่อยๆ เมื่อคุณใช้ Jetpack Webkit API กับรูปแบบการตรวจหาฟีเจอร์ ไลบรารีจะตรวจสอบว่า WebView APK ที่ติดตั้งในอุปกรณ์ของผู้ใช้รองรับฟีเจอร์นั้นหรือไม่ ซึ่งมีประโยชน์ตรงที่คุณไม่จำเป็นต้องตรวจสอบ Android OS (Framework) เวอร์ชัน

หาก WebView APK เป็นเวอร์ชันที่ใหม่พอ ไลบรารีจะเรียกใช้ฟีเจอร์ หากไม่ใช่ ไลบรารีจะรายงานว่าฟีเจอร์ไม่พร้อมใช้งาน ซึ่งจะช่วยป้องกันไม่ให้แอปขัดข้องและช่วยให้คุณจัดการสถานการณ์ได้อย่างราบรื่น

เปรียบเทียบ Jetpack Webkit กับ Framework API

ส่วนนี้จะเปรียบเทียบวิธีการใช้งานที่มีและไม่มีไลบรารี Jetpack Webkit

เปิดใช้การตรวจสอบสิทธิ์แบบใหม่ (WebAuthn)

ไม่มี Jetpack Webkit

ทำไม่ได้ผ่าน Framework API

มี Jetpack Webkit

ใช้ประโยชน์จาก WebViewFeature.WEB_AUTHENTICATION สำหรับการตรวจสอบความเข้ากันได้

if (WebViewFeature.isFeatureSupported(WebViewFeature.WEB_AUTHENTICATION)) {
  WebSettingsCompat.setWebAuthenticationSupport(
      webView.settings,
      WebSettingsCompat.WEB_AUTHENTICATION_SUPPORT_FOR_APP
  )
}

ลบข้อมูลสำหรับต้นทาง (พื้นที่เก็บข้อมูลเฉพาะเว็บไซต์)

ไม่มี Jetpack Webkit

ไม่มี API โดยตรงเพื่อล้างข้อมูลต้นทางที่เฉพาะเจาะจง มักจะต้องล้างข้อมูลทั้งหมด

มี Jetpack Webkit

ใช้ API ความเข้ากันได้เพื่อลบข้อมูลได้อย่างแม่นยำ คุณสามารถใช้ตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้

WebStorageCompat.getInstance().deleteBrowsingData()

หรือ

WebStorageCompat.getInstance().deleteBrowsingDataForSite()

รับเวอร์ชัน WebView

ไม่มี Jetpack Webkit

ใช้คลาส Framework มาตรฐาน

val webViewPackage = WebView.getCurrentWebViewPackage()

มี Jetpack Webkit

ใช้เลเยอร์ความเข้ากันได้เพื่อการดึงข้อมูลที่ปลอดภัยยิ่งขึ้น

val webViewPackage = WebViewCompat.getCurrentWebViewPackage()

จัดการตัวแสดงผลที่ไม่ตอบสนอง (ไคลเอ็นต์ตัวแสดงผล)

ไม่มี Jetpack Webkit

ใช้วิธี Framework มาตรฐาน

webView.setWebViewRenderProcessClient(myClient)

มี Jetpack Webkit

ใช้ WebViewCompat และการตรวจสอบฟีเจอร์เพื่อตั้งค่าไคลเอ็นต์

if (WebViewFeature.isFeatureSupported(WebViewFeature.WEB_VIEW_RENDERER_CLIENT_BASIC_USAGE)) {
  WebViewCompat.setWebViewRenderProcessClient(webView, myClient)
}

ดูคำแนะนำเกี่ยวกับการใช้กลยุทธ์การกู้คืนจากการขัดข้องได้ที่จัดการการสิ้นสุดของ WebView ดูรายละเอียด API ได้ที่ androidx.webkit เอกสารอ้างอิง

จัดการสถานะที่บันทึกไว้และขนาดธุรกรรม

API WebViewCompat.saveState ช่วยให้คุณบังคับใช้ขีดจำกัดไบต์และตัดประวัติการนำทางไปข้างหน้าออกระหว่างการทำให้เป็นอนุกรม ซึ่งจะช่วยป้องกันการขัดข้อง TransactionTooLargeException ขณะที่ยังคงเก็บรักษาประวัติการนำทางที่สำคัญไว้

ไม่มี Jetpack Webkit

ใช้วิธี Framework มาตรฐาน ซึ่งจะทำให้สแต็กการนำทางทั้งหมดเป็นอนุกรมโดยไม่มีการจำกัดขนาด และอาจทริกเกอร์ TransactionTooLargeException หากเพย์โหลดเกินขีดจำกัดการทำธุรกรรม 1 MB ของ Android

webView.saveState(outState)

มี Jetpack Webkit

ใช้ WebViewCompat เพื่อบังคับใช้ขีดจำกัดไบต์สูงสุดหรือนำรายการการนำทางไปข้างหน้าออก เพื่อป้องกันการล้นธุรกรรม

WebViewCompat.saveState(webView, outState, maxSizeBytes)

ดูข้อมูลเพิ่มเติมได้ที่ จัดการสถานะ WebView อย่างมีประสิทธิภาพ

ผสานรวม Jetpack Webkit เข้ากับโค้ด

การใช้ Jetpack Webkit จะเพิ่มขีดความสามารถของคลาส WebView มาตรฐาน แต่ไม่ได้แทนที่คลาส WebView เดิมทั้งหมด

คุณยังคงใช้คลาส android.webkit.WebView ได้ โดยเพิ่มคลาสนี้ลงในเลย์เอาต์ XML และรับการอ้างอิงถึงอินสแตนซ์ในโค้ด หากต้องการเข้าถึงฟีเจอร์ Framework มาตรฐาน คุณยังคงเรียกใช้เมธอดในอินสแตนซ์ WebView หรือออบเจ็กต์การตั้งค่าของอินสแตนซ์นั้นได้โดยตรง

หากต้องการเข้าถึงฟีเจอร์ที่ทันสมัย ให้ใช้เมธอดตัวช่วยแบบคงที่ที่ Jetpack Webkit มีให้ เช่น WebViewCompat และ WebSettingsCompat โดยส่งอินสแตนซ์ WebView ที่มีอยู่ไปยังเมธอดเหล่านี้

Kotlin

import android.webkit.WebView
import androidx.webkit.WebSettingsCompat
import androidx.webkit.WebViewFeature

// You still get your WebView instance the standard way.
val webView: WebView = findViewById(R.id.my_webview)

// To enable a modern feature, you pass that instance to a Jetpack Webkit helper.
if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
    WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_ON)
}

Java

import android.webkit.WebView;
import androidx.webkit.WebSettingsCompat;
import androidx.webkit.WebViewFeature;

// You still get your WebView instance the standard way.
WebView webView = findViewById(R.id.my_webview);

// To enable a modern feature, you pass that instance to a Jetpack Webkit helper.
if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
    WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_ON);
}

ใช้ Jetpack Webkit

หากต้องการใช้ Jetpack Webkit ให้ทำตามขั้นตอนต่อไปนี้

ขั้นตอนที่ 1: เพิ่มทรัพยากร Dependency

ในไฟล์ build.gradle.kts หรือ build.gradle ของโมดูล ให้ใส่ทรัพยากร Dependency ต่อไปนี้เพื่อเพิ่ม Jetpack Webkit:

ดึงดูด

dependencies {
    implementation "androidx.webkit:webkit:1.17.0"
}

Kotlin

dependencies {
    implementation("androidx.webkit:webkit:1.17.0")
}

Jetpack Webkit มี Wrapper ขนาดเล็ก ดังนั้นจึงส่งผลต่อขนาดแอปพลิเคชันน้อยมาก

ขั้นตอนที่ 2: ใช้รูปแบบการตรวจหาฟีเจอร์

ใช้การตรวจสอบฟีเจอร์เพื่อป้องกันการขัดข้องเมื่อเรียกใช้ API ที่ไม่พร้อมใช้งาน เราขอแนะนำให้ใส่การเรียกใช้ API แต่ละรายการไว้ในการตรวจสอบฟีเจอร์ และอาจพิจารณาตรรกะการทำงานสำรองไว้ในกรณีที่ API ไม่พร้อมใช้งาน

เราขอแนะนำรูปแบบต่อไปนี้สำหรับการใช้ WebView API ที่ทันสมัย

Kotlin

import android.webkit.WebView
import androidx.webkit.WebSettingsCompat
import androidx.webkit.WebViewFeature

val webView: WebView = findViewById(R.id.my_webview)

// Before you use a modern API, first check if it is supported.
if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
    // If the check passes, it is safe to call the API.
    WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_ON)
} else {
    // Optionally, provide a fallback for older WebView versions.
}

Java

import android.webkit.WebView;
import androidx.webkit.WebSettingsCompat;
import androidx.webkit.WebViewFeature;

WebView webView = findViewById(R.id.my_webview);

// Before you use a modern API, first check if it is supported.
if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
    // If the check passes, it is safe to call the API.
    WebSettingsCompat.setForceDark(webView.getSettings(), WebSettingsCompat.FORCE_DARK_ON);
} else {
    // Optionally, provide a fallback for older WebView versions.
}

รูปแบบนี้ช่วยให้แอปพลิเคชันมีความเสถียร เนื่องจากการตรวจสอบฟีเจอร์จะทำงานก่อน ดังนั้นแอปพลิเคชันจึงไม่ขัดข้องหากฟีเจอร์ไม่พร้อมใช้งาน ค่าใช้จ่ายด้านประสิทธิภาพของการตรวจสอบ WebViewFeature#isFeatureSupported() นั้น น้อยมาก