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

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

ภาพรวม

WebView เป็นส่วนสำคัญของการพัฒนา Android แต่บางครั้งก็จัดการได้ยากเนื่องจากฟีเจอร์ต่างๆ ไม่สอดคล้องกันในระบบปฏิบัติการ Android เวอร์ชันต่างๆ ระบบปฏิบัติการ Android แต่ละเวอร์ชันจะมี 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 เช่น prefetchUrlAsync, prerenderUrlAsync,และ setBackForwardCacheEnabled

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

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

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

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

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

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

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

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

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

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

  • Static Jetpack Webkit: ไลบรารี Static 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 ช่วยลดช่องว่างระหว่าง Static Framework API กับ WebView APK ที่อัปเดตบ่อยๆ เมื่อคุณใช้ Jetpack Webkit API กับรูปแบบการตรวจหาฟีเจอร์ ไลบรารีจะตรวจสอบว่า WebView APK ที่ติดตั้งในอุปกรณ์ของผู้ใช้รองรับฟีเจอร์นั้นหรือไม่ ซึ่งมีประโยชน์ตรงที่คุณไม่จำเป็นต้องตรวจสอบเวอร์ชันระบบปฏิบัติการ Android (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)
}

ดูข้อมูลเพิ่มเติมได้ที่เอกสารอ้างอิง androidx.webkit

ผสานรวม 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.16.0"
}

Kotlin

dependencies {
    implementation("androidx.webkit:webkit:1.16.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() นั้น น้อยมาก