การเพิ่ม Progressive Web App ลงใน Google Play

1. ยินดีต้อนรับ

ในแล็บนี้ คุณจะได้นำ Progressive Web App ที่มีอยู่ซึ่งคุณได้ติดตั้งใช้งานแล้วมาห่อหุ้มเป็นแอปเพื่อเผยแพร่ใน Play Store ของ Google

สิ่งที่คุณจะได้เรียนรู้

  • วิธีใช้ Bubblewrap เพื่อแพ็กเกจ Progressive Web App สำหรับ Play Store ของ Google
  • คีย์การลงนามคืออะไรและวิธีใช้
  • วิธีสร้างแอปใหม่ใน Developer Console ของ Google Play และตั้งค่ารุ่นทดสอบเพื่อทดสอบแอปก่อนเผยแพร่
  • ลิงก์เนื้อหาดิจิทัลคืออะไรและวิธีเพิ่มลงในเว็บแอป

สิ่งที่ควรทราบ

  • Progressive Web App คืออะไร
  • วิธีใช้เครื่องมือบรรทัดคำสั่ง
  • คำสั่ง Shell Bash พื้นฐาน หรือวิธีแปลคำสั่งเหล่านั้นเป็น Shell ที่คุณเลือก

สิ่งที่คุณต้องมี

สิ่งที่จะไม่ครอบคลุม

2. Bubblewrap สำหรับ PWA

Bubblewrap เป็นเครื่องมือที่ช่วยให้การห่อ Progressive Web App เป็น Android App Bundle ง่ายเหมือนกับการเรียกใช้คำสั่ง CLI 2-3 คำสั่ง โดยจะสร้างโปรเจ็กต์ Android ที่เปิด PWA เป็นกิจกรรมในเว็บที่เชื่อถือได้

หากต้องการเริ่มต้น ให้สร้างไดเรกทอรีสำหรับโปรเจ็กต์และย้ายไปที่ไดเรกทอรีนั้นโดยทำดังนี้

$ mkdir my-pwa && cd my-pwa

จากนั้นเรียกใช้เครื่องมือบรรทัดคำสั่ง Bubblewrap เพื่อสร้างการกำหนดค่าและโปรเจ็กต์ Android สำหรับ Android App Bundle ที่คุณจะอัปโหลดไปยัง Play

$ bubblewrap init --manifest=https://my-pwa.com/manifest.json

ในที่นี้ Bubblewrap จะเริ่มต้นด้วยตำแหน่งของไฟล์ Web App Manifest ของ PWA ซึ่งจะสร้างการกำหนดค่าเริ่มต้นจากไฟล์ Manifest ของเว็บแอป และเริ่มวิซาร์ดในคอนโซลที่จะช่วยให้คุณเปลี่ยนการกำหนดค่าเริ่มต้นได้ ทำตามวิซาร์ดเพื่อเปลี่ยนค่าที่เครื่องมือสร้างขึ้น

วิซาร์ด Bubblewrap CLI แสดงการเริ่มต้นจาก airhorner โดยมีการลบล้างโดเมนด้วย example.com และมีการลบล้าง URL เริ่มต้น

คีย์การลงนาม

Play Store ของ Google กำหนดให้แพ็กเกจแอปพลิเคชันต้องได้รับการลงนามแบบดิจิทัลด้วยใบรับรองเมื่ออัปโหลด ซึ่งมักเรียกว่าคีย์การลงนาม นี่คือใบรับรองแบบ Self-signed และแตกต่างจากใบรับรองที่ใช้เพื่อแสดงแอปพลิเคชันผ่าน HTTPS

Bubblewrap จะขอเส้นทางของคีย์เมื่อสร้างแอปพลิเคชัน หากใช้ข้อมูล Play Store ที่มีอยู่สำหรับแอปพลิเคชัน คุณจะต้องเพิ่มเส้นทางไปยังคีย์เดียวกันกับที่ใช้ในข้อมูลนั้น

