เริ่ม 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 คือไม่ได้ออกแบบมาเพื่อใช้แทนเบราว์เซอร์ Android WebView เป็นเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในการใช้ UI เว็บในแอป Android และไม่มีสิทธิ์เข้าถึงฟีเจอร์แพลตฟอร์มเว็บสมัยใหม่ทั้งหมด เช่น เครื่องมือเลือกรายชื่อติดต่อ หรือ ระบบไฟล์ เป็นต้น
Cordova ได้รับการออกแบบมาเพื่อเสริมข้อบกพร่องของ WebView แต่ API จะจำกัดไว้เฉพาะสภาพแวดล้อม Cordova ซึ่งหมายความว่าคุณต้องดูแลฐานของโค้ดเพิ่มเติมสำหรับการใช้ Cordova API สำหรับแอป Android แยกจาก PWA ในเว็บแบบเปิด
นอกจากนี้ การค้นพบฟีเจอร์มักจะทำงานได้ไม่ตรงตามที่คาดหวังเสมอไป และปัญหาความเข้ากันได้ระหว่างเวอร์ชัน Android กับ OEM ก็อาจเป็นปัญหาได้เช่นกัน เมื่อใช้โซลูชันใดโซลูชันหนึ่ง นักพัฒนาแอปต้องมีกระบวนการประกันคุณภาพเพิ่มเติมและมีค่าใช้จ่ายในการพัฒนาเพิ่มเติมเพื่อตรวจหาและสร้างวิธีแก้ปัญหา
กิจกรรมในเว็บซึ่งเชื่อถือได้เป็นคอนเทนเนอร์ใหม่สำหรับเว็บแอปใน Android
ตอนนี้ นักพัฒนาแอปสามารถใช้กิจกรรมในเว็บซึ่งเชื่อถือได้เป็นคอนเทนเนอร์เพื่อรวม PWA เป็นกิจกรรมเปิดตัวสำหรับแอป Android ได้แล้ว เทคโนโลยีนี้ใช้ประโยชน์จากเบราว์เซอร์เพื่อแสดงผล PWA แบบเต็มหน้าจอ ซึ่งทำให้มั่นใจได้ว่ากิจกรรมในเว็บซึ่งเชื่อถือได้จะมีความเข้ากันได้กับฟีเจอร์และ 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
โปรเจ็กต์ 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 ด้วย PWA นั้นโดยไม่ได้รับอนุญาต แอปพลิเคชัน Android จึงต้องจับคู่กับ Progressive Web App โดยใช้เครื่องมือที่เรียกว่า ลิงก์เนื้อหาดิจิทัล (Digital Asset Links)
Bubblewrap และ PWABuilder จะจัดการการกำหนดค่าที่จำเป็นในแอปพลิเคชัน Android แต่ยังคงมีขั้นตอนสุดท้ายคือการเพิ่มไฟล์ assetlinks.json ลงใน PWA
หากต้องการสร้างไฟล์นี้ นักพัฒนาแอปต้องมีลายเซ็น SHA-256 ของคีย์ที่ใช้ทำ Signing APK ที่ผู้ใช้กำลังดาวน์โหลด
คุณสร้างคีย์ได้หลายวิธี และวิธีที่ง่ายที่สุดในการค้นหาคีย์ที่ทำ Signing APK ที่ให้บริการแก่ผู้ใช้ปลายทางคือการดาวน์โหลด APK จาก Play Store เอง
หากไม่ต้องการแสดงแอปพลิเคชันที่ใช้งานไม่ได้ให้ผู้ใช้เห็น ให้ทำให้ใช้งานได้แอปพลิเคชันในช่องทดสอบแบบปิด ติดตั้งแอปพลิเคชันลงในอุปกรณ์ทดสอบ แล้วใช้เครื่องมือลิงก์เนื้อหาของ Peter เพื่อสร้างไฟล์ที่ถูกต้องสำหรับแอป ทำให้ไฟล์ที่สร้างขึ้นพร้อมใช้งานที่ในโดเมนที่กำลังตรวจสอบassetlinks.jsonassetlinks.json/.well-known/assetlinks.json
สิ่งที่ควรทำต่อไป
Progressive Web App คือประสบการณ์การใช้งานเว็บคุณภาพสูง กิจกรรมในเว็บซึ่งเชื่อถือได้เป็นวิธีใหม่ในการเปิดประสบการณ์การใช้งานคุณภาพสูงเหล่านั้นจากแอป Android เมื่อเป็นไปตามเกณฑ์เชิงคุณภาพขั้นต่ำ
หากคุณเพิ่งเริ่มต้นใช้งาน Progressive Web App โปรดอ่าน คำแนะนำเกี่ยวกับวิธีสร้าง PWA ที่ยอดเยี่ยม สำหรับนักพัฒนาแอปที่มี PWA อยู่แล้ว ให้ใช้ Lighthouse เพื่อยืนยันว่า PWA เป็นไปตามเกณฑ์เชิงคุณภาพหรือไม่
จากนั้นใช้ Bubblewrap หรือ PWABuilder เพื่อสร้างแอปพลิเคชัน Android อัปโหลดแอปพลิเคชันไปยังช่องทดสอบแบบปิดใน Play Store และจับคู่กับ PWA โดยใช้ เครื่องมือลิงก์เนื้อหาของ Peter
สุดท้าย ให้ย้ายแอปพลิเคชันจากการทดสอบแบบปิดไปยังเวอร์ชันที่ใช้งานจริง