เริ่ม 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 ดูคำแนะนำเกี่ยวกับการรับมือกับสถานการณ์เหล่านั้นในผู้ปฏิบัติงานบริการ
แอปพลิเคชันต้องเป็นไปตามเกณฑ์เพิ่มเติมสำหรับ Android โดยเฉพาะ เช่น การปฏิบัติตามนโยบาย
เครื่องมือ
นักพัฒนาเว็บที่ต้องการใช้ประโยชน์จากกิจกรรมบนเว็บที่เชื่อถือได้ไม่จำเป็นต้องเรียนรู้เทคโนโลยีหรือ API ใหม่เพื่อเปลี่ยน PWA เป็นแอปพลิเคชัน Android Bubblewrap และ PWABuilder ร่วมกันเป็นเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในรูปแบบไลบรารี อินเทอร์เฟซบรรทัดคำสั่ง (CLI) และอินเทอร์เฟซผู้ใช้แบบกราฟิก (GUI)
บับเบิลกันกระแทก
โปรเจ็กต์ Bubblewrap จะสร้างแอป Android ในรูปแบบของไลบรารี NodeJS และ Command Line Interface (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 โดยใช้ Progressive Web App ของตนโดยไม่ได้รับอนุญาต เพื่อป้องกันไม่ให้เกิดปัญหานี้ แอปพลิเคชัน 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 เพื่อตรวจสอบว่าเป็นไปตามเกณฑ์คุณภาพหรือไม่
จากนั้นใช้ Bubblewrap หรือ PWABuilder เพื่อสร้างแอปพลิเคชัน Android อัปโหลดแอปพลิเคชันไปยังช่องทดสอบแบบปิดบน Play Store และจับคู่กับ PWA โดยใช้ เครื่องมือลิงก์ทรัพย์สินของ Peter
ขั้นตอนสุดท้าย ให้ย้ายแอปพลิเคชันของคุณจากช่องทดสอบแบบปิดไปยังเวอร์ชันที่ใช้งานจริง