วิซาร์ด Bubblewrap CLI จะขอตำแหน่งและชื่อของคีย์การลงนามที่มีอยู่ของผู้ใช้

หากไม่มีคีย์การลงนามอยู่แล้วและกำลังสร้างข้อมูลใหม่ใน Play Store คุณสามารถใช้ค่าเริ่มต้นที่ Bubblewrap ระบุไว้เพื่อให้สร้างคีย์ใหม่ให้คุณได้ โดยทำดังนี้

วิซาร์ด Bubblewrap CLI ถามว่าผู้ใช้ต้องการสร้างคีย์การลงนามใหม่หรือไม่

เอาต์พุตของ Bubblewrap

หลังจากเริ่มต้นโปรเจ็กต์ Bubblewrap และทำตามวิซาร์ดจนเสร็จแล้ว ระบบจะสร้างรายการต่อไปนี้

  • twa-manifest.json - การกำหนดค่าโปรเจ็กต์ซึ่งแสดงค่าที่เลือกในวิซาร์ด Bubblewrap คุณจะต้องติดตามไฟล์นี้ด้วยระบบควบคุมเวอร์ชัน เนื่องจากสามารถใช้เพื่อสร้างโปรเจ็กต์ Bubblewrap ทั้งหมดใหม่ได้หากจำเป็น
  • ไฟล์โปรเจ็กต์ Android - ไฟล์ที่เหลือในไดเรกทอรีคือโปรเจ็กต์ Android ที่สร้างขึ้น โปรเจ็กต์นี้เป็นแหล่งที่มาที่ใช้สำหรับคำสั่งบิลด์ Bubblewrap นอกจากนี้ คุณยังเลือกติดตามไฟล์เหล่านี้ด้วยระบบควบคุมเวอร์ชันได้ด้วย
  • (ไม่บังคับ) คีย์ Signing - หากเลือกให้ Bubblewrap สร้างคีย์ Signing ให้คุณ ระบบจะส่งออกคีย์ไปยังตำแหน่งที่อธิบายไว้ในวิซาร์ด โปรดเก็บคีย์ไว้ในที่ที่ปลอดภัยและจำกัดจำนวนผู้ที่มีสิทธิ์เข้าถึงคีย์ดังกล่าว เนื่องจากคีย์นี้ใช้เพื่อพิสูจน์ว่าแอปใน Play Store มาจากคุณ

เมื่อมีไฟล์เหล่านี้แล้ว เราก็จะมีทุกอย่างที่จำเป็นในการสร้าง Android Application Bundle

สร้าง Android App Bundle

จากภายในไดเรกทอรีเดียวกันกับที่คุณเรียกใช้คำสั่งการเริ่มต้นของ Bubblewrap ให้เรียกใช้คำสั่งต่อไปนี้ (คุณจะต้องมีรหัสผ่านสำหรับคีย์การลงนาม)

$ bubblewrap build

เอาต์พุต CLI ของ Bubblewrap สำหรับการสร้างโปรเจ็กต์ การขอรหัสผ่านสำหรับคีย์การลงนาม และการแสดงการสร้างแอป Android เวอร์ชันต่างๆ

คำสั่งบิลด์จะสร้างไฟล์สำคัญ 2 ไฟล์ ได้แก่

  • app-release-bundle.aab - Android App Bundle ของ PWA ซึ่งเป็นไฟล์ที่คุณจะอัปโหลดไปยัง Google Play Store
  • app-release-signed.apk - รูปแบบการแพ็กเกจ Android ที่ใช้เพื่อติดตั้งแอปพลิเคชันลงในอุปกรณ์พัฒนาโดยตรงได้โดยใช้คำสั่ง bubblewrap install

3. ลองใช้เลย - Bubblewrap

