กิจกรรมบนเว็บที่เชื่อถือได้อาจตั้งค่าได้ยาก โดยเฉพาะอย่างยิ่งหากแค่ต้องการแสดงเว็บไซต์ของคุณ คู่มือนี้จะอธิบายการสร้างโปรเจ็กต์พื้นฐานที่ใช้กิจกรรมบนเว็บที่เชื่อถือได้ โดยครอบคลุม Gotcha ทั้งหมด
เมื่อจบคู่มือนี้ คุณจะทำสิ่งต่อไปนี้ได้
- เคยใช้ 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 ภายนอกที่จำเป็นโดยอัตโนมัติ เราขอแนะนำให้อนุญาตให้เครื่องมือดำเนินการนี้ เนื่องจากจะช่วยรับประกันว่าทรัพยากร Dependency จะได้รับการกำหนดค่าอย่างถูกต้อง โปรดอ่านเอกสารประกอบ Bubblewrap เพื่อใช้การติดตั้งเครื่องมือบรรทัดคำสั่งของ Android (JDK) หรือ Java Development Kit (JDK) ที่มีอยู่
เริ่มต้นและสร้างโปรเจ็กต์
การเริ่มต้นโปรเจ็กต์ Android ที่รวม PWA นั้นทำได้โดยการเรียกใช้คำสั่ง init ดังนี้
bubblewrap init --manifest=https://my-twa.com/manifest.json
Bubblewrap จะอ่านไฟล์ 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) แต่ก่อนอื่น...
ตัวเลือก Graphical User Interface (GUI) สำหรับ Bubblewrap
PWA Builder มีอินเทอร์เฟซ GUI ที่ใช้ไลบรารี Bubblewrap เพื่อขับเคลื่อนการสร้างโปรเจ็กต์กิจกรรมบนเว็บที่เชื่อถือได้ ดูวิธีการเพิ่มเติมเกี่ยวกับวิธีใช้ PWA Builder เพื่อสร้างแอป Android ที่เปิด PWA ได้ในบล็อกโพสต์นี้
หมายเหตุเกี่ยวกับคีย์การรับรอง
ลิงก์เนื้อหาดิจิทัล (Digital Asset Links) จะพิจารณาคีย์ที่มีการลงนาม APK และสาเหตุที่พบบ่อยที่ทำให้การยืนยันไม่สำเร็จคือการใช้ลายเซ็นที่ไม่ถูกต้อง (อย่าลืมว่าการไม่ผ่านการตรวจสอบหมายความว่าคุณจะเปิดเว็บไซต์เป็นแท็บที่กำหนดเองโดยมี UI ของเบราว์เซอร์ที่ด้านบนของหน้า) เมื่อ Bubblewrap สร้างแอปพลิเคชัน ระบบจะสร้าง APK ที่มีการตั้งค่าคีย์ในขั้นตอน init อย่างไรก็ตาม เมื่อคุณเผยแพร่แอปใน Google Play ระบบอาจสร้างคีย์อื่นให้คุณ ทั้งนี้ขึ้นอยู่กับวิธีการที่คุณเลือกจัดการกับคีย์ Signing ดูข้อมูลเพิ่มเติมเกี่ยวกับคีย์การรับรองและความเกี่ยวข้องของ Bubblewrap และ Google Play
การตั้งค่าไฟล์ลิงก์เนื้อหา
ลิงก์เนื้อหาดิจิทัล (Digital Asset Links) ประกอบด้วยไฟล์บนเว็บไซต์ที่ชี้ไปยังแอปและข้อมูลเมตาบางส่วนในแอปที่ชี้ไปยังเว็บไซต์ของคุณ
หลังจากสร้างไฟล์ 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