การเพิ่ม Progressive Web App ไปยัง Google Play

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

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

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

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

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

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

สิ่งที่ต้องมี

  • Progressive Web App ที่เผยแพร่บนอินเทอร์เน็ตและคุณสามารถทําการเปลี่ยนแปลง
  • Bubblewrap Command Line Interface ที่ติดตั้งไว้และพร้อมใช้งาน
  • บัญชีนักพัฒนาซอฟต์แวร์ Google Play
  • คีย์ Signing ที่มีอยู่หากคุณเปิดตัวแอปไว้ใน Google Play แล้ว
  • อุปกรณ์ Android หรือ Chrome OS ที่จะทดสอบ

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

2. ตีกรอบ 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

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

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

คีย์ Signing

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

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

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

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

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

เอาต์พุต Bubblewrap

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

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

ไฟล์เหล่านี้มีทุกอย่างที่เราต้องการในการสร้างแพ็กเกจแอปพลิเคชัน Android

สร้าง Android App Bundle

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

$ bubblewrap build

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

คําสั่งบิลด์จะสร้างไฟล์ที่สําคัญ 2 ไฟล์ดังนี้

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

3. ลองเลย - Bubblewrap

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

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

4. กําลังเพิ่มแอปลงใน Google Store ของ Google

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

สร้างแอป

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

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

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

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

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

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

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

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

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

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

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

สร้างรุ่นสําหรับการทดสอบ

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

Play App Signing

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

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

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

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

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

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

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

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

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

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

หากต้องการกําหนดค่าลิงก์เนื้อหาดิจิทัลของ PWA&#39 คุณต้องมีลายนิ้วมือ SHA-256 สําหรับใบรับรองที่ใช้เพื่อลงนามพัสดุที่ผู้ใช้ได้รับในโทรศัพท์

พร้อม Play App Signing

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

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

ไม่ใช้ Play App Signing

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

$ 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 ให้เรียกใช้คําสั่งต่อไปนี้จากภายในไดเรกทอรีเดียวกันที่สร้างขึ้นระหว่าง Bubblewrapping Your PWA โดยแทนที่ <fingerprint> ด้วยลายนิ้วมือที่คัดลอกมาจากขั้นตอนก่อนหน้า

$ bubblewrap fingerprint add <fingerprint>

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

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

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

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

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

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

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

twa-manifest.json คีย์การลงนาม app-release-bundle.aab build.gradle

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

การอัปโหลด รุ่นและการอัปโหลด รุ่น ป้ายและการอัปโหลด

แอป PWA ของ Oogie Boogie' ไม่ได้เรียกใช้โหมดเต็มหน้าจอ ปัญหานี้แก้ไขได้โดยการมอบลายนิ้วมือสําหรับใบรับรอง 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 ทดสอบแอป Android ใน PWA เขา ______ Android App Bundle กับแทร็กทดสอบภายใน
  3. แอป PWA ของ Oogie Boogie' ไม่ได้เรียกใช้โหมดเต็มหน้าจอ ปัญหานี้แก้ไขได้โดยการมอบลายนิ้วมือสําหรับใบรับรอง SHA-256 สําหรับ ______ และอัปโหลดไปยังไฟล์ลิงก์เนื้อหาดิจิทัล (Digital Asset Links) ซึ่งอยู่ใน ______ ต้นทางเดียวกับ PWA

10. ยินดีด้วย

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

เมื่อคุณพร้อมที่จะดําเนินการแล้ว ลองทําตามขั้นตอนต่อไปนี้ด้วยตนเอง

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