WebView- รักหรือเกลียด แต่คุณไม่สามารถเพิกเฉยได้

ยอมรับว่าเราทุกคนมีความสัมพันธ์ทั้งรักและเกลียดกับ "WebViews" เราไม่สามารถอยู่ร่วมกับพวกเขาได้และเราไม่สามารถอยู่ได้โดยปราศจากพวกเขา แม้ว่าการใช้ WebView จะทำให้ประสบการณ์ผู้ใช้แอปพลิเคชันแย่ลง แต่ก็มีบางที่ที่เราทำไม่ได้หากไม่มีมัน ดังนั้นแม้จะไม่ต้องการ แต่สุดท้ายเราก็ใช้ WebViews ในแอปพลิเคชันของเรา

ในโพสต์นี้ ฉันจะพยายามครอบคลุมประเด็นต่อไปนี้เกี่ยวกับ WebViews

• โหลดไฟล์ html ในเครื่องลงใน WebView ด้วยการตั้งค่า WebView พื้นฐาน
• จัดการการเรียกกลับ Javascript จาก Javascript ไปยังไคลเอนต์
• ทำการโทรกลับ Javascript จากไคลเอนต์ไปยัง Javascript
• ตั้งค่า WebViewClient เป็น WebView
• การดีบัก WebView

แอปพลิเคชันสาธิต:

ฉันจะใช้การสาธิต แอปพลิเคชัน สำหรับโพสต์นี้ แอปพลิเคชันมี WebActivity หนึ่งรายการซึ่งมี WebView โหลดอยู่ภายใน หน้า html ที่โหลดใน WebView มี 2 ปุ่ม (ดูภาพที่ 1)

• คลิกเพื่อแสดงข้อความ Toastปุ่ม- ปุ่มนี้จะทำการเรียกกลับจาวาสคริปต์พร้อมกับสตริงซึ่งจะแสดงเป็น Toast ในไคลเอนต์ (ดูภาพที่ 2)
• ปุ่ม คลิกเพื่อโหลดข้อความใน WebView- ปุ่มนี้จะทำการเรียกกลับจาวาสคริปต์ในไคลเอนต์ เมื่อได้รับการติดต่อกลับ ลูกค้าจะเรียกใช้ฟังก์ชัน Javascript ซึ่งจะตั้งค่าข้อความภายใน html (ดูภาพที่ 3)

การแนะนำ

หากต้องการใช้ WebView ให้ประกาศรหัสต่อไปนี้ในไฟล์ xml

WebView มี "การตั้งค่า" มากมาย และการทำความเข้าใจการตั้งค่าทั้งหมดเหล่านี้ในตอนแรกอาจทำให้คุณรู้สึกกังวลเล็กน้อย ดังนั้น ในโพสต์นี้ ฉันจะกล่าวถึงการตั้งค่าขั้นต่ำที่จำเป็นในการโหลด WebView ใดๆ

setJavaScriptEnabled(เปิดใช้งานบูลีน)
ฟังก์ชันนี้กำหนดว่าไคลเอ็นต์สามารถรับการเรียกกลับจาก Javascript และไคลเอ็นต์สามารถเรียกฟังก์ชัน Javascript ได้หรือไม่ หากตั้งค่าเป็น False จะไม่มีการสื่อสารระหว่างไคลเอ็นต์กับเพจ Js/html

setCacheMode(int mode)
ฟังก์ชันนี้เป็นหนึ่งในฟังก์ชันที่สำคัญที่สุดในการพิจารณาว่า WebView จะทำงานอย่างไร หากหน้า html ที่กำลังแสดงผลเป็น html แบบคงที่หรือ html ที่มีทรัพยากรซึ่งมีโอกาสน้อยที่จะเปลี่ยนแปลงเมื่อเวลาผ่านไป ขอแนะนำเป็นอย่างยิ่งให้เปิดใช้งานแคชสำหรับหน้า html อ้างอิงวิธีการ นี้ เพื่อดูแคชประเภทต่างๆ ที่มีให้สำหรับเว็บเพจ

setVerticalScrollBarEnabled(เปิดใช้งานบูลีน)
ตามชื่อที่แนะนำ ฟังก์ชันนี้จะเปิดหรือปิดใช้งานการเลื่อนแนวตั้งใน WebView

setHorizontalScrollBarEnabled(เปิดใช้งานบูลีน)
ตามชื่อที่แนะนำ ฟังก์ชันนี้จะเปิดหรือปิดใช้งานการเลื่อนแนวนอนใน WebView

setUseWideViewPort(เปิดใช้งานบูลีน)
เมื่อตั้งค่าเป็นจริง หน้า html จะมีขนาดเป็นของตัวเอง เช่น ความกว้างและความสูงที่ประกาศในหน้า html หากตั้งค่าเป็น False หน้าเว็บจะมีขนาดอยู่ภายในขนาดของอุปกรณ์

ตามการตั้งค่าข้างต้น เราจะเริ่มต้น WebView ของเรา

ลูกค้าที่ได้รับการติดต่อกลับจาก Javascript:

สำหรับไคลเอนต์ หากต้องการรับการเรียกกลับจาก Javascript จะต้องมีคลาสอินเทอร์เฟซ Javascript อยู่ข้างใน ซึ่งจะใช้การเรียกกลับ การเรียกกลับจะต้องมีชื่อเดียวกันและจำนวนอาร์กิวเมนต์เดียวกันกับที่เรียกผ่าน Javascript นอกจากนี้ การเรียกกลับเหล่านี้ทั้งหมดควรมีคำอธิบายประกอบด้วยคำอธิบายประกอบ @JavascriptInterface หากไม่มีคำอธิบายประกอบนี้ เมธอดจะไม่ถูกเรียกใช้ ในคลาสด้านล่าง ฉันได้ประกาศสองฟังก์ชัน handleMessage()และsetWebViewTextCallback()ซึ่งจะถูกเรียกใช้โดย Javascript

