การตั้งค่ากิจกรรมบนเว็บที่เชื่อถือได้อาจทําได้ยากสักหน่อย โดยเฉพาะอย่างยิ่งหากคุณต้องการเพียงแค่แสดงเว็บไซต์ คู่มือนี้จะอธิบายการสร้างโปรเจ็กต์พื้นฐานที่ใช้กิจกรรมบนเว็บที่เชื่อถือได้ โดยครอบคลุมถึงสิ่งที่ควรทราบทั้งหมด
เมื่ออ่านคู่มือนี้จนจบ คุณจะทําสิ่งต่อไปนี้ได้
- ใช้ Bubblewrap เพื่อสร้างแอปพลิเคชันที่ใช้กิจกรรมบนเว็บที่เชื่อถือได้และผ่านการตรวจสอบ
- ทำความเข้าใจว่าระบบจะใช้คีย์การรับรองเมื่อใด
- ระบุลายเซ็นที่ใช้สร้างแอปพลิเคชัน Android ได้
- ทราบวิธีสร้างไฟล์ Digital Asset Links พื้นฐาน
คุณต้องมีสิ่งต่อไปนี้จึงจะทำตามคู่มือนี้ได้
- ติดตั้ง 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 เป็นครั้งแรก ระบบจะเสนอให้ดาวน์โหลดและติดตั้งข้อกำหนดภายนอกที่จำเป็นโดยอัตโนมัติ เราขอแนะนำให้อนุญาตให้เครื่องมือดำเนินการนี้ เนื่องจากเป็นการรับประกันว่าจะมีการกำหนดค่าทรัพยากร 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
ตอนนี้แอปพลิเคชันควรพร้อมใช้งานในโปรแกรมเปิดแอปของอุปกรณ์แล้ว เมื่อเปิดแอปพลิเคชัน คุณจะเห็นว่าเว็บไซต์เปิดเป็นแท็บที่กำหนดเอง ไม่ใช่กิจกรรมบนเว็บที่เชื่อถือได้ เนื่องจากเรายังไม่ได้ตั้งค่าการตรวจสอบลิงก์ชิ้นงานดิจิทัล แต่ก่อนอื่น...
อินเทอร์เฟซผู้ใช้แบบกราฟิก (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