เริ่ม PWA ในแอป Android
Progressive Web App (PWA) เป็นเว็บแอปพลิเคชันที่ใช้ฟีเจอร์คล้ายแอปเพื่อสร้างประสบการณ์การใช้งานคุณภาพสูง ที่รวดเร็ว เชื่อถือได้ และน่าสนใจ
เว็บมีการเข้าถึงที่น่าทึ่งและนำเสนอวิธีการที่มีประสิทธิภาพสำหรับผู้ใช้ในการค้นพบประสบการณ์ใหม่ๆ แต่ผู้ใช้ก็เคยชินกับการค้นหาแอปพลิเคชันใน Store ของระบบปฏิบัติการด้วย ในหลายกรณี ผู้ใช้เหล่านี้คุ้นเคยกับแบรนด์หรือบริการที่กำลังมองหาอยู่แล้ว และมีความตั้งใจในระดับสูงซึ่งทำให้เมตริกการมีส่วนร่วมสูงกว่าค่าเฉลี่ย
Play Store เป็น Store สำหรับแอป Android และนักพัฒนาซอฟต์แวร์มักต้องการเปิดแอป Progressive Web จากแอป 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 ได้ติดตั้งใช้งานในเวอร์ชันคืน
เกณฑ์คุณภาพ
นักพัฒนาเว็บควรใช้กิจกรรมบนเว็บที่เชื่อถือได้เมื่อต้องการรวมเนื้อหาเว็บไว้ในแอป Android
เนื้อหาเว็บในกิจกรรมบนเว็บที่เชื่อถือได้ต้องเป็นไปตามเกณฑ์ความสามารถในการติดตั้งของ PWA
นอกจากนี้ Chrome 86 ได้ทำการเปลี่ยนแปลงโดยที่เราไม่สามารถจัดการกับสถานการณ์ต่อไปนี้ได้ด้วย เพื่อให้สอดคล้องกับพฤติกรรมที่ผู้ใช้คาดหวังจากแอปพลิเคชัน Android
- ยืนยันลิงก์เนื้อหาดิจิทัลเมื่อเปิดใช้แอปพลิเคชันไม่สำเร็จ
- แสดงผล HTTP 200 สำหรับคำขอทรัพยากรเครือข่ายออฟไลน์ไม่สำเร็จ
- คำขอการนำทางที่แสดงข้อผิดพลาด HTTP 404 หรือ 5xx"
เมื่อเกิดเหตุการณ์ใดเหตุการณ์หนึ่งเกิดขึ้นในกิจกรรมบนเว็บและเว็บที่เชื่อถือได้ แอป Android ของผู้ใช้จะเห็นข้อขัดข้องที่เห็นได้ชัด โปรดดูคำแนะนำในการจัดการกับสถานการณ์เหล่านั้นในโปรแกรมทำงานของบริการ
นอกจากนี้ แอปพลิเคชันยังต้องเป็นไปตามเกณฑ์เพิ่มเติมสำหรับ Android ด้วย เช่น การปฏิบัติตามนโยบาย
การใช้เครื่องมือ
นักพัฒนาเว็บที่ต้องการใช้ประโยชน์จากกิจกรรมบนเว็บที่เชื่อถือได้ไม่จำเป็นต้องเรียนรู้เทคโนโลยีใหม่ๆ หรือ API ในการเปลี่ยน PWA ของตนให้เป็นแอปพลิเคชัน Android Bubblewrap และ PWABuilder ต่างก็เป็นเครื่องมือสำหรับนักพัฒนาแอปในรูปแบบของไลบรารี, Command Line Interface (CLI) และอินเทอร์เฟซผู้ใช้แบบกราฟิก (GUI)
บับเบิล
โปรเจ็กต์ Bubblewrap จะสร้างแอป Android ในรูปแบบไลบรารี NodeJS และ Command Line Interface (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 ขึ้นมาโดยไม่ได้รับอนุญาต แอปพลิเคชัน Android ต้องจับคู่กับ Progressive Web App โดยใช้เครื่องมือที่เรียกว่าลิงก์เนื้อหาดิจิทัล (Digital Asset Links) เพื่อดูแลไม่ให้เหตุการณ์เช่นนี้เกิดขึ้น
Bubblewrap และ PWABuilder จะดูแลการกำหนดค่าที่จำเป็นในแอปพลิเคชัน Android แต่ขั้นตอนสุดท้ายคือการเพิ่มไฟล์ assetlinks.json ไปยัง PWA
ในการสร้างไฟล์นี้ นักพัฒนาซอฟต์แวร์ต้องมีลายเซ็น SHA-256 ของคีย์ที่ใช้ในการลงนาม APK ที่ผู้ใช้ดาวน์โหลด
คีย์อาจสร้างขึ้นได้หลายวิธี วิธีที่ง่ายที่สุดในการค้นหาคีย์ที่รับรอง APK ที่กำลังให้บริการแก่ผู้ใช้ปลายทางคือการดาวน์โหลดจาก Play Store
ในการทำให้แอปพลิเคชันใช้งานไม่ได้ต่อผู้ใช้ ให้ติดตั้งใช้งานแอปพลิเคชันในเวอร์ชันทดสอบแบบปิด โดยติดตั้งลงในอุปกรณ์ทดสอบ แล้วใช้ เครื่องมือลิงก์เนื้อหาของปีเตอร์เพื่อสร้างไฟล์ assetlinks.json ที่ถูกต้องสำหรับแอป โปรดทำให้ไฟล์ assetlinks.json ที่สร้างพร้อมใช้งานที่ /.well-known/assetlinks.json ในโดเมนที่ตรวจสอบ
ขั้นตอนถัดไป
Progressive Web App คือประสบการณ์การใช้งานเว็บคุณภาพสูง กิจกรรมบนเว็บที่เชื่อถือได้เป็นวิธีใหม่ในการเปิด ประสบการณ์คุณภาพสูงจากแอป Android เมื่อมีคุณสมบัติตรงตามเกณฑ์คุณภาพขั้นต่ำ
หากคุณเริ่มต้นใช้งาน Progressive Web App โปรดอ่านคำแนะนำเกี่ยวกับวิธีสร้าง PWA ที่ยอดเยี่ยม สำหรับนักพัฒนาซอฟต์แวร์ที่มี PWA อยู่แล้ว ให้ใช้ Lighthouse เพื่อตรวจสอบว่าเป็นไปตามเกณฑ์คุณภาพหรือไม่
จากนั้นใช้ Bubblewrap หรือ PWABuilder เพื่อสร้างแอปพลิเคชัน Android อัปโหลดแอปพลิเคชันไปยังช่องทดสอบแบบปิดใน Play Store และจับคู่กับ PWA โดยใช้เครื่องมือลิงก์เนื้อหาของปีเตอร์
ขั้นตอนสุดท้าย ให้ย้ายการสมัครจากช่องทดสอบแบบปิดไปยังเวอร์ชันที่ใช้งานจริง