ตอนนี้ถึงตาคุณแล้ว นำสิ่งที่ได้เรียนรู้ในขั้นตอนก่อนหน้าไปใช้เพื่อทำสิ่งต่อไปนี้

  1. สร้างไดเรกทอรีเพื่อเก็บโปรเจ็กต์ Android ที่สร้างขึ้น
  2. เริ่มต้นไดเรกทอรีนั้นด้วย Bubblewrap และไฟล์ Manifest ของเว็บแอป PWA
  3. สร้างคีย์การลงนามใหม่ หรือนำคีย์ที่มีอยู่มาใช้ซ้ำหากมี
  4. สร้าง Android App Bundle จากโปรเจ็กต์ Android ที่สร้างขึ้น

4. การเพิ่มแอปของคุณลงใน Google Play Store

เมื่อมี Android App Bundle สำหรับ PWA แล้ว ก็ถึงเวลาอัปโหลดไปยัง Google Play Store เมื่อลงทะเบียนบัญชีนักพัฒนาแอปแล้ว คุณจะไปที่ Play Console เพื่อเข้าสู่ระบบและเริ่มต้นใช้งานได้

สร้างแอป

เมื่อเข้าสู่ระบบแล้ว คุณจะเห็นหน้าจอที่แสดงแอปทั้งหมด ที่ด้านบนจะมีปุ่มสร้างแอป ซึ่งเมื่อคลิกแล้วจะแสดงหน้าจอต่อไปนี้เพื่อแนะนำขั้นตอนการสร้างข้อมูลแอป Android ใหม่

หน้าจอแสดงแบบฟอร์มสร้างแอปของ Play Console

คุณต้องกรอกข้อมูลในช่องต่างๆ ที่นี่ ซึ่งรวมถึงชื่อแอป ภาษาเริ่มต้น ประเภทของแอป (แอปหรือเกม) ประเภทของแอป (ฟรีหรือต้องซื้อ) และการประกาศต่างๆ คุณจะสร้างแอปไม่ได้หากไม่ยอมรับประกาศ ดังนั้นคุณควรอ่านและทำความเข้าใจประกาศก่อนที่จะยอมรับ

เมื่อกรอกข้อมูลทั้งหมดแล้ว ให้คลิกปุ่มสร้างแอปที่ด้านล่างของแบบฟอร์ม ระบบจะนำคุณไปยังแดชบอร์ดของแอปใหม่ ในแดชบอร์ด คุณจะเห็นรายการตรวจสอบของงานที่คุณต้องทำเพื่อตั้งค่า เริ่มทดสอบ และเผยแพร่แอป

ตั้งค่าการทดสอบภายใน

การทดสอบภายในเป็นวิธีที่ยอดเยี่ยมในการเผยแพร่แอปอย่างรวดเร็วโดยไม่ต้องตรวจสอบไปยังกลุ่มผู้ทดสอบที่เชื่อถือได้ที่คุณเลือก ดูงานในรายการตรวจสอบเริ่มทดสอบเลย แล้วเลือกเลือกผู้ทดสอบ

รายการตรวจสอบสำหรับเริ่มทดสอบเลย

การคลิกงานดังกล่าวจะนำคุณไปยังหน้าการทดสอบภายใน คุณจะจัดการการตั้งค่าการทดสอบสำหรับแอปได้ที่นี่ โดยกลับไปที่หน้าดังกล่าวได้อีกครั้งโดยเปิดส่วนการทดสอบในเมนูรุ่นในแถบด้านข้าง สิ่งแรกที่ต้องทำคือสร้างรายชื่ออีเมลของผู้ทดสอบเพื่อทดสอบแอป โดยคลิกลิงก์สร้างรายชื่ออีเมลในส่วนผู้ทดสอบของหน้า ซึ่งจะเป็นการเปิดป๊อปอัปเพื่อสร้างรายชื่ออีเมล

ป๊อปอัปที่แสดงแบบฟอร์มสร้างรายชื่ออีเมล ซึ่งมีชื่อรายการ อีเมล ลิงก์สำหรับอัปโหลดไฟล์ CSV ของอีเมล และพื้นที่สำหรับแสดงอีเมลที่อัปโหลด

