เริ่ม PWA ในแอป Android
Progressive Web App (PWA) คือเว็บแอปพลิเคชันที่ใช้ฟีเจอร์ที่คล้ายกับแอปเพื่อสร้างประสบการณ์การใช้งานที่มีคุณภาพสูง รวดเร็ว เชื่อถือได้ และน่าสนใจ
เว็บมีความสามารถในการเข้าถึงที่ยอดเยี่ยมและมอบวิธีที่มีประสิทธิภาพให้ผู้ใช้ค้นพบประสบการณ์ใหม่ๆ แต่ผู้ใช้ก็คุ้นเคยกับการค้นหาแอปพลิเคชันใน Store ของระบบปฏิบัติการด้วย ในหลายกรณี ผู้ใช้เหล่านั้นคุ้นเคยกับแบรนด์หรือบริการที่ต้องการอยู่แล้วและมีเจตนาสูง ซึ่งส่งผลให้เมตริกการมีส่วนร่วมสูงกว่าค่าเฉลี่ย
Play Store เป็นร้านค้าสำหรับแอป Android และนักพัฒนาแอปมักต้องการเปิด Progressive Web App จากแอป Android
กิจกรรมบนเว็บที่เชื่อถือได้คือมาตรฐานแบบเปิดที่ช่วยให้เบราว์เซอร์มีคอนเทนเนอร์ที่เข้ากันได้กับแพลตฟอร์มเว็บอย่างเต็มรูปแบบซึ่งแสดงผล PWA ในแอป Android ฟีเจอร์นี้พร้อมใช้งานใน Chrome และอยู่ระหว่างการพัฒนาใน Firefox Nightly
โซลูชันที่มีอยู่มีข้อจํากัด
คุณสามารถรวมประสบการณ์การใช้งานเว็บไว้ในแอป Android ได้โดยการใช้เทคโนโลยีอย่าง Android WebView หรือเฟรมเวิร์กอย่าง Cordova อยู่แล้ว
ข้อจำกัดของ Android WebView คือไม่ได้มีไว้เพื่อแทนที่เบราว์เซอร์ Android WebView เป็นเครื่องมือสําหรับนักพัฒนาแอปเพื่อใช้ UI ของเว็บในแอป Android และไม่ได้ให้สิทธิ์เข้าถึงฟีเจอร์แพลตฟอร์มเว็บสมัยใหม่อย่างสมบูรณ์ เช่น เครื่องมือเลือกรายชื่อติดต่อหรือระบบไฟล์และอื่นๆ
Cordova ได้รับการออกแบบมาเพื่อเสริมข้อบกพร่องของ WebView แต่ API จะจำกัดอยู่ในสภาพแวดล้อม Cordova ซึ่งหมายความว่าคุณต้องดูแลรักษาโค้ดเบสเพิ่มเติมเพื่อใช้ Cordova API สำหรับแอป Android แยกจาก PWA ในเว็บแบบเปิด
นอกจากนี้ ความสามารถในการค้นพบฟีเจอร์มักไม่ทำงานตามที่คาดไว้เสมอไป และปัญหาความเข้ากันได้ระหว่างเวอร์ชัน Android กับ OEM ก็อาจทำให้เกิดปัญหาได้เช่นกัน เมื่อใช้โซลูชันใดโซลูชันหนึ่ง นักพัฒนาซอฟต์แวร์จะต้องทำกระบวนการรับประกันคุณภาพเพิ่มเติมและเสียค่าใช้จ่ายเพิ่มเติมในการพัฒนาเพื่อตรวจหาและสร้างวิธีแก้ปัญหาชั่วคราว
กิจกรรมในเว็บซึ่งเชื่อถือได้คือคอนเทนเนอร์ใหม่สำหรับเว็บแอปใน Android
ตอนนี้นักพัฒนาแอปสามารถใช้ Trusted Web Activity เป็นคอนเทนเนอร์เพื่อรวม PWA ไว้ในกิจกรรมเริ่มต้นสําหรับแอป Android ได้แล้ว เทคโนโลยีนี้ใช้ประโยชน์จากเบราว์เซอร์เพื่อแสดงผล PWA แบบเต็มหน้าจอ ซึ่งช่วยให้มั่นใจได้ว่า Trusted Web Activity จะเข้ากันได้กับฟีเจอร์และ API ของแพลตฟอร์มเว็บเช่นเดียวกับเบราว์เซอร์พื้นฐาน นอกจากนี้ยังมียูทิลิตีโอเพนซอร์สที่ช่วยให้การติดตั้งใช้งานแอป Android โดยใช้กิจกรรมบนเว็บที่เชื่อถือได้ง่ายขึ้น
ข้อดีอีกอย่างหนึ่งที่โซลูชันอื่นๆ ไม่มีคือคอนเทนเนอร์จะแชร์พื้นที่เก็บข้อมูลกับเบราว์เซอร์ ระบบจะแชร์สถานะการเข้าสู่ระบบและค่ากําหนดของผู้ใช้อย่างราบรื่นในประสบการณ์การใช้งานต่างๆ
ความเข้ากันได้กับเบราว์เซอร์
ฟีเจอร์นี้พร้อมใช้งานใน Chrome ตั้งแต่เวอร์ชัน 75 ส่วน Firefox นำมาใช้ในเวอร์ชัน Nightly
เกณฑ์คุณภาพ
นักพัฒนาเว็บควรใช้กิจกรรมบนเว็บที่เชื่อถือได้เมื่อต้องการรวมเนื้อหาเว็บไว้ในแอป Android
เนื้อหาเว็บในกิจกรรมในเว็บซึ่งเชื่อถือได้ต้องเป็นไปตามเกณฑ์ความสามารถในการติดตั้ง PWA
นอกจากนี้ Chrome 86 ยังมีการเปลี่ยนแปลงที่ถือว่าการไม่จัดการสถานการณ์ต่อไปนี้เป็นการขัดข้อง เพื่อให้การทำงานตรงกับลักษณะการทำงานที่ผู้ใช้คาดหวังจากแอปพลิเคชัน Android
- ยืนยันลิงก์เนื้อหาดิจิทัลในการเปิดใช้งานแอปพลิเคชันไม่สำเร็จ
- ส่งคืน HTTP 200 สําหรับคําขอทรัพยากรเครือข่ายแบบออฟไลน์ไม่สําเร็จ
- คำขอการนําทางที่แสดงข้อผิดพลาด HTTP 404 หรือ 5xx"
เมื่อสถานการณ์ใดสถานการณ์หนึ่งเกิดขึ้นในกิจกรรมบนเว็บที่เชื่อถือได้ ก็จะทําให้แอปพลิเคชัน Android ขัดข้องซึ่งผู้ใช้มองเห็น ดูคําแนะนําเกี่ยวกับการจัดการสถานการณ์เหล่านั้นใน Service Worker
แอปพลิเคชันต้องเป็นไปตามเกณฑ์เพิ่มเติมสำหรับ Android โดยเฉพาะด้วย เช่น การปฏิบัติตามนโยบาย
เครื่องมือ
นักพัฒนาเว็บที่ต้องการใช้ประโยชน์จากกิจกรรมบนเว็บที่เชื่อถือได้ไม่จำเป็นต้องเรียนรู้เทคโนโลยีหรือ API ใหม่เพื่อเปลี่ยน PWA เป็นแอปพลิเคชัน Android Bubblewrap และ PWABuilder ร่วมกันเป็นเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในรูปแบบไลบรารี อินเทอร์เฟซบรรทัดคำสั่ง (CLI) และอินเทอร์เฟซผู้ใช้แบบกราฟิก (GUI)
บับเบิลกันกระแทก
โปรเจ็กต์ Bubblewrap จะสร้างแอป Android ในรูปแบบไลบรารี NodeJS และอินเทอร์เฟซบรรทัดคำสั่ง (CLI)
คุณสามารถเริ่มต้นใช้งานโปรเจ็กต์ใหม่ได้โดยเรียกใช้เครื่องมือและส่ง URL ของ Web Manifest ดังนี้
npx @bubblewrap/cli init --manifest=https://pwa-directory.appspot.com/manifest.json
เครื่องมือนี้ยังสร้างโปรเจ็กต์ได้ด้วย และการรันคำสั่งด้านล่างจะแสดงผลแอปพลิเคชัน Android ที่พร้อมอัปโหลดไปยัง Play Store
npx @bubblewrap/cli build
หลังจากเรียกใช้คําสั่งนี้ ไฟล์ชื่อ app-release-signed.apk จะปรากฏในไดเรกทอรีรูทของโปรเจ็กต์ ซึ่งเป็นไฟล์ที่จะอัปโหลดไปยัง Play Store
PWABuilder
PWABuilder ช่วยให้นักพัฒนาซอฟต์แวร์เปลี่ยนเว็บไซต์ที่มีอยู่เป็น Progressive Web App ได้ นอกจากนี้ ยังผสานรวมกับ Bubblewrap เพื่อให้อินเทอร์เฟซ GUI สำหรับรวม PWA เหล่านั้นไว้ในแอป Android อีกด้วย ทีม PWABuilder ได้จัดทำบล็อกโพสต์ที่ยอดเยี่ยมเกี่ยวกับวิธีสร้างแอปพลิเคชัน Android โดยใช้เครื่องมือนี้
การยืนยันความเป็นเจ้าของ PWA ในแอป Android
นักพัฒนาแอปที่สร้าง Progressive Web App ที่ยอดเยี่ยมคงไม่อยากให้นักพัฒนาแอปรายอื่นสร้างแอป Android โดยใช้แอปของตนโดยไม่ได้รับอนุญาต เพื่อป้องกันไม่ให้เกิดปัญหานี้ แอปพลิเคชัน Android ต้องจับคู่กับ Progressive Web App โดยใช้เครื่องมือที่เรียกว่า Digital Asset Links
Bubblewrap และ PWABuilder จะจัดการการกําหนดค่าที่จําเป็นในแอปพลิเคชัน Android แต่ยังมีขั้นตอนสุดท้ายที่เหลืออยู่ ซึ่งก็คือการเพิ่มไฟล์ assetlinks.json ลงใน PWA
หากต้องการสร้างไฟล์นี้ นักพัฒนาแอปต้องมีลายเซ็น SHA-256 ของคีย์ที่ใช้ลงนาม APK ที่ผู้ใช้ดาวน์โหลด
คีย์สามารถสร้างได้หลายวิธี และวิธีที่ง่ายที่สุดในการค้นหาว่าคีย์ใดที่เซ็น APK ที่แสดงต่อผู้ใช้ปลายทางคือการดาวน์โหลดจาก Play Store โดยตรง
เพื่อหลีกเลี่ยงการแสดงแอปพลิเคชันที่ใช้งานไม่ได้ต่อผู้ใช้ ให้ติดตั้งแอปพลิเคชันในแชแนลการทดสอบแบบปิด ติดตั้งลงในอุปกรณ์ทดสอบ จากนั้นใช้เครื่องมือลิงก์ชิ้นงานของ Peter เพื่อสร้างไฟล์ assetlinks.json ที่ถูกต้องสำหรับแอป ตรวจสอบว่าไฟล์ assetlinks.json ที่สร้างขึ้นพร้อมใช้งานที่ /.well-known/assetlinks.json ในโดเมนที่ตรวจสอบ
ขั้นตอนถัดไป
Progressive Web App คือประสบการณ์การใช้งานเว็บที่มีคุณภาพสูง กิจกรรมในเว็บซึ่งเชื่อถือได้เป็นวิธีใหม่ในการเปิดประสบการณ์การใช้งานคุณภาพสูงเหล่านั้นจากแอป Android เมื่อแอปเป็นไปตามเกณฑ์คุณภาพขั้นต่ำ
หากเพิ่งเริ่มต้นใช้งาน Progressive Web App โปรดอ่านคำแนะนำเกี่ยวกับวิธีสร้าง PWA ที่ยอดเยี่ยม สําหรับนักพัฒนาแอปที่มี PWA อยู่แล้ว ให้ใช้ Lighthouse เพื่อยืนยันว่า PWA เป็นไปตามเกณฑ์คุณภาพหรือไม่
จากนั้นใช้ Bubblewrap หรือ PWABuilder เพื่อสร้างแอปพลิเคชัน Android, อัปโหลดแอปพลิเคชันไปยังแชแนลทดสอบแบบปิดใน Play Store และจับคู่กับ PWA โดยใช้เครื่องมือลิงก์ชิ้นงานของ Peter
สุดท้าย ให้ย้ายแอปพลิเคชันจากแชแนลทดสอบแบบปิดไปยังเวอร์ชันที่ใช้งานจริง