มีเหตุผลหลายประการที่นักพัฒนาจะนำเว็บมาไว้ใน Android เช่น การใช้วิดเจ็ตเว็บซ้ำในแอป Android การใช้เนื้อหาของบุคคลที่หนึ่งหรือเนื้อหาของบุคคลที่สาม ไปจนถึงการนำทั้งเว็บแอปมาไว้ในแพลตฟอร์มด้วย ไม่ว่าจะเป็นกรณีการใช้งานใด Android ก็มีเครื่องมือมากมายที่จะช่วยให้ทุกอย่างเป็นไปได้
อัปเดตล่าสุดของเครื่องมือเหล่านี้มีดังนี้ เช่น
- ปรับปรุงความเป็นส่วนตัวและการรองรับหน้าจอขนาดใหญ่ได้ดีขึ้น เช่น การรองรับการลากและวางรูปภาพใน WebView
- ตอนนี้แท็บที่กำหนดเองรองรับแท็บที่กำหนดเองบางส่วนแล้ว
- ฟีเจอร์ที่ผสานรวมสําหรับ PWA เช่น RicherInstall 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 แบบที่คุณต้องดำเนินการ
ตอนนี้ WebView รองรับช่วงทดลองใช้ Chrome จากต้นทางแล้ว ช่วงทดลองใช้จากต้นทางช่วยให้คุณมีสิทธิ์เข้าถึงฟีเจอร์ใหม่หรือฟีเจอร์ทดลองใน Chrome คุณสามารถใช้คำแนะนำเหล่านี้เพื่อลองใช้ฟีเจอร์ใหม่ก่อนที่ฟีเจอร์ดังกล่าวจะเปิดให้บริการสำหรับทุกคน ก่อนหน้านี้ช่วงทดลองใช้จากต้นทางใช้งานได้ใน Chrome บนเดสก์ท็อปและอุปกรณ์เคลื่อนที่เท่านั้น แต่ตั้งแต่ Chrome M110 ช่วงทดลองใช้จากต้นทางจะทำงานใน WebView ได้เช่นกัน
และตอนนี้การติดตั้ง 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 ภายใต้ตัวเลือกสำหรับนักพัฒนาซอฟต์แวร์
เครื่องมือ Jetpack JavaScript
บางครั้งคุณอาจต้องเรียกใช้ JavaScript ในแอปโดยไม่ต้องแสดงเนื้อหาใดๆ ในเว็บ เช่น เมื่อแชร์ตรรกะทางธุรกิจในเว็บและแอปบนอุปกรณ์เคลื่อนที่ เราได้เปิดตัวเครื่องมือ JetPack JavaScript ใหม่รุ่นอัลฟ่าเมื่อปีที่แล้วเพื่อให้จัดการได้ง่ายขึ้น ไลบรารีนี้ใช้เครื่องมือ JavaScript ของ Chrome V8 และช่วยให้แอปพลิเคชันของคุณประเมินโค้ด 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 กำลังพัฒนาฟีเจอร์ "แท็บที่กำหนดเอง" แบบใหม่ที่อยู่เคียงข้างกันสำหรับโหมดแนวนอนและอุปกรณ์ที่มีหน้าจอขนาดใหญ่ การกำหนดความกว้างสูงสุดของแท็บร่วมกับเบรกพอยท์จะทำให้ประสบการณ์การใช้งานแท็บที่กำหนดเองจะสลับระหว่างการวางซ้อนในชีตด้านล่างและประสบการณ์ที่แสดงข้างกันโดยอัตโนมัติ ฟีเจอร์นี้พร้อมใช้งานแล้วใน Canary และจะเปิดตัวประมาณเดือนกรกฎาคม 2003 หากต้องการลองใช้ โปรดดูซอร์สโค้ดของแอปตัวอย่างแท็บที่กำหนดเองของ Chromium
การวัดสัญญาณการมีส่วนร่วม
การอัปเดตใหญ่ครั้งที่ 2 ของแท็บที่กำหนดเองคือการวัดการมีส่วนร่วมของผู้ใช้เฉพาะเซสชัน หากแอปของคุณแสดงเนื้อหาแก่ผู้ใช้เป็นประจำ โดยใส่ลิงก์ต่างๆ เช่น ในฟีดข่าว คงจะดีไม่น้อยหากคุณบอกได้ว่าลิงก์ใดที่ผู้ใช้เห็นว่ามีคุณค่าและลิงก์ใด ข้อมูลนี้จะมีประโยชน์มากในการจัดลำดับความสำคัญของลิงก์ที่จะแสดงให้ผู้ใช้เห็น
ทีม Chrome ได้เพิ่มระดับการเข้าถึงเมตริกเฉพาะเซสชันลงในแท็บที่กำหนดเองของ Chrome นอกจากระยะเวลาที่ผู้ใช้อยู่ในหน้าเว็บหนึ่งๆ แล้ว ตอนนี้คุณยังสามารถดูระยะทางในการเลื่อน ทิศทางการเลื่อน และการมีส่วนร่วมโดยรวมกับเนื้อหาเว็บได้ด้วย
สัญญาณการมีส่วนร่วมใช้ได้ตั้งแต่ Chrome 114 เป็นต้นไป และต้องใช้ไลบรารีการสนับสนุนของ androidx.browser:browser:1.6.0-alpha01 ขึ้นไป ดูข้อมูลเพิ่มเติมได้ในคู่มือการเริ่มต้นใช้งานสัญญาณการมีส่วนร่วม
PWA
นอกจากนี้ยังมีการอัปเดตใน PWA ซึ่งเป็นชุดเทคโนโลยีที่ช่วยให้สร้างประสบการณ์การใช้งานแบบแอป ซึ่งสร้างขึ้นและใช้งานในเว็บได้
การใช้ PWA ใน Android จะทำให้เว็บแอปติดตั้งได้ โดยแอปจะอยู่บนแพลตฟอร์มอื่นๆ, ในหน้าจอหลัก, Launcher, การตั้งค่า และแพลตฟอร์มอื่นๆ
ฟีเจอร์ของ PWA สร้างขึ้นตามมาตรฐานเว็บ โดยมุ่งเน้นที่ความเข้ากันได้แบบข้ามแพลตฟอร์ม ทำให้นักพัฒนาซอฟต์แวร์มีเครื่องมือในการสร้างเว็บแอปเพียงครั้งเดียว และอนุญาตให้ผู้ใช้ติดตั้งแอปในอุปกรณ์ใดก็ตามที่เลือก การสร้างเว็บแอปซึ่งติดตั้งได้ไม่ได้หมายความว่าคุณจะมีแอป Android ที่มาพร้อมเครื่องไม่ได้หรือไม่ควร แต่ก็เป็นอีกทางเลือกหนึ่งในการนำเว็บมาสู่ Android
มาดูฟีเจอร์ 2-3 อย่างที่ทำให้เว็บแอปแบบติดตั้งได้รู้สึกเหมือนอยู่บ้านใน Android กัน
เราต้องการส่งเสริมให้ผู้ใช้ติดตั้งเว็บไซต์ที่ตนสนใจที่สุด ขั้นตอนแรกคือการนำตัวแฮนเดิลการดึง Service Worker ออกตามความต้องการสำหรับการติดตั้งใน Android และ Chrome นอกจากนี้ Chrome จะข้ามการเริ่มต้น Service Worker หากตัวแฮนเดิลการดึงข้อมูลว่างเปล่า Chrome จะทำการทดสอบเพื่อขยายการเข้าถึงการติดตั้งให้กับผู้ใช้ คอยสังเกตผู้ชมเหล่านั้นและโปรดแสดงความคิดเห็น
ข้อกำหนดของ Service Worker มีไว้สำหรับนักพัฒนาแอปเพื่อสร้างประสบการณ์ของผู้ใช้ที่สอดคล้องกับแอป Android อื่นๆ อาจใช้เพื่อสร้างหน้าเว็บที่แจ้งผู้ใช้ว่าใช้แอปขณะออฟไลน์ไม่ได้
เราตระหนักดีว่าเราสามารถแบ่งเบาภาระงานสำหรับนักพัฒนาซอฟต์แวร์ และดูแลให้แอปเหล่านี้มอบประสบการณ์การใช้งานที่ดีตั้งแต่เริ่มต้น นั่นเป็นเหตุผลที่ Chrome เพิ่มประสบการณ์การใช้งานออฟไลน์เริ่มต้น ซึ่งจะแสดงหน้าจอที่มีไอคอนของแอปแก่ผู้ใช้ เพื่อให้ผู้ใช้ทราบว่าตนออฟไลน์อยู่โดยที่นักพัฒนาแอปไม่ต้องดำเนินการใดๆ เพิ่มเติม
อย่างไรก็ตาม API ของ Service Worker ก็ยังคงพร้อมใช้งานเพื่อสร้างประสบการณ์แบบออฟไลน์ที่กำหนดเองและใช้ฟีเจอร์อื่นๆ เช่น การแคชเพื่อปรับปรุงประสิทธิภาพได้
ฟีเจอร์อื่นๆ บางอย่างที่ช่วยมอบประสบการณ์การใช้งานเว็บแอปที่มีประสิทธิภาพยิ่งขึ้นใน Android รวมถึง UI การติดตั้งที่สมบูรณ์ยิ่งขึ้น การเพิ่มช่อง description และ screenshots ลงในไฟล์ Manifest ของเว็บจะทำให้ผู้ใช้ได้รับประสบการณ์การติดตั้งที่ใกล้เคียงกับที่ App Store แสดงอยู่มากยิ่งขึ้นเพื่ออธิบายแอปของคุณ
นอกจากนี้เรายังมีทางลัดอีกด้วย การเพิ่มอาร์เรย์ชื่อ shortcuts ซึ่งอธิบายชุดการดำเนินการด่วนที่ผู้ใช้ทำในแอปเป็นประจำ จะช่วยให้ผู้ใช้เข้าถึงการดำเนินการเหล่านี้ได้โดยกดไอคอนแอปค้างไว้
การใช้ API ของการแชร์เว็บและเป้าหมายการแชร์เว็บทำให้แอปของคุณโต้ตอบกับแอปอื่นๆ ได้ เช่น แอปแพลตฟอร์มอื่นๆ โดยแอปของคุณจะเป็นตัวเลือกในชีตการแชร์ รวมถึงสามารถแชร์และดูรูปภาพ ข้อความ และไฟล์อื่นๆ ได้
คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่ธุรกิจต่างๆ ใช้ประโยชน์จากเทคโนโลยีเหล่านี้ในงาน I/O ที่ชื่อว่า "The Web: Your เป็นแพลตฟอร์มเพื่อการเติบโต"
กิจกรรมบนเว็บที่เชื่อถือได้
อีกวิธีหนึ่งในการนำเว็บเข้าสู่ Android คือการใช้กิจกรรมบนเว็บที่เชื่อถือได้ (TWA)
TWA เป็นวิธีที่ดีที่สุดในการแสดงเนื้อหาเว็บของบุคคลที่หนึ่งแบบเต็มหน้าจอในแอป โดยเป็นโซลูชันที่เหมาะสำหรับนักพัฒนาแอปที่ต้องการรวมเว็บแอปเป็นแอปพลิเคชัน Android หรือใช้เว็บไซต์ของตนเป็นส่วนหนึ่งของแอป
โปรดทราบว่า TWA ดูเหมือนจะเกี่ยวข้องกับ PWA อย่างมาก แต่ไม่เกี่ยวข้อง ได้ เมื่อใช้ TWA คุณสามารถเผยแพร่เว็บแอปที่ติดตั้งได้ไปยัง Google Play ได้ แต่คุณสามารถสร้างกิจกรรมรายการเดียวบนเว็บและรวมไว้ในแอป Android ได้ด้วย
กิจกรรมบนเว็บที่เชื่อถือได้จะแสดงผลโดยเบราว์เซอร์ของผู้ใช้ในลักษณะเดียวกับที่ผู้ใช้เห็นในเบราว์เซอร์ ยกเว้นกรณีที่เรียกใช้แบบเต็มหน้าจอและไม่แสดงแถบ URL ซึ่งหมายความว่ารองรับฟีเจอร์ของแพลตฟอร์มเว็บและ API ทั้งหมดที่เบราว์เซอร์ขับเคลื่อน
ข้อดีของการรวมเว็บแอปโดยใช้ TWA มีดังนี้
การเผยแพร่ไปยัง Google Play ซึ่งทำให้แอปมีสิทธิ์เข้าถึงระดับการเข้าถึงและการเผยแพร่ของ Google Play มีสิทธิ์เข้าถึง Play Billing API ซึ่งช่วยให้นักพัฒนาแอปจัดการการขายสินค้าดิจิทัลในแอปของตนได้ ซึ่งทำให้ตั้งค่าผลิตภัณฑ์ การขาย การสมัครใช้บริการ และอื่นๆ ได้ง่ายขึ้น มอบสิทธิ์การแจ้งเตือนและสิทธิ์เข้าถึงตำแหน่งทางภูมิศาสตร์ให้แอป Android แทนเว็บไซต์
อ่านบทความนี้เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่ ContactsDirect ใช้ TWA ให้เกิดประโยชน์ต่อผู้ใช้และเพิ่มอัตรา Conversion เป็น 3 เท่า
บทสรุป
ดังที่คุณได้เห็น มีตัวเลือกต่างๆ มากมายสำหรับการฝังเนื้อหาเว็บลงในแอปของคุณ และตัวเลือกเหล่านี้ได้รับการปรับปรุงอย่างต่อเนื่อง