WebView เพิ่มอินเทอร์เฟซ Javascript เช่นนี้

webView.addJavascriptInterface(new WebViewJsInterface(webView), "handler");

อาร์กิวเมนต์ที่สองของ "addJavascriptInterface" จะเป็นตัวจัดการโดย Javascript จะเรียกใช้ฟังก์ชันที่นำมาใช้ในไคลเอ็นต์

ฟังก์ชั่นต่อไปนี้ถูกนำมาใช้ใน Javascript:

ดังนั้นทันทีที่ผู้ใช้คลิกที่ปุ่มแรก โค้ดต่อไปนี้จะถูกดำเนินการในจาวาสคริปต์
handler.handleMessage('นี่คือข้อความอวยพรจาก Javascript !!')

เนื่องจาก handleMessage() ถูกนำมาใช้ในไคลเอนต์ วิธีการนี้จะถูกเรียกใช้และข้อความ Toast จะปรากฏขึ้น

ลูกค้าทำการเรียกใช้ฟังก์ชันไปยัง Javascript

มีกรณีที่ลูกค้าต้องการเรียกใช้ฟังก์ชัน Javascript ลองพิจารณาว่าเรามีฟังก์ชัน setText() ที่ใช้งานอยู่ในไฟล์ Javascript ของเรา

ในการเรียกใช้ฟังก์ชันนั้น เราจำเป็นต้องสร้าง String จากนั้นเรียกใช้ฟังก์ชัน WebView ด้วยอาร์กิวเมนต์สตริง สตริงถูกสร้างขึ้นดังนี้
functionName(Object… params).
ดังนั้นหากเราจำเป็นต้องเรียกใช้ฟังก์ชันข้างต้น เราต้องส่งผ่าน setText('This is ข้อความจาก Android ซึ่งตั้งค่าไว้ในหน้า html') เป็นอาร์กิวเมนต์

ฉันได้เขียนฟังก์ชันอรรถประโยชน์ซึ่งใช้ชื่อของฟังก์ชันที่จะเรียกใช้และพารามิเตอร์และส่งคืนสคริปต์

ในที่สุดเมื่อเราได้สตริง เราก็เรียกใช้ฟังก์ชัน WebView ตอนนี้ขึ้นอยู่กับระดับ API มีฟังก์ชันที่แตกต่างกันสองฟังก์ชันที่เราต้องเรียกใช้

สำหรับ API ระดับ 18 และต่ำกว่า: เราต้องเรียกใช้ฟังก์ชัน loadUrl
webView.loadUrl(“javascript:”+ script);

สำหรับ API ระดับ 19 และสูงกว่า:เราต้องเรียกใช้เมธอด evaluateJavascript ฟังก์ชันนี้รับอาร์กิวเมนต์และส่งกลับค่าที่ส่งคืนโดยวิธีการโทรเพิ่มเติม

ฉันได้เขียนฟังก์ชันยูทิลิตี้ซึ่งเรียกอาร์กิวเมนต์ String และเรียกใช้ฟังก์ชันที่เหมาะสมตามระดับ Android API

ตั้งค่า WebViewClient เป็น WebView

ด้วยความช่วยเหลือของ WebViewClient ลูกค้าจะสามารถควบคุมหน้าเว็บที่กำลังโหลดได้มากขึ้น ไคลเอ็นต์สามารถรับการเรียกกลับต่างๆ ได้ เช่น เมื่อ WebView เริ่มโหลด เมื่อ WebView กำลังโหลด เป็นต้น แนวทางปฏิบัติที่ดีเสมอคือการขยาย WebViewClient แล้วแนบเข้ากับ WebView

เพื่อจุดประสงค์ในการสาธิต ฉันกำลังแทนที่ฟังก์ชันบางอย่างของ WebViewClient และใส่บันทึกไว้รอบๆ ในการใช้งานจริง ฟังก์ชันที่ถูกแทนที่เหล่านี้จะถูกนำไปใช้ประโยชน์อื่นๆ อีกมากมาย

ตอนนี้ตั้งค่าไคลเอ็นต์ WebView ดังนี้:

webView.setWebViewClient(new CustomWebViewClient());

การดีบัก WebView

เราสามารถดีบัก WebView ใน Chrome Developers Tools ได้เหมือนหน้าเว็บปกติ หากต้องการเปิดใช้งานการดีบัก WebView เราจำเป็นต้องเพิ่มโค้ดต่อไปนี้

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
  WebView.setWebContentsDebuggingEnabled(true);
}

ตอนนี้เมื่อแอปพลิเคชันทำงาน ให้เปิด chrome://inspect/#devicesและเลือก WebView ที่เหมาะสม เท่านี้ก็พร้อมใช้งาน หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับการดีบัก WebView โปรดติดตาม "บทความ" นี้

โครงการนี้จัดขึ้นที่ "Github"
ขอบคุณสำหรับการอ่านบทความ หากเห็นว่าบทความนี้มีประโยชน์ โปรดแนะนำด้วย

ตรวจสอบโครงการ Github อื่น ๆ ของฉัน "ที่นี่" และบทความกลางอื่น ๆ ของฉัน "ที่นี่" มาเชื่อมต่อกันที่ LinkedIn กันดีกว่า

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

เข้าร่วมชุมชน Mindorks และเรียนรู้จากกันและกัน