การตั้งค่ากิจกรรมบนเว็บที่เชื่อถือได้อาจเป็นเรื่องยาก โดยเฉพาะอย่างยิ่งหากคุณเพียงต้องการ แสดงเว็บไซต์ คู่มือนี้สอนวิธีสร้างโปรเจ็กต์ขนาดเล็ก ที่ใช้กิจกรรมบนเว็บที่เชื่อถือได้
เมื่ออ่านคู่มือนี้จบ คุณจะทำสิ่งต่อไปนี้ได้
- ใช้ Bubblewrap เพื่อ สร้างแอปพลิเคชันที่ใช้กิจกรรมบนเว็บที่เชื่อถือได้และผ่านการยืนยัน
- ทำความเข้าใจว่าระบบจะใช้คีย์การลงนามเมื่อใด
- สามารถระบุลายเซ็นที่ใช้สร้างแอปพลิเคชัน Android ของคุณได้
- ดูวิธีสร้างไฟล์ Digital Asset Links พื้นฐาน
คุณต้องมีสิ่งต่อไปนี้จึงจะทำตามคู่มือนี้ได้
- Node.js 10 ขึ้นไป
- โทรศัพท์หรือโปรแกรมจำลอง Android ที่เชื่อมต่อและตั้งค่าสำหรับการพัฒนา เปิดใช้การแก้ไขข้อบกพร่อง USB หากคุณใช้โทรศัพท์จริง
- เบราว์เซอร์บนอุปกรณ์เคลื่อนที่ที่รองรับกิจกรรมในเว็บซึ่งเชื่อถือได้
- เว็บไซต์ที่คุณต้องการดูในกิจกรรมในเว็บที่เชื่อถือได้
คุณสามารถใช้กิจกรรมในเว็บซึ่งเชื่อถือได้สำหรับแอป Android เพื่อเปิดแท็บเบราว์เซอร์แบบเต็มหน้าจอโดยไม่มี UI ของเบราว์เซอร์ ความสามารถนี้จำกัดเฉพาะเว็บไซต์ที่คุณเป็นเจ้าของ คุณพิสูจน์การเป็นเจ้าของได้โดยการตั้งค่า Digital Asset Links
เมื่อเปิดใช้กิจกรรมในเว็บซึ่งเชื่อถือได้ เบราว์เซอร์จะยืนยันลิงก์เนื้อหาดิจิทัล (Digital Asset Links) หากการยืนยันไม่สำเร็จ เบราว์เซอร์จะกลับไปแสดงเว็บไซต์ของคุณเป็นแท็บที่กำหนดเอง
ติดตั้งและกำหนดค่า Bubblewrap
Bubblewrap คือชุดไลบรารีและเครื่องมือบรรทัดคำสั่ง (CLI) สำหรับ Node.js ที่ช่วยนักพัฒนาสร้าง บิลด์ และเรียกใช้ Progressive Web App ภายในแอปพลิเคชัน Android โดยใช้กิจกรรมในเว็บซึ่งเชื่อถือได้
ติดตั้ง CLI โดยเรียกใช้คำสั่งนี้
npm i -g @bubblewrap/cli
การตั้งค่าสภาพแวดล้อม
เมื่อเรียกใช้ Bubblewrap เป็นครั้งแรก ระบบจะเสนอให้ดาวน์โหลด และติดตั้งการอ้างอิงภายนอกที่จำเป็นโดยอัตโนมัติ เราขอแนะนำให้เปิดใช้การดาวน์โหลดอัตโนมัติ เนื่องจากจะช่วยให้มั่นใจว่ามีการกำหนดค่าการอ้างอิงอย่างถูกต้อง ดูเอกสารประกอบ Bubblewrap เพื่อใช้ Java Development Kit (JDK) ที่มีอยู่ หรือการติดตั้งเครื่องมือบรรทัดคำสั่ง Android
เริ่มต้นและสร้างโปรเจ็กต์
เริ่มต้นโปรเจ็กต์ Android ที่รวม PWA ไว้
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
ขั้นตอนถัดไป
หวังว่าหากคุณทำตามคำแนะนำนี้ คุณจะมี Trusted Web Activity ที่ใช้งานได้และมีความรู้เพียงพอที่จะแก้ไขข้อบกพร่องหากการยืนยันไม่สำเร็จ หากยังไม่เข้าใจ โปรดดูแนวคิดเกี่ยวกับ Android เพิ่มเติมสำหรับนักพัฒนาเว็บ
สำหรับขั้นตอนถัดไป ให้สร้างไอคอนสำหรับแอป เมื่อทำเสร็จแล้ว คุณจะพิจารณาการนำแอปไปใช้งานใน Play Store ได้