กิจกรรมบนเว็บที่เชื่อถือได้อาจตั้งค่าได้ยากสักหน่อย โดยเฉพาะอย่างยิ่งหากคุณต้องการแสดงเฉพาะเว็บไซต์ คู่มือนี้จะอธิบายถึงการสร้างโครงการพื้นฐานที่ใช้กิจกรรมในเว็บที่เชื่อถือได้ ซึ่งจะครอบคลุมหัวข้อต่างๆ ทั้งหมด
เมื่ออ่านคู่มือนี้จนจบ คุณจะทําสิ่งต่อไปนี้ได้
- ใช้ Bubblewrap เพื่อสร้างแอปพลิเคชันที่ใช้กิจกรรมบนเว็บที่เชื่อถือได้และผ่านการยืนยัน
- ทำความเข้าใจว่าระบบจะใช้คีย์การรับรองเมื่อใด
- ระบุลายเซ็นที่ใช้สร้างแอปพลิเคชัน Android ได้
- รู้วิธีสร้างไฟล์ลิงก์เนื้อหาดิจิทัลพื้นฐาน
คุณต้องมีสิ่งต่อไปนี้จึงจะทำตามคู่มือนี้ได้
- ติดตั้ง Node.js 10 ขึ้นไปในคอมพิวเตอร์ที่ใช้พัฒนา
- โทรศัพท์ Android หรือโปรแกรมจำลองที่เชื่อมต่อและตั้งค่าไว้สําหรับการพัฒนา (เปิดใช้การแก้ไขข้อบกพร่องผ่าน USB หากคุณใช้โทรศัพท์จริง)
- เบราว์เซอร์ที่รองรับกิจกรรมในเว็บซึ่งเชื่อถือได้ในโทรศัพท์สำหรับนักพัฒนาซอฟต์แวร์
- เว็บไซต์ที่คุณต้องการดูในกิจกรรมในเว็บซึ่งเชื่อถือได้
กิจกรรมบนเว็บที่เชื่อถือได้ช่วยให้แอป Android เปิดแท็บเบราว์เซอร์แบบเต็มหน้าจอได้โดยไม่ต้องมี UI ของเบราว์เซอร์ ความสามารถนี้จะจำกัดไว้สำหรับเว็บไซต์ที่คุณเป็นเจ้าของ และคุณพิสูจน์ได้โดยการตั้งค่าลิงก์เนื้อหาดิจิทัล เราจะพูดคุยเพิ่มเติมเกี่ยวกับเรื่องนี้ในภายหลัง
เมื่อคุณเปิดกิจกรรมในเว็บที่เชื่อถือได้ เบราว์เซอร์จะตรวจสอบว่าลิงก์เนื้อหาดิจิทัล (Digital Asset Links) เช็คเอาต์อยู่ ขั้นตอนนี้เรียกว่าการยืนยัน หากการยืนยันไม่สำเร็จเบราว์เซอร์จะแสดงเว็บไซต์เป็นแท็บที่กำหนดเอง
ติดตั้งและกำหนดค่า Bubblewrap
Bubblewrap คือชุดไลบรารีและเครื่องมือบรรทัดคำสั่ง (CLI) สำหรับ Node.js ที่ช่วยให้นักพัฒนาซอฟต์แวร์สร้าง สร้าง และเรียกใช้ Progressive Web App ภายในแอปพลิเคชัน Android โดยใช้กิจกรรมบนเว็บที่เชื่อถือได้
คุณติดตั้ง CLI ได้ด้วยคำสั่งต่อไปนี้
การตั้งค่าสภาพแวดล้อม
เมื่อเรียกใช้ Bubblewrap เป็นครั้งแรก ระบบจะเสนอให้ดาวน์โหลดและติดตั้งข้อกำหนดภายนอกที่จำเป็นโดยอัตโนมัติ เราขอแนะนำให้ปล่อยให้เครื่องมือดำเนินการนี้ เนื่องจากจะช่วยรับประกันว่าทรัพยากร Dependency จะได้รับการกำหนดค่าอย่างถูกต้อง โปรดอ่านเอกสารประกอบของ Bubblewrap เพื่อใช้การติดตั้งเครื่องมือบรรทัดคำสั่ง Java Development Kit (JDK) หรือ Android ที่มีอยู่
เริ่มต้นและสร้างโปรเจ็กต์
เริ่มต้นโปรเจ็กต์ Android ที่รวม PWA โดยเรียกใช้คำสั่ง init ดังนี้
Bubblewrap จะอ่าน Web Manifest ขอให้นักพัฒนาแอปยืนยันค่าที่จะใช้ในโปรเจ็กต์ Android และสร้างโปรเจ็กต์โดยใช้ค่าเหล่านั้น เมื่อสร้างโปรเจ็กต์แล้ว ให้สร้าง APK โดยเรียกใช้คำสั่งต่อไปนี้
เรียกใช้
ขั้นตอนบิลด์จะแสดงไฟล์ชื่อ app-release-signed.apk ไฟล์นี้สามารถติดตั้งในอุปกรณ์สำหรับนักพัฒนาแอปเพื่อทดสอบหรืออัปโหลดไปยัง Play Store เพื่อเผยแพร่ได้
Bubblewrap มีคำสั่งให้ติดตั้งและทดสอบแอปพลิเคชันในอุปกรณ์ภายใน เมื่ออุปกรณ์การพัฒนาเชื่อมต่อกับคอมพิวเตอร์ ให้ดำเนินการดังนี้
หรือจะใช้เครื่องมือ adb ก็ได้
หมายเหตุ: เครื่องมือบรรทัดคำสั่ง **adb** จะอยู่ในเครื่องมือบรรทัดคำสั่งของ Android ใน **android_sdk/platform-tools/**
ตอนนี้แอปพลิเคชันพร้อมใช้งานในโปรแกรมเปิดแอปของอุปกรณ์แล้ว เมื่อเปิดแอปพลิเคชัน คุณจะเห็นว่าเว็บไซต์เปิดเป็นแท็บที่กำหนดเอง ไม่ใช่กิจกรรมบนเว็บที่เชื่อถือได้ เนื่องจากเรายังไม่ได้ตั้งค่าการตรวจสอบลิงก์ชิ้นงานดิจิทัล แต่ก่อนอื่น...
อินเทอร์เฟซผู้ใช้แบบกราฟิก (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 สัมพัทธ์กับรูท) เพื่อให้เบราว์เซอร์ยืนยันแอปได้อย่างถูกต้อง ดูข้อมูลเชิงลึกเกี่ยวกับลิงก์เนื้อหาดิจิทัลเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับความสัมพันธ์ของลิงก์ดังกล่าวกับคีย์การรับรอง
กำลังตรวจสอบเบราว์เซอร์
กิจกรรมในเว็บซึ่งเชื่อถือได้จะพยายามใช้เบราว์เซอร์ที่ผู้ใช้เลือกไว้เป็นค่าเริ่มต้น หากเบราว์เซอร์เริ่มต้นของผู้ใช้รองรับกิจกรรมบนเว็บที่เชื่อถือได้ ระบบจะเปิดเบราว์เซอร์ดังกล่าว หากไม่สำเร็จ ระบบจะเลือกเบราว์เซอร์ที่ติดตั้งไว้ซึ่งรองรับกิจกรรมบนเว็บที่เชื่อถือได้ สุดท้าย ลักษณะการทำงานเริ่มต้นคือกลับไปใช้โหมดแท็บที่กำหนดเอง
ซึ่งหมายความว่าหากคุณกำลังแก้ไขข้อบกพร่องที่เกี่ยวข้องกับกิจกรรมในเว็บที่เชื่อถือได้ คุณควรตรวจสอบว่าคุณกำลังใช้เบราว์เซอร์ที่คิดว่าใช้อยู่ คุณสามารถใช้คำสั่งต่อไปนี้เพื่อตรวจสอบว่ากำลังใช้เบราว์เซอร์ใดอยู่
ขั้นตอนถัดไป
เราหวังว่าเมื่อทำตามคำแนะนำนี้ คุณจะมีกิจกรรมบนเว็บที่เชื่อถือได้ซึ่งใช้งานได้และมีความรู้เพียงพอในการแก้ไขข้อผิดพลาดที่เกิดขึ้นเมื่อการยืนยันไม่สำเร็จ หากไม่ โปรดดูแนวคิด Android สําหรับนักพัฒนาเว็บเพิ่มเติม หรือแจ้งปัญหาใน GitHub เกี่ยวกับเอกสารเหล่านี้
สำหรับขั้นตอนต่อไป เราขอแนะนำให้คุณเริ่มต้นโดยการสร้างไอคอนสำหรับแอป เมื่อทำเสร็จแล้ว คุณก็พิจารณาทำให้แอปใช้งานได้ใน Play Store ได้เลย