ในป๊อปอัปนี้ คุณจะตั้งชื่อรายการอีเมล และป้อนอีเมลด้วยตนเองหรืออัปโหลด CSV ของอีเมลเพื่อใช้ก็ได้ เมื่อเสร็จแล้ว ให้กดปุ่มบันทึกการเปลี่ยนแปลง คุณจะกลับไปที่รายชื่ออีเมลที่สร้างไว้แล้วเพื่อเพิ่มหรือนำอีเมลออกได้ตามต้องการ หลังจากเพิ่มผู้ทดสอบแล้ว ก็ถึงเวลาสร้างรุ่นทดสอบ คลิกปุ่มสร้างรุ่นใหม่ที่ด้านบนของหน้า

หน้าการทดสอบภายในที่มีลูกศรชี้ไปยังปุ่มสร้างรุ่นใหม่

สร้างรุ่นทดสอบ

หลังจากคลิกปุ่มสร้างรุ่นใหม่แล้ว ระบบจะแจ้งให้คุณดำเนินการผ่านส่วนต่างๆ ส่วนแรกคือความสมบูรณ์ของแอป ซึ่งเป็นส่วนที่คุณเลือกวิธีจัดการคีย์การลงนามของแอป ตัวเลือกเริ่มต้นคือการให้ Google จัดการคีย์การลงนาม ซึ่งเป็นตัวเลือกที่แนะนำเนื่องจากมีความปลอดภัยและช่วยให้กู้คืนแอปได้ในกรณีที่คีย์การอัปโหลดสูญหาย

Play App Signing

โฟลว์ชาร์ตแสดงนักพัฒนาแอปและคีย์การอัปโหลดของนักพัฒนาแอปรายนั้นจากซ้ายไปขวา ซึ่งจะใช้เพื่อลงนามในแอปและส่งไปยัง Google จากนั้น Google จะมีคีย์ App Signing และรับรองแอปด้วยคีย์ดังกล่าว แล้วจึงนำส่งแอปให้ผู้ใช้

การอัปโหลดแอปและการสรุป

หลังจากเลือกวิธีจัดการคีย์การลงนามแล้ว ระบบจะขอให้คุณอัปโหลด App Bundle ไปยังรุ่น โดยลากและวางไฟล์ app-release-bundle.aab ที่ Bubblewrap สร้างขึ้นลงในแบบฟอร์ม หากต้องการเผยแพร่รุ่นสุดท้าย ให้กรอกรายละเอียดรุ่นที่เหลือ แล้วคลิกปุ่มบันทึก จากนั้นคลิกตรวจสอบรุ่น และสุดท้ายคลิกปุ่มเริ่มเปิดตัวเพื่อการทดสอบภายในเพื่อเริ่มรุ่น การดำเนินการนี้จะทำให้แอปพร้อมให้บริการแก่ผู้ทดสอบภายใน กลับไปที่แท็บผู้ทดสอบของหน้าการทดสอบภายใน คุณสามารถคัดลอกลิงก์เพื่อแชร์กับผู้ทดสอบเพื่อให้ผู้ทดสอบเข้าถึงแอปได้

หน้าการทดสอบภายใน โดยมีลูกศรชี้ไปที่ลิงก์คัดลอกลิงก์เพื่อแชร์ลิงก์การทดสอบกับผู้ทดสอบ

5. ลองใช้เลย - สร้างแอป

ตอนนี้ถึงตาคุณแล้ว นำสิ่งที่ได้เรียนรู้ในขั้นตอนก่อนหน้าไปใช้เพื่อทำสิ่งต่อไปนี้

  1. สร้างแอปใหม่สำหรับ PWA ใน Play Console
  2. ตั้งค่าการทดสอบภายในสำหรับแอปและเพิ่มตัวคุณเองเป็นผู้ทดสอบ
  3. อัปโหลด App Bundle และสร้างรุ่นทดสอบสำหรับแอป
  4. ติดตั้งแอปจาก Play Store บนอุปกรณ์ Android หรือ ChromeOS โดยใช้ลิงก์การทดสอบ

