มีอะไรใหม่ใน Android 2023

Adriana Jara

Sebastian Benz

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

ต่อไปนี้คือข้อมูลอัปเดตล่าสุดเกี่ยวกับเครื่องมือเหล่านี้ เช่น

• การปรับปรุงความเป็นส่วนตัวและการรองรับหน้าจอขนาดใหญ่ได้ดียิ่งขึ้น เช่น การรองรับการลากและวางรูปภาพใน WebView
• ตอนนี้แท็บที่กำหนดเองรองรับแท็บที่กำหนดเองบางส่วนแล้ว
• ฟีเจอร์ที่ผสานรวมสำหรับ PWA เช่น UI การติดตั้งที่สมบูรณ์ขึ้นและ Play Billing API ในกิจกรรมในเว็บซึ่งเชื่อถือได้

มาดูรายละเอียดเพิ่มเติมกัน

WebView

WebView เป็นวิธีที่พบบ่อยที่สุดในการฝังเนื้อหาเว็บลงในแอป Android เนื่องจากแอป Android ส่วนใหญ่ใช้ WebView นี่เป็นวิธีที่ยอดเยี่ยมในการผสานรวม UI ของเว็บเข้ากับประสบการณ์การใช้งานแอป Android เนทีฟอย่างราบรื่น เช่น คุณสามารถฝัง UI ของเว็บต่างๆ ลงในแอป เช่น โฆษณา วิดเจ็ต หรือแม้แต่เบราว์เซอร์ในแอป จุดแข็งที่ใหญ่ที่สุดอย่างหนึ่งของ WebView คือ API ที่มีประสิทธิภาพในการควบคุมและแก้ไขเนื้อหาเว็บที่โหลด มีอะไรใหม่ใน WebView

ส่วนหัว X-Requested-With

มาเริ่มกันที่ความเป็นส่วนตัวและการเลิกใช้งานส่วนหัว X-Requested-With เมื่อผู้ใช้ติดตั้งและเรียกใช้แอปพลิเคชันที่ใช้ WebView เพื่อฝังเนื้อหาเว็บ WebView จะเพิ่มส่วนหัว X-Requested-With ลงในคําขอทั้งหมดที่ส่งไปยังเซิร์ฟเวอร์ ค่าของส่วนหัวนี้คือชื่อ APK ของแอปพลิเคชัน ซึ่งหมายความว่าคําขอทุกรายการจะมีข้อมูลที่เฉพาะเจาะจงเกี่ยวกับบริบทที่ผู้ใช้กําลังบริโภคเนื้อหาบนเว็บ และเปิดเผยตัวตนของแอปไปยังบริการออนไลน์ ทีม WebView ได้เริ่มการทดลองเลิกใช้งานซึ่งจะนำส่วนหัวนี้ออกจากคำขอ WebView ทั้งหมดเพื่อปกป้องความเป็นส่วนตัวของผู้ใช้

แต่จะเกิดอะไรขึ้นหากแอปของคุณใช้ส่วนหัว X-Requested-With เราขอแนะนําให้ใช้ API ใหม่สำหรับการเลือกใช้ ซึ่งช่วยให้คุณเลือกส่งส่วนหัวคําขอไปยังต้นทางที่เฉพาะเจาะจงได้ ซึ่งหมายความว่าคุณจะได้ประโยชน์จากทั้ง 2 ทาง นั่นคือคุณสามารถรองรับฟีเจอร์ที่มีอยู่ซึ่งสร้างขึ้นบนส่วนหัวนี้ได้ต่อไป พร้อมกับรักษาความเป็นส่วนตัวของผู้ใช้ในทุกกรณี หากต้องการใช้ลักษณะการทำงานเดิมต่อไป คุณสามารถลงชื่อสมัครใช้การทดลองใช้ต้นทาง X-Requested-With Deprecation ได้ด้วย

WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
    demoWebview.getSettings(), Collections.singleton("https://example.com")
);

การทดสอบ WebView

หัวข้อถัดไปคือการทดสอบ หากคุณเป็นนักพัฒนาเว็บและเว็บไซต์ของคุณได้รับการเข้าชมจำนวนมากจาก WebView โปรดทราบว่าเรามีข้อมูลอัปเดต 2 รายการดังนี้

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

2. ตอนนี้การติดตั้ง WebView รุ่นเบต้าทำได้ง่ายขึ้นมาก เราขอแนะนําอย่างยิ่งให้ทดสอบเว็บไซต์โดยใช้ช่องทาง WebView รุ่นเบต้าเพื่อให้มั่นใจว่าเว็บไซต์จะทํางานได้ดีใน WebView เวอร์ชันที่กําลังจะเปิดตัว โดยเข้าร่วมโปรแกรมการทดสอบเบต้าของ WebView ใน Google Play Store แล้วระบบจะลงทะเบียนอุปกรณ์โดยอัตโนมัติ

