การตั้งค่ากิจกรรมบนเว็บที่เชื่อถือได้อาจทําได้ยากสักหน่อย โดยเฉพาะอย่างยิ่งหากคุณต้องการเพียงแค่แสดงเว็บไซต์ คู่มือนี้จะอธิบายการสร้างโปรเจ็กต์พื้นฐานที่ใช้กิจกรรมบนเว็บที่เชื่อถือได้ โดยครอบคลุมถึงสิ่งที่ควรทราบทั้งหมด
เมื่ออ่านคู่มือนี้จนจบ คุณจะทําสิ่งต่อไปนี้ได้
- ใช้ Bubblewrap เพื่อสร้างแอปพลิเคชันที่ใช้กิจกรรมบนเว็บที่เชื่อถือได้และผ่านการตรวจสอบ
- ทำความเข้าใจว่าระบบจะใช้คีย์การรับรองเมื่อใด
- ระบุลายเซ็นที่ใช้สร้างแอปพลิเคชัน Android ได้
- รู้วิธีสร้างไฟล์ลิงก์เนื้อหาดิจิทัลพื้นฐาน
ในการทำตามคู่มือนี้ คุณจะต้องมีสิ่งต่อไปนี้
- ติดตั้ง Node.js 10 ขึ้นไปในคอมพิวเตอร์ที่ใช้พัฒนาซอฟต์แวร์
- โทรศัพท์ Android หรือโปรแกรมจำลองที่เชื่อมต่อและตั้งค่าไว้สําหรับการพัฒนา (เปิดใช้การแก้ไขข้อบกพร่องผ่าน USB หากคุณใช้โทรศัพท์จริง)
- เบราว์เซอร์ที่รองรับกิจกรรมในเว็บซึ่งเชื่อถือได้ในโทรศัพท์สำหรับนักพัฒนาซอฟต์แวร์ Chrome เวอร์ชัน 72 ขึ้นไปจะใช้งานได้ เราจะเพิ่มการรองรับในเบราว์เซอร์อื่นๆ ในอนาคต
- เว็บไซต์ที่คุณต้องการดูในกิจกรรมบนเว็บที่เชื่อถือได้
กิจกรรมบนเว็บที่เชื่อถือได้ช่วยให้แอป Android เปิดแท็บเบราว์เซอร์แบบเต็มหน้าจอได้โดยไม่ต้องมี UI ของเบราว์เซอร์ ความสามารถนี้จะจำกัดไว้สำหรับเว็บไซต์ที่คุณเป็นเจ้าของ และคุณพิสูจน์ได้โดยการตั้งค่าลิงก์เนื้อหาดิจิทัล เราจะพูดถึงเรื่องนี้เพิ่มเติมในภายหลัง
เมื่อคุณเปิดใช้งานกิจกรรมบนเว็บที่เชื่อถือได้ เบราว์เซอร์จะตรวจสอบว่าลิงก์เนื้อหาดิจิทัล (Digital Asset Links) ทำงานอยู่หรือไม่ ซึ่งเรียกว่าการยืนยัน หากยืนยันไม่สำเร็จ เบราว์เซอร์จะกลับไปแสดงเว็บไซต์เป็นแท็บที่กำหนดเอง
ติดตั้งและกำหนดค่า Bubblewrap
Bubblewrap คือชุดไลบรารีและเครื่องมือบรรทัดคำสั่ง (CLI) สำหรับ Node.js ที่ช่วยนักพัฒนาแอปสร้าง บิลด์ และเรียกใช้ Progressive Web App ภายในแอปพลิเคชัน Android โดยใช้กิจกรรมบนเว็บที่เชื่อถือได้
ติดตั้ง CLI ได้ด้วยคำสั่งต่อไปนี้
npm i -g @bubblewrap/cli
การตั้งค่าสภาพแวดล้อม
เมื่อเรียกใช้ Bubblewrap เป็นครั้งแรก จะมีการเสนอให้ดาวน์โหลดและติดตั้งทรัพยากร Dependency ภายนอกที่จำเป็นโดยอัตโนมัติ เราขอแนะนำให้อนุญาตให้เครื่องมือดำเนินการนี้ เนื่องจากเป็นการรับประกันว่าจะมีการกำหนดค่าทรัพยากร Dependencies อย่างถูกต้อง ดูเอกสารประกอบของ Bubblewrap เพื่อใช้การติดตั้ง Java Development Kit (JDK) หรือเครื่องมือบรรทัดคำสั่ง Android ที่มีอยู่
เริ่มต้นและสร้างโปรเจ็กต์
การเริ่มต้นโปรเจ็กต์ Android ที่รวม PWA อยู่นั้นทำได้โดยเรียกใช้คำสั่ง init ดังนี้
bubblewrap init --manifest=https://my-twa.com/manifest.json
Bubblewrap จะอ่าน Web Manifest ขอให้นักพัฒนาแอปยืนยันค่าที่จะใช้ในโปรเจ็กต์ Android และสร้างโปรเจ็กต์โดยใช้ค่าเหล่านั้น เมื่อสร้างโปรเจ็กต์แล้ว ให้สร้าง APK โดยเรียกใช้คำสั่งต่อไปนี้
bubblewrap build
เรียกใช้
ขั้นตอนการสร้างจะแสดงผลไฟล์ชื่อ app-release-signed.apk ไฟล์นี้สามารถติดตั้งในอุปกรณ์สำหรับนักพัฒนาแอปเพื่อทดสอบหรืออัปโหลดไปยัง Play Store เพื่อเผยแพร่ได้
Bubblewrap มีคำสั่งสำหรับติดตั้งและทดสอบแอปพลิเคชันในอุปกรณ์เครื่องนั้น เมื่อเชื่อมต่ออุปกรณ์สำหรับพัฒนาซอฟต์แวร์กับคอมพิวเตอร์แล้ว ให้ทำดังนี้
bubblewrap install
หรือจะใช้เครื่องมือ adb ก็ได้
adb install app-release-signed.apk
ตอนนี้แอปพลิเคชันควรพร้อมใช้งานใน Launcher ของอุปกรณ์แล้ว เมื่อเปิดแอปพลิเคชัน คุณจะสังเกตเห็นว่าเว็บไซต์ของคุณเปิดตัวเป็นแท็บที่กำหนดเอง ไม่ใช่กิจกรรมบนเว็บที่เชื่อถือได้ เนื่องจากเรายังไม่ได้ตั้งค่าการตรวจสอบความถูกต้องของลิงก์เนื้อหาดิจิทัล (Digital Asset Links) แต่ก่อนอื่น...
อินเทอร์เฟซผู้ใช้แบบกราฟิก (GUI) ทางเลือกสําหรับ Bubblewrap
PWA Builder มีอินเทอร์เฟซ GUI ที่ใช้ไลบรารี Bubblewrap เพื่อขับเคลื่อนการสร้างโปรเจ็กต์กิจกรรมในเว็บซึ่งเชื่อถือได้ ดูวิธีการเพิ่มเติมเกี่ยวกับวิธีใช้ PWA Builder เพื่อสร้างแอป Android ที่เปิด PWA ได้ในบล็อกโพสต์นี้
หมายเหตุเกี่ยวกับคีย์การลงชื่อ
ลิงก์เนื้อหาดิจิทัลจะพิจารณาคีย์ที่ลงนาม APK และสาเหตุที่พบบ่อยของการยืนยันไม่สำเร็จคือการใช้ลายเซ็นที่ไม่ถูกต้อง (อย่าลืมว่าการไม่ผ่านการยืนยันหมายความว่าคุณจะเปิดเว็บไซต์ของคุณเป็นแท็บที่กำหนดเองที่มี UI ของเบราว์เซอร์ที่ด้านบนของหน้า) เมื่อ Bubblewrap สร้างแอปพลิเคชัน ระบบจะสร้าง APK ที่มีการตั้งค่าคีย์ในขั้นตอน init อย่างไรก็ตาม เมื่อคุณเผยแพร่แอปใน Google Play ระบบอาจสร้างคีย์อื่นให้คุณ ทั้งนี้ขึ้นอยู่กับวิธีที่คุณเลือกจัดการคีย์การรับรอง ดูข้อมูลเพิ่มเติมเกี่ยวกับคีย์การรับรองและความสัมพันธ์กับ Bubblewrap และ Google Play
การตั้งค่าไฟล์ลิงก์ชิ้นงาน
ลิงก์เนื้อหาดิจิทัลประกอบด้วยไฟล์ในเว็บไซต์ที่ชี้ไปยังแอปและข้อมูลเมตาบางอย่างในแอปที่ชี้ไปยังเว็บไซต์ของคุณ
หลังจากสร้างไฟล์ assetlinks.json แล้ว ให้อัปโหลดไฟล์ไปยังเว็บไซต์ที่ .well-known/assetlinks.json (สัมพันธ์กับรูท) เพื่อให้เบราว์เซอร์ยืนยันแอปของคุณได้อย่างถูกต้อง ดูข้อมูลเชิงลึกเกี่ยวกับลิงก์เนื้อหาดิจิทัลเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับความสัมพันธ์ของลิงก์ดังกล่าวกับคีย์การรับรอง
กำลังตรวจสอบเบราว์เซอร์
กิจกรรมบนเว็บที่เชื่อถือได้จะพยายามปฏิบัติตามตัวเลือกเริ่มต้นของเบราว์เซอร์ หากเบราว์เซอร์เริ่มต้นของผู้ใช้รองรับกิจกรรมบนเว็บที่เชื่อถือได้ ระบบจะเปิดใช้งานเบราว์เซอร์นั้น หากไม่สำเร็จ ระบบจะเลือกเบราว์เซอร์ที่ติดตั้งไว้ซึ่งรองรับกิจกรรมบนเว็บที่เชื่อถือได้ สุดท้าย ลักษณะการทำงานเริ่มต้นคือกลับไปใช้โหมดแท็บที่กำหนดเอง
ซึ่งหมายความว่าหากกำลังแก้ไขข้อบกพร่องเกี่ยวกับกิจกรรมบนเว็บที่เชื่อถือได้ คุณควรตรวจสอบว่าคุณกำลังใช้เบราว์เซอร์ที่คิดว่าใช้อยู่ คุณสามารถใช้คำสั่งต่อไปนี้เพื่อตรวจสอบว่ากำลังใช้เบราว์เซอร์ใดอยู่
> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome
ขั้นตอนถัดไป
เราหวังว่าเมื่อทำตามคำแนะนำนี้ คุณจะมีกิจกรรมบนเว็บที่เชื่อถือได้ซึ่งใช้งานได้และมีความรู้เพียงพอในการแก้ไขข้อผิดพลาดที่เกิดขึ้นเมื่อการยืนยันไม่สำเร็จ หากไม่มี โปรดดูแนวคิดของ Android สำหรับนักพัฒนาเว็บเพิ่มเติมหรือแจ้งปัญหาเกี่ยวกับ GitHub ไว้ในเอกสารเหล่านี้
สำหรับขั้นตอนถัดไป เราขอแนะนำให้คุณเริ่มต้นด้วยการสร้างไอคอนสำหรับแอป เมื่อดำเนินการเสร็จแล้ว ให้พิจารณาเผยแพร่แอปใน Play Store