มีอะไรใหม่ใน 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 รองรับแท็บที่กำหนดเอง และหากเบราว์เซอร์เริ่มต้นไม่รองรับแท็บที่กำหนดเอง แอปเบราว์เซอร์จะเปิดขึ้นแทน

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

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

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

คุณเพียงแค่ต้องเชื่อมต่อกับบริการแท็บที่กำหนดเอง ส่งเซสชันไปยัง 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 กำลังพัฒนาประสบการณ์การใช้งานแท็บที่กำหนดเองแบบแสดงคู่กันใหม่สำหรับโหมดแนวนอนและอุปกรณ์หน้าจอขนาดใหญ่ เมื่อกำหนดความกว้างแท็บสูงสุดร่วมกับเบรกพอยท์ การใช้งานแท็บที่กำหนดเองจะสลับระหว่างการวางซ้อนของ Bottom Sheet และการใช้งานแบบแสดงคู่กันโดยอัตโนมัติ ฟีเจอร์นี้พร้อมใช้งานในเวอร์ชัน Canary แล้ว และจะเปิดตัวประมาณเดือนกรกฎาคม 2003 หากต้องการลองใช้ ให้ดูซอร์สโค้ดของแอปตัวอย่าง 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 เท่า

บทสรุป

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