การรองรับอุปกรณ์หน้าจอขนาดใหญ่

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

การเพิ่มการลากและวางลงใน WebView ทำได้ง่ายมาก เพียงประกาศ DropDataProvider ใน AndroidManifest

<application...>
     ...
     <provider
         android:authorities="com.example.webviewdemo.DropDataProvider"
         android:name="androidx.webkit.DropDataContentProvider"
         android:exported="false"
         android:grantUriPermissions="true"/>
 </application>

ในส่วนของอุปกรณ์หน้าจอขนาดใหญ่ Chrome และ WebView ใน Android U จะรองรับการเขียนด้วยลายมือในช่องป้อนข้อความ HTML อย่างเต็มรูปแบบ รวมถึงรองรับท่าทางสัมผัสสำหรับการลบข้อความหรือเพิ่มเว้นวรรค อุปกรณ์ Samsung ทุกรุ่นที่ใช้ One UI 5.1 เช่น S23 Ultra รองรับการเขียนด้วยลายมืออยู่แล้ว สำหรับอุปกรณ์อื่นๆ ที่ใช้ Android T คุณสามารถเปิดใช้การเขียนด้วยลายมือในอินพุต HTML ในส่วนตัวเลือกสำหรับนักพัฒนาซอฟต์แวร์

เครื่องมือรันไทม์ JavaScript ของ Jetpack

บางครั้งคุณอาจต้องเรียกใช้ JavaScript ในแอปโดยไม่ต้องแสดงเนื้อหาเว็บ เช่น เมื่อแชร์ตรรกะทางธุรกิจในแอปบนเว็บและแอปบนอุปกรณ์เคลื่อนที่ เมื่อปีที่แล้ว เราได้เปิดตัวรุ่นอัลฟ่าของเครื่องมือ JavaScript ของ JetPack เวอร์ชันใหม่เพื่อให้คุณดำเนินการนี้ได้ง่ายขึ้น ไลบรารีนี้ใช้ V8 ซึ่งเป็นเครื่องมือ JavaScript ของ Chrome และช่วยให้แอปพลิเคชันประเมินโค้ด JavaScript หรือ WebAssembly ได้โดยไม่ต้องสร้างอินสแตนซ์ WebView สิ่งที่ยอดเยี่ยมเกี่ยวกับเครื่องมือ JavaScript ใหม่คือจะเรียกใช้ JavaScript ในกระบวนการอื่น ซึ่งทำให้เป็นวิธีที่ปลอดภัยและเสถียรในการเรียกใช้ JavaScript ในแอป นอกจากนี้ ยังใช้ทรัพยากรน้อยกว่าอินสแตนซ์ WebView ด้วย

ListenableFuture<JavaScriptSandbox> jsSandboxFuture =
JavaScriptSandbox.createConnectedInstanceAsync(JavaScriptEngineActivity.this);
JavaScriptIsolate jsIsolate = jsSandboxFuture.get().createIsolate();
final String code =
"function sum(a, b) { let r = a + b; return r.toString(); }; sum(3, 4)";
ListenableFuture<String> resultFuture = jsIsolate.evaluateJavaScriptAsync(code);
…

แท็บที่กำหนดเอง

WebView เหมาะสําหรับการผสานรวม UI ของเว็บในแอป แต่การอนุญาตให้ผู้ใช้เรียกดูเนื้อหาเว็บในแอปล่ะ

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

ซึ่งหมายความว่าหากเบราว์เซอร์เริ่มต้นคือ Chrome แท็บที่กำหนดเองจะเปิดใน Chrome หากเบราว์เซอร์เริ่มต้นคือ Firefox แท็บที่กำหนดเองจะเปิดใน Firefox เบราว์เซอร์หลักส่วนใหญ่ใน Android รองรับแท็บที่กำหนดเอง และหากเบราว์เซอร์เริ่มต้นไม่รองรับแท็บที่กำหนดเอง แอปเบราว์เซอร์จะเปิดขึ้นแทน

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

แท็บที่กำหนดเองบางส่วน

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

สิ่งที่ต้องทำมีเพียงเชื่อมต่อกับบริการ Custom Tabs, ส่งเซสชันไปยัง CustomTabsBuilder และเรียกใช้ setActivityHeight

CustomTabsSession customTabsSession;

// ...

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder(customTabsSession)
  .setInitialActivityHeightPx(500)
  .setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
  // ...
  .build();

customTabsIntent.launchUrl(context, Uri.parse(url))