6. ลิงก์เนื้อหาดิจิทัล (Digital Asset Links)

หากได้ทดสอบ PWA ใน Play คุณอาจสังเกตเห็นว่า PWA ไม่ได้ทำงานแบบเต็มหน้าจอ เนื่องจากคุณยังไม่ได้ยืนยันการเป็นเจ้าของเว็บไซต์ผ่านไฟล์ Digital Asset Links แม้ว่า Bubblewrap จะกำหนดค่าและสร้าง App Bundle ของแอปพลิเคชัน Android ได้ แต่คุณต้องทำให้ลิงก์เสร็จสมบูรณ์โดยการอัปเดตเว็บแอปพลิเคชัน

รับลายนิ้วมือ SHA-256 ของแอป

หากต้องการกำหนดค่า Digital Asset Links ของ PWA คุณจะต้องมีลายนิ้วมือ SHA-256 สำหรับใบรับรองที่ใช้ลงนามในแพ็กเกจที่ผู้ใช้ได้รับในโทรศัพท์

เมื่อใช้ Play App Signing

หากตั้งค่า Play App Signing สำหรับแอปเมื่อสร้างรุ่น (ซึ่งก่อนหน้านี้เราแนะนำให้ทำ) คุณจะดู SHA-256 Fingerprint ได้ใน Play Console โปรดทราบว่าใบรับรองนี้แตกต่างจากใบรับรองที่ใช้ในการอัปโหลดแอปพลิเคชัน หากต้องการรับลายนิ้วมือ ให้ไปที่รุ่น->การตั้งค่า->ความสมบูรณ์ของแอปจากภายในแอปพลิเคชันใน Play Console คุณจะเห็นตัวเลือกต่างๆ ในส่วนใบรับรองคีย์ App Signing คัดลอกค่าลายนิ้วมือของใบรับรอง SHA-256

หน้าจอความสมบูรณ์ของแอปที่มีการไฮไลต์ลายนิ้วมือของใบรับรอง SHA-256

หากไม่ได้ใช้ Play App Signing

หากเลือกไม่ใช้ Play App Signing คีย์ที่ใช้ลงนามในแอปพลิเคชันขั้นสุดท้ายจะเป็นคีย์เดียวกับที่คุณใช้เพื่ออัปโหลดแอปพลิเคชันไปยัง Play Console คุณสามารถใช้ keytool ของ Java เพื่อแยกข้อมูลลายนิ้วมือได้โดยทำดังนี้

$ keytool -list -v \
    -keystore <keystore-file-path> \
    -alias <key-alias> \
    -keypass <key-password> \
    -storepass <store-password> | grep SHA256

$     SHA256: BD:92:64:B0:1A:B9:08:08:FC:FE:7F:94:B2...

หากต้องการใช้ คุณจะต้องทราบเส้นทางไปยังคีย์การลงนามและรหัสผ่านที่เกี่ยวข้อง คัดลอกค่าเลขฐานสิบหกของคีย์ SHA256

Bubblewrap สามารถจัดการลายนิ้วมือของลายเซ็นที่คุณดึงข้อมูลมาและสร้างไฟล์ Digital Asset Links ที่ถูกต้องให้คุณได้ หากต้องการเพิ่มลายนิ้วมือด้วย Bubblewrap ให้เรียกใช้คำสั่งต่อไปนี้จากภายในไดเรกทอรีเดียวกันที่สร้างขึ้นระหว่างการ Bubblewrap PWA โดยแทนที่ <fingerprint> ด้วยลายนิ้วมือที่คัดลอกจากขั้นตอนก่อนหน้า

$ bubblewrap fingerprint add <fingerprint>

คำสั่งนี้จะเพิ่มลายนิ้วมือลงในรายการลายนิ้วมือของแอปพลิเคชันและสร้างไฟล์ assetlinks.json อัปโหลดไฟล์นี้ไปยังไดเรกทอรี .well-known ในต้นทางเดียวกันกับ PWA

