ทำ PWA ให้กลายเป็นแอปแอนดรอยด์แบบง่าย ๆ ด้วย TWA — ตอนที่ 1 Introduction
มีเว็ปที่เป็น PWA อยู่แล้ว อยากจะทำให้เป็นแอปแอนดรอยด์? ใช้ TWA สิ จะได้ไม่ต้องง้อ Add to Home Screen อีกต่อไป
บทความในชุดเดียวกัน
บทความนี้เหมาะกับ
นักพัฒนาที่มีเว็ปที่รองรับ PWA อยู่แล้ว และต้องการทำแอปแอนดรอยด์ด้วยการเปิดเว็ปโดยใช้ TWA แทนการใช้ WebView
Progressive Web Apps
ในยุคนี้ที่เว็ปสามารถทำอะไรได้หลากหลายมากขึ้น แถมยังมี PWA ที่จะช่วยให้เว็ปแอป สามารถทำงานได้ใกล้เคียงกับแอปมือถือมากขึ้น สามารถติดตั้งไว้ในเครื่องและสามารถทำงานแบบ Offline ได้ จึงทำให้แอปบางตัวแทบจะไม่ต้องเขียน Native Mobile App เลย สามารถทำเป็นเว็ปแอปที่รองรับ PWA ก็ตอบโจทย์ในการใช้งานได้แล้ว
แต่การจะติดตั้งเว็ปแอปลงในเครื่องได้นั้น ผู้ใช้จะต้องเปิดหน้าเว็ปแล้วกด Add to Home Screen เท่านั้นถึงจะติดตั้งได้
แล้วถ้าอยากจะให้ผู้ใช้สามารถดาวน์โหลดจาก Google Play ได้ด้วยล่ะ?
เพราะยังมีผู้ใช้อีกจำนวนมากที่ไม่รู้จัก Add to Home Screen จึงทำให้โอกาสที่ผู้ใช้จะติดตั้งเว็ปแอปที่เป็น PWA ของเราน้อยกว่าที่ควรจะเป็น
เพื่อให้ผู้ใช้สามารถดาวน์โหลดและใช้งานเว็ปของเราจาก Google Play ได้ โดยที่ไม่ต้องลงมือเขียน Native Android App เองทั้งหมด วิธีที่นิยมที่สุดก็คือการใช้ WebView ของ Android เพื่อเปิดเว็ปนั่นเอง ก็จะได้แอปแอนดรอยด์แบบง่าย ๆ โดยที่ไม่ต้องเขียนโค้ดใหม่ให้เสียเวลา
แต่เส้นทางการใช้ WebView ไม่ได้สวยหรูอย่างที่คิด
ในความเป็นจริงนั้น WebView บนแอนดรอยด์นั้นมีข้อจำกัดและข้อเสียอยู่พอสมควร อีกทั้งยังไม่รองรับ PWA ในตัว จึงทำให้นักพัฒนาต้องเขียนโค้ดทั้งฝั่งเว็ปและแอนดรอยด์เพิ่ม เพื่อให้เว็ปสามารถทำงานบน WebView ได้อย่างถูกต้อง
นั่นก็เพราะว่า WebView != Chrome นั่นเอง จึงทำให้เว็ปของเราที่ทำงานได้ปกติบน Chrome แต่อาจจะมีปัญหาบน WebView ได้ และในบางปัญหาก็อาจจะแก้ได้ง่ายๆด้วยการเขียนเป็น Native Android App ซะงั้น
แล้วถ้าไม่ใช้ WebView จะให้ใช้วิธีไหนล่ะ?
Trusted Web Activity — วิธีที่จะทำให้เว็ปสามารถเปิดบนแอปแอนดรอยด์ได้เหมือนกับเปิดอยู่บน Chrome
Trusted Web Activity หรือเรียกย่อ ๆ ว่า TWA เป็นวิธีที่ทีมพัฒนาของ Google ออกแบบมาเพื่อช่วยให้นักพัฒนานำเว็ปที่เป็น PWA มาแสดงบนแอปแอนดรอยด์ได้อย่างง่ายดาย
โดย TWA ใช้เทคนิคเดียวกับ Chrome Custom Tabs (CCT) ซึ่งเป็นหนึ่งในความสามารถของ Chrome บนแอนดรอยด์ที่จะช่วยให้นักพัฒนาสามารถเปิดเว็ปบน Chrome จากข้างในแอปของตัวเอง
จุดเด่นของ TWA
เทียบเท่ากับการเปิดบน Chrome
เว็ปที่เปิดบน TWA จะเหมือนกับการเปิดบน Chrome ทั้งความสามารถและประสิทธิภาพ จึงทำให้นักพัฒนาเว็ปสามารถเรียกใช้งาน Chrome API ได้อย่างเต็มที่ และการแสดงผลก็เหมือนกับการเปิดบน Chrome เลย หมดปัญหา “ทำไมมันไม่เหมือนกับเปิดบน Chrome ล่ะ?”
รวมไปถึง Cookies และ Local Storage ที่เป็นตัวเดียวกับการเปิดเว็ปบน Chrome เลย จึงทำให้ผู้ใช้สามารถล็อกอินจากเว็ปบน Chrome ก็สามารถใช้งานต่อได้ทันทีบน TWA
แสดง Trusted Web แบบ Full Screen (ทำ Digital Asset Links)
โดยปกติแล้ว การแสดงเว็ปบน TWA จะมีการแสดง Title Bar เสมอ ซึ่งจะมีปุ่มปิดหน้าเว็ป, แสดง URL ของเว็ป และปุ่มเมนู
แต่ถ้าเป็น Trusted Web หรือเว็ปของเราที่ทำ Digital Asset Links คู่กับแอปไว้ TWA จะถือว่าเว็ปดังกล่าวเป็นเว็ปที่ยืนยันแล้ว
แต่ถ้าเว็ปของเราทำ Digital Asset Links ร่วมกับแอปไว้ TWA จะทำการซ่อน Title Bar ให้ทันที จึงทำให้เว็ปของเราสามารถแสดงแบบเต็มจอได้เลย
ซึ่งจะช่วยให้เว็ปที่เป็น PWA สามารถแสดงผลได้เต็มจอ และใช้งานได้เสมือนแอปแอนดรอยด์มากขึ้น
และถ้าเว็ปแอปสามารถ Redirect เพื่อเปิดเว็ปอื่น ๆ ได้ TWA ก็จะแสดง Title Bar ก็ต่อเมื่อเปิดเว็ปที่ไม่ได้ทำ Digital Asset Links เท่านั้น นั่นหมายความว่าถ้ากลับมาที่เว็ปแอปต่อ TWA ก็จะทำการซ่อน Title Bar ให้ทันที
รองรับ Splash Screen ในตัว
เพราะเว็ปที่เป็น PWA ก็ยังคงเป็น Web-based Content ที่ผู้ใช้ต้องดาวน์โหลดข้อมูล (อย่างน้อยก็ตอนเปิดใช้งานครั้งแรกสุด) และถ้าต้องแสดงหน้าจอขาว ๆ เพื่อรอจนกว่าจะดาวน์โหลดข้อมูลเสร็จ ก็คงไม่ดีต่อผู้ใช้ซักเท่าไร
ดังนั้น TWA จึงมี Splash Screen ที่เปิดให้กำหนดภาพไอคอนและสีพื้นหลังได้ตามใจชอบ โดยที่ Splash Screen จะทำงานเองโดยอัตโนมัติ เวลาที่ผู้ใช้เปิดแอปขึ้นมาแล้วต้องดาวน์โหลดข้อมูลก่อน ก็จะแสดงขึ้นมาให้ทันที
Fallback เมื่ออุปกรณ์แอนดรอยด์ของผู้ใช้ไม่รองรับ TWA
ถ้าแอปถูกติดตั้งและเปิดใช้งานบนเครื่องที่ไม่รองรับ TWA หรือแม้กระทั่งไม่มี Chrome อยู่ในเครื่อง ก็จะรองรับ Fallback ให้ในตัว โดยที่นักพัฒนาไม่ต้องเขียนเช็คเองว่าจะจัดการยังไง
โดย Fallback ใน TWA จะมีให้เลือก 2 แบบด้วยกัน คือ
- CCT Fallback (Default) — ทำการเปิดเว็ปบน Chrome Custom Tabs แทน และถ้าไม่รองรับ CCT เหมือนกัน ก็จะเปิด Default Web Browser ของเครื่องให้แทน
- WebView Fallback — ทำการเปิดเว็ปบน WebView แทน (ซึ่งผมไม่แนะนำให้ใช้แบบนี้)
รองรับ Custom Notification
ในกรณีที่เว็ปแอปมีการแสดง Notification และต้องการ Custom รูปแบบการแสดงผลของ Notification บนแอนดรอยด์ TWA จะมี Delegation Service เพื่อทำ Custom Notification
โดยการทำ Custom Notification จะต้องเขียนโค้ดที่ฝั่ง Native Android App
เงื่อนไขสำหรับแอปที่จะใช้ TWA เพื่อเผยแพร่บน Google Play
แน่นอนว่า TWA จะเหมาะกับเว็ปแอปที่เป็น PWA นั่นก็เพราะว่าเงื่อนไขสำหรับแอปแอนดรอยด์ที่มีการใช้ TWA เพื่อแสดงเว็ปแอปและสามารถเผยแพร่บน Google Play ได้นั้นจะต้องผ่านการทดสอบบน Lighthouse ดังนี้
- ได้ PWA Badge บน Lighthouse
- ได้ Performance Score บน Lighthouse มากกว่า 80 คะแนนขึ้นไป
หรือก็คือเงื่อนไขเดียวกับ Add to Home Screen บน Chrome นั่นเอง
เพิ่มโอกาสให้ผู้ใช้สามารถเข้าถึงเว็ปแอปของคุณให้มากขึ้นด้วย TWA
เว็ปแอปที่รองรับ PWA จะช่วยมอบประสบการณ์ในการใช้งานให้กับผู้ใช้เหมือนกับว่ากำลังใช้งานแอปแอนดรอยด์อยู่ ลบความเชื่อที่ว่าเว็ปแอปไม่สามารถเทียบเท่า Native Android App ได้ เพราะต้องยอมรับว่าการทำงานของแอปแอนดรอยด์บางตัวนั้นสามารถทดแทนด้วยเว็ปได้
คงจะดีไม่น้อยถ้าทำเว็ปแอปให้รองรับ PWA แล้วสามารถใช้งานผ่านแอปแอนดรอยด์ได้ด้วย ซึ่งจะทำให้ผู้ใช้สามารถค้นหาและดาวน์โหลดจาก Google Play ได้
และนั่นก็คือที่มาของ TWA หรือ Trusted Web Activity จากความสามารถของ Chrome ที่จะช่วยให้เว็ปแอปของเราสามารถเปิดผ่านแอปแอนดรอยด์ได้อย่างง่ายดายนั่นเอง
สำหรับบทความนี้ก็ขอหยิบเรื่องราวของ TWA มาแนะนำให้รู้จักกันก่อน ส่วนการสร้างแอปแอนดรอยด์โดยใช้ TWA เพื่อเปิดเว็ปแอปของเราที่เป็น PWA มีขั้นตอนยังไงบ้าง โปรดติดตามอ่านกันได้ในบทความหน้านะครับ
ถ้าชอบบทความแบบนี้ก็อย่าลืมกดติดตาม GDG Thailand ได้ทั้งใน Medium และ Facebook Page นะครับ 😉