YouTube เปิดตัวแท็บที่กำหนดเองในบรรทัดที่มีการปรับขนาดได้ในโฆษณาแบบตอบสนองโดยตรงเรียบร้อยแล้ว วิธีนี้ช่วยให้บริษัทใช้วิธีใหม่ในการโต้ตอบกับโฆษณาและเนื้อหาเว็บได้โดยไม่รบกวนประสบการณ์การใช้งานทั่วไปในแอป

แล้วแท็บเล็ตและอุปกรณ์หน้าจอขนาดใหญ่อื่นๆ ล่ะ ขณะนี้ทีม Chrome กำลังพัฒนาประสบการณ์การใช้งานแท็บที่กำหนดเองแบบแสดงคู่กันใหม่สำหรับโหมดแนวนอนและอุปกรณ์หน้าจอขนาดใหญ่ เมื่อกำหนดความกว้างสูงสุดของแท็บพร้อมกับจุดหยุดพัก ประสบการณ์การใช้งานแท็บที่กำหนดเองจะสลับระหว่างการวางซ้อนของชีตด้านล่างกับประสบการณ์การใช้งานแบบแสดงคู่กันโดยอัตโนมัติ ฟีเจอร์นี้พร้อมใช้งานใน Canary แล้ว และจะเปิดตัวประมาณเดือนกรกฎาคม 2023 หากต้องการลองใช้ ให้ดูซอร์สโค้ดของแอปตัวอย่าง Chrome Custom Tab

การวัดสัญญาณการมีส่วนร่วม

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

ทีม Chrome ได้เพิ่มระดับการเข้าถึงเมตริกเฉพาะเซสชันลงในแท็บที่กำหนดเองของ Chrome นอกจากระยะเวลาที่ผู้ใช้อยู่ในหน้าเว็บแล้ว ตอนนี้คุณยังดูระยะการเลื่อน ทิศทางการเลื่อน และการมีส่วนร่วมโดยรวมกับเนื้อหาเว็บได้ด้วย

สัญญาณการมีส่วนร่วมพร้อมใช้งานตั้งแต่ Chrome 114 เป็นต้นไป และต้องมีค่ายสนับสนุน androidx.browser:browser:1.6.0-alpha01 ขึ้นไป ดูข้อมูลเพิ่มเติมได้ที่คู่มือเริ่มต้นใช้งานสัญญาณการมีส่วนร่วม

PWA

นอกจากนี้ยังมีการอัปเดตใน PWA ซึ่งเป็นชุดเทคโนโลยีที่ทําให้สร้างประสบการณ์การใช้งานที่คล้ายกับแอปซึ่งสร้างขึ้นและติดตั้งใช้งานบนเว็บได้

เมื่อใช้ PWA ใน Android คุณจะติดตั้งเว็บแอปได้ โดยเว็บแอปจะแสดงอยู่ร่วมกับแอปอื่นๆ บนแพลตฟอร์มต่างๆ ในหน้าจอหลัก โปรแกรมเปิด การตั้งค่า และแพลตฟอร์มอื่นๆ

ฟีเจอร์ PWA สร้างขึ้นตามมาตรฐานเว็บ โดยมุ่งเน้นที่ความเข้ากันได้ข้ามแพลตฟอร์ม ซึ่งช่วยให้นักพัฒนาซอฟต์แวร์มีเครื่องมือในการสร้างเว็บแอปเพียงครั้งเดียว และอนุญาตให้ผู้ใช้ติดตั้งเว็บแอปในอุปกรณ์ใดก็ได้ที่ต้องการ การสร้างเว็บแอปที่ติดตั้งได้ไม่ได้หมายความว่าคุณไม่มีหรือไม่ควรมีแอป Android เวอร์ชันเนทีฟ แต่เป็นอีกทางเลือกหนึ่งในการนําเว็บมาสู่ Android

มาดูฟีเจอร์ 2-3 อย่างที่ทำให้เว็บแอปที่ติดตั้งได้ทำงานได้อย่างราบรื่นใน Android

เราต้องการให้ผู้ใช้ติดตั้งเว็บไซต์ที่ตนให้ความสำคัญมากที่สุดได้ ขั้นตอนแรกคือการนําตัวแฮนเดิลการดึงข้อมูลของ Service Worker ออก ซึ่งเป็นข้อกําหนดในการติดตั้งบน Android และ Chrome นอกจากนี้ Chrome จะข้ามการเริ่มต้น Service Worker หากตัวแฮนเดิลการดึงข้อมูลว่างเปล่า Chrome จะทำการทดสอบเพื่อขยายสิทธิ์เข้าถึงการติดตั้งให้แก่ผู้ใช้ โปรดคอยติดตามและแสดงความคิดเห็น

ข้อกำหนดเกี่ยวกับ Service Worker มีไว้เพื่อให้นักพัฒนาแอปสร้างประสบการณ์การใช้งานที่สอดคล้องกับแอป Android อื่นๆ ซึ่งอาจใช้สร้างหน้าเว็บเพื่อแจ้งให้ผู้ใช้ทราบว่าใช้แอปขณะออฟไลน์ไม่ได้

เราตระหนักดีว่าเราสามารถช่วยลดภาระงานของนักพัฒนาแอป และช่วยให้แอปเหล่านี้มอบประสบการณ์การติดตั้งที่ดีตั้งแต่เริ่มต้น ด้วยเหตุนี้ Chrome จึงเพิ่มประสบการณ์การใช้งานแบบออฟไลน์เริ่มต้นซึ่งจะแสดงหน้าจอที่มีไอคอนของแอปให้ผู้ใช้ทราบสถานะออฟไลน์โดยไม่ต้องให้นักพัฒนาแอปทำงานเพิ่มเติม

แน่นอนว่า Service Worker API จะยังคงพร้อมใช้งานเพื่อสร้างประสบการณ์การใช้งานแบบออฟไลน์ที่กําหนดเองและใช้ฟีเจอร์อื่นๆ เช่น การแคช เพื่อปรับปรุงประสิทธิภาพ

ฟีเจอร์อื่นๆ ที่ช่วยให้ Android มอบประสบการณ์การใช้งานเว็บแอปที่ยอดเยี่ยมยิ่งขึ้น ได้แก่ UI การติดตั้งที่สมบูรณ์ยิ่งขึ้น การเพิ่มช่อง description และ screenshots ลงในไฟล์ Manifest ของเว็บจะทำให้ผู้ใช้ได้รับประสบการณ์การติดตั้งที่ใกล้เคียงกับสิ่งที่ App Store แสดงเพื่ออธิบายแอปของคุณ

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

เมื่อใช้ Web Share และ Web Share Target API แอปของคุณจะโต้ตอบกับแอปอื่นๆ ได้ เช่น แอปแพลตฟอร์มอื่นๆ แอปของคุณจะเป็นตัวเลือกในชีตการแชร์ และสามารถแชร์และรับรูปภาพ ข้อความ และไฟล์อื่นๆ

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่ธุรกิจใช้ประโยชน์จากเทคโนโลยีเหล่านี้ได้ในทอล์ก I/O "เว็บ: แพลตฟอร์มสําหรับการเติบโต"

กิจกรรมในเว็บซึ่งเชื่อถือได้

อีกวิธีในการนําเว็บมายัง Android คือการใช้กิจกรรมในเว็บซึ่งเชื่อถือได้ (TWA)

TWA เป็นวิธีที่ดีที่สุดในการแสดงเนื้อหาเว็บของบุคคลที่หนึ่งแบบเต็มหน้าจอในแอปของคุณ และเป็นโซลูชันที่เหมาะสําหรับนักพัฒนาแอปที่ต้องการรวมเว็บแอปของตนเป็นแอปพลิเคชัน Android หรือใช้เว็บไซต์เป็นส่วนหนึ่งของแอป

โปรดทราบว่า TWA ฟังดูเหมือนว่าเกี่ยวข้องกับ PWA อย่างเคร่งครัด แต่ไม่ใช่ ได้ การใช้ TWA ช่วยให้คุณเผยแพร่เว็บแอปที่ติดตั้งได้ไปยัง Google Play ได้ แต่คุณยังสร้างกิจกรรมเดียวบนเว็บและรวมไว้ในแอป Android ได้ด้วย

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

ข้อดี 2 ข้อของการรวมเว็บแอปโดยใช้ TWA มีดังนี้

การเผยแพร่แอปใน Google Play ซึ่งช่วยให้แอปของคุณเข้าถึงระดับการมองเห็นและการจัดจำหน่ายของ Google Play การมีสิทธิ์เข้าถึง Play Billing API ซึ่งช่วยให้นักพัฒนาแอปจัดการการขายสินค้าดิจิทัลในแอปได้ ทำให้การตั้งค่าผลิตภัณฑ์ การขาย การสมัครใช้บริการ และอื่นๆ ทำได้ง่ายขึ้น การมอบสิทธิ์การแจ้งเตือนและการระบุตำแหน่งทางภูมิศาสตร์แก่แอป Android แทนเว็บไซต์

อ่านบทความนี้เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่ ContactsDirect ใช้ TWA เพื่อประโยชน์ของผู้ใช้และเพิ่มอัตรา Conversion เป็น 3 เท่า

บทสรุป

ดังที่คุณเห็น เรามีตัวเลือกต่างๆ มากมายสําหรับการฝังเนื้อหาเว็บลงในแอป และตัวเลือกทั้งหมดเหล่านี้ได้รับการปรับปรุงอย่างต่อเนื่อง