7. ลองใช้เลย - ลิงก์เนื้อหาดิจิทัล

ตอนนี้ถึงตาคุณแล้ว นำสิ่งที่ได้เรียนรู้ในขั้นตอนก่อนหน้าไปใช้เพื่อทำสิ่งต่อไปนี้

  1. ค้นหาลายนิ้วมือ SHA-256 ของแอป
  2. สร้างไฟล์ลิงก์เนื้อหาดิจิทัล (Digital Asset Links) สำหรับแอป
  3. อัปโหลดไฟล์ Digital Asset Links ไปยัง PWA
  4. ตรวจสอบว่าได้ตั้งค่าไฟล์ Digital Asset Links อย่างถูกต้องโดยใช้ API และแอปทดสอบ

8. ทดสอบความรู้ของคุณ

ก่อนจบหลักสูตร ให้ทดสอบความรู้และดูสิ่งที่คุณได้เรียนรู้โดยตอบคำถามต่อไปนี้ อย่าแอบดูคำตอบนะ

หลังจากสร้างโปรเจ็กต์ Android ด้วย Bubblewrap แล้ว Sally จะคอมมิตไฟล์ ______ ที่สร้างขึ้นไปยังระบบควบคุมเวอร์ชันเพื่อให้สร้างใหม่ได้ทุกเมื่อที่ต้องการ

twa-manifest.json signing key app-release-bundle.aab build.gradle

แจ็คต้องการให้ทีม QA ทดสอบแอป PWA Android ของเขา เขาจึง______ Android App Bundle ไปยังแทร็กทดสอบภายใน

อัปโหลด สร้างและอัปโหลด รุ่น ลงนามและอัปโหลด

แอป PWA ของ Oogie Boogie บน Android ไม่ได้ทำงานแบบเต็มหน้าจอ หากต้องการแก้ไขปัญหานี้ ผู้ให้บริการจะรับลายนิ้วมือสำหรับใบรับรอง SHA-256 สำหรับ ______ และอัปโหลดไปยังไฟล์ลิงก์เนื้อหาดิจิทัล (Digital Asset Links) ที่อยู่ใน ______ ในต้นทางเดียวกันกับ PWA

คีย์การอัปโหลด, /.well-known/assetlinks.json คีย์การอัปโหลด, /assetlinks.json คีย์การลงนาม, /.well-known/assetlinks.json คีย์การลงนาม, /assetlinks.json

9. ทดสอบความรู้ - คำตอบ

คำตอบของคำถามในส่วน "ทดสอบความรู้"

  1. หลังจากสร้างโปรเจ็กต์ Android ด้วย Bubblewrap แล้ว Sally จะคอมมิตไฟล์ ______ ที่สร้างขึ้นไปยังระบบควบคุมเวอร์ชันเพื่อให้สร้างใหม่ได้ทุกเมื่อที่ต้องการ
  2. แจ็คต้องการให้ทีม QA ทดสอบแอป PWA Android ของเขา เขาจึง______ Android App Bundle ไปยังแทร็กทดสอบภายใน
  3. แอป PWA ของ Oogie Boogie บน Android ไม่ได้ทำงานแบบเต็มหน้าจอ หากต้องการแก้ไขปัญหานี้ ผู้ให้บริการจะรับลายนิ้วมือสำหรับใบรับรอง SHA-256 สำหรับ ______ และอัปโหลดไปยังไฟล์ลิงก์เนื้อหาดิจิทัล (Digital Asset Links) ที่อยู่ใน ______ ในต้นทางเดียวกันกับ PWA

10. ยินดีด้วย

ยินดีด้วย คุณได้เรียนรู้วิธีเพิ่ม PWA ลงใน Play Store ของ Google แล้ว

เมื่อพร้อมแล้ว ให้ลองทำตามขั้นตอนถัดไปนี้ด้วยตนเอง

ขอให้สนุกกับการเขียนโค้ด