เริ่ม PWA ในแอป Android
Progressive Web App (PWA) คือเว็บแอปพลิเคชันที่ใช้ฟีเจอร์ที่คล้ายกับแอปเพื่อสร้างประสบการณ์การใช้งานคุณภาพสูงที่รวดเร็ว เชื่อถือได้ และน่าสนใจ
เว็บมีการเข้าถึงที่น่าทึ่งและมอบวิธีที่มีประสิทธิภาพให้ผู้ใช้ได้ค้นพบประสบการณ์ใหม่ๆ แต่ผู้ใช้ก็คุ้นเคยกับการค้นหาแอปพลิเคชันใน Store ของระบบปฏิบัติการด้วยเช่นกัน ในหลายๆ กรณี ผู้ใช้เหล่านั้นคุ้นเคยกับแบรนด์หรือบริการที่กำลังค้นหาอยู่แล้ว และมีความตั้งใจในระดับสูง ซึ่งส่งผลให้เมตริกการมีส่วนร่วมสูงกว่าค่าเฉลี่ย
Play Store เป็น Store สำหรับแอป Android และนักพัฒนามักต้องการเปิด Progressive Web App จากแอป Android ของตน
กิจกรรมในเว็บซึ่งเชื่อถือได้เป็นมาตรฐานแบบเปิดที่ช่วยให้เบราว์เซอร์มีคอนเทนเนอร์ที่เข้ากันได้กับแพลตฟอร์มเว็บอย่างสมบูรณ์ ซึ่งจะแสดงผล PWA ภายในแอป Android ฟีเจอร์นี้พร้อมใช้งานใน Chrome และอยู่ระหว่างการพัฒนาใน Firefox Nightly
โซลูชันที่มีอยู่มีข้อจำกัด
คุณสามารถรวมประสบการณ์การใช้งานเว็บไว้ในแอป Android ได้เสมอ โดยใช้เทคโนโลยีอย่าง Android WebView หรือเฟรมเวิร์กอย่าง Cordova
ข้อจำกัดของ Android WebView คือไม่ได้ออกแบบมาเพื่อใช้แทนเบราว์เซอร์ WebView ของ Android เป็นเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เพื่อใช้ UI ของเว็บในแอป Android และไม่ได้ให้สิทธิ์เข้าถึงฟีเจอร์แพลตฟอร์มเว็บสมัยใหม่ เช่น เครื่องมือเลือกรายชื่อติดต่อหรือระบบไฟล์และอื่นๆ อย่างสมบูรณ์
Cordova ได้รับการออกแบบมาเพื่อเสริมข้อบกพร่องของ WebView แต่ API จะถูกจำกัดไว้เฉพาะในสภาพแวดล้อม Cordova ซึ่งหมายความว่าคุณต้องดูแลรักษาฐานของโค้ดเพิ่มเติมเพื่อใช้ Cordova API สำหรับแอป Android แยกต่างหากจาก PWA ในเว็บแบบเปิด
นอกจากนี้ การค้นพบฟีเจอร์มักไม่ทำงานตามที่คาดไว้เสมอไป และปัญหาความเข้ากันได้ระหว่าง Android เวอร์ชันต่างๆ กับ OEM ก็อาจเป็นปัญหาได้เช่นกัน เมื่อใช้โซลูชันเหล่านั้น นักพัฒนาแอปต้องมีกระบวนการประกันคุณภาพเพิ่มเติมและมีค่าใช้จ่ายในการพัฒนาเพิ่มเติมเพื่อตรวจหาและสร้างวิธีแก้ปัญหาชั่วคราว
กิจกรรมในเว็บซึ่งเชื่อถือได้เป็นคอนเทนเนอร์ใหม่สำหรับเว็บแอปบน Android
ตอนนี้นักพัฒนาแอปสามารถใช้กิจกรรมในเว็บซึ่งเชื่อถือได้เป็นคอนเทนเนอร์เพื่อรวม PWA เป็นกิจกรรมการเปิดตัวสำหรับแอป Android เทคโนโลยีนี้ใช้ประโยชน์จากเบราว์เซอร์เพื่อแสดงผล PWA แบบเต็มหน้าจอ เพื่อให้มั่นใจว่ากิจกรรมในเว็บซึ่งเชื่อถือได้มีความเข้ากันได้กับฟีเจอร์และ API ของแพลตฟอร์มเว็บที่เบราว์เซอร์ที่ใช้มี นอกจากนี้ยังมีโปรแกรมอรรถประโยชน์โอเพนซอร์สที่ช่วยให้การติดตั้งใช้งานแอป Android โดยใช้กิจกรรมในเว็บซึ่งเชื่อถือได้ง่ายยิ่งขึ้น
ข้อดีอีกอย่างที่ไม่มีในโซลูชันอื่นๆ คือคอนเทนเนอร์จะแชร์พื้นที่เก็บข้อมูลกับเบราว์เซอร์ ระบบจะแชร์สถานะการเข้าสู่ระบบและค่ากำหนดของผู้ใช้ในประสบการณ์การใช้งานต่างๆ ได้อย่างราบรื่น
ความเข้ากันได้กับเบราว์เซอร์
ฟีเจอร์นี้พร้อมใช้งานใน Chrome ตั้งแต่เวอร์ชัน 75 โดย Firefox ได้นำฟีเจอร์นี้ไปใช้ในเวอร์ชัน Nightly
เกณฑ์ด้านคุณภาพ
นักพัฒนาเว็บควรใช้กิจกรรมในเว็บซึ่งเชื่อถือได้เมื่อต้องการรวมเนื้อหาเว็บไว้ในแอป Android
เนื้อหาเว็บในกิจกรรมในเว็บซึ่งเชื่อถือได้ต้องเป็นไปตามเกณฑ์ความสามารถในการติดตั้ง PWA
นอกจากนี้ เพื่อให้ตรงกับลักษณะการทำงานที่ผู้ใช้คาดหวังจากแอปพลิเคชัน Android Chrome 86 ได้เปิดตัวการเปลี่ยนแปลงที่การไม่สามารถจัดการสถานการณ์ต่อไปนี้ถือเป็นข้อขัดข้อง
- ยืนยันลิงก์เนื้อหาดิจิทัลเมื่อเปิดแอปพลิเคชันไม่สำเร็จ
- ไม่สามารถแสดงผล HTTP 200 สำหรับคำขอทรัพยากรเครือข่ายแบบออฟไลน์
- คำขอการนำทางที่แสดงข้อผิดพลาด HTTP 404 หรือ 5xx"
เมื่อเกิดสถานการณ์อย่างใดอย่างหนึ่งในกิจกรรมในเว็บซึ่งเชื่อถือได้ จะทำให้แอปพลิเคชัน Android ขัดข้องและผู้ใช้มองเห็นได้ ดูคำแนะนำเกี่ยวกับการจัดการสถานการณ์เหล่านั้นใน Service Worker
นอกจากนี้ แอปพลิเคชันยังต้องเป็นไปตามเกณฑ์เพิ่มเติมเฉพาะ Android เช่น การปฏิบัติตามนโยบาย
เครื่องมือ
นักพัฒนาเว็บที่ต้องการใช้ประโยชน์จากกิจกรรมในเว็บซึ่งเชื่อถือได้ไม่จำเป็นต้องเรียนรู้เทคโนโลยีหรือ API ใหม่ๆ เพื่อเปลี่ยน PWA ให้เป็นแอปพลิเคชัน Android Bubblewrap และ PWABuilder ร่วมกันมอบเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในรูปแบบของไลบรารี, อินเทอร์เฟซบรรทัดคำสั่ง (CLI) และอินเทอร์เฟซผู้ใช้แบบกราฟิก (GUI)
บับเบิลแรป
โปรเจ็กต์ Bubblewrap จะสร้างแอป Android ในรูปแบบไลบรารี NodeJS และอินเทอร์เฟซบรรทัดคำสั่ง (CLI)
การเริ่มต้นโปรเจ็กต์ใหม่ทำได้โดยการเรียกใช้เครื่องมือและส่ง URL ของไฟล์ 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 เอง
เพื่อหลีกเลี่ยงการแสดงแอปพลิเคชันที่ใช้งานไม่ได้แก่ผู้ใช้ ให้ติดตั้งใช้งานแอปพลิเคชันในช่องทางการทดสอบแบบปิด ติดตั้งลงในอุปกรณ์ทดสอบ แล้วใช้เครื่องมือ Asset Link ของ 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 โดยใช้เครื่องมือ Asset Link ของ Peter
สุดท้าย ให้ย้ายแอปพลิเคชันจากช่องทางการทดสอบแบบปิดไปยังเวอร์ชันที่ใช้งานจริง