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