เกี่ยวกับ Codelab นี้
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 ที่จะทดสอบ
สิ่งที่จะไม่ครอบคลุม
- การจํากัด PWA เฉพาะในอุปกรณ์ Android หรือ Chrome OS เท่านั้น
- การทําให้ PWA ใช้งานได้สําหรับ Chrome OS และแอป Android สําหรับอุปกรณ์เคลื่อนที่ภายใต้แอปเดียวกัน
- วิธีปฏิบัติตามนโยบายการชําระเงินของ Google Play ใน PWA
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' การดําเนินการนี้จะสร้างการกําหนดค่าเริ่มต้นจากไฟล์ Manifest ของเว็บแอป และเริ่มต้นวิซาร์ดในคอนโซลซึ่งจะช่วยให้คุณเปลี่ยนการกําหนดค่าเริ่มต้นได้ ทําตามวิซาร์ดเพื่อเปลี่ยนค่าที่สร้างโดยเครื่องมือ
คีย์ Signing
Play Store ของ Google กําหนดให้แพ็กเกจแอปพลิเคชันต้องมีลายเซ็นดิจิทัลพร้อมใบรับรองเมื่ออัปโหลด ซึ่งมักเรียกว่าคีย์การลงนาม นี่คือใบรับรองแบบ Self-signed และแตกต่างจากใบรับรองที่ใช้แสดงแอปพลิเคชันผ่าน HTTPS
Bubblewrap จะถามเส้นทางสําหรับคีย์เมื่อสร้างแอปพลิเคชัน หากคุณใช้ข้อมูลผลิตภัณฑ์ใน Store ที่มีอยู่สําหรับแอปพลิเคชัน คุณจะต้องเพิ่มเส้นทางลงในคีย์เดียวกับที่ใช้โดยข้อมูลนั้น
หากคุณยังไม่มีคีย์ Signing และกําลังสร้างรายการใหม่ใน Play Store คุณจะใช้ค่าเริ่มต้นที่ Bubblewrap ให้ไว้เพื่อสร้างคีย์ใหม่ให้คุณได้
เอาต์พุต Bubblewrap
หลังจากเริ่มต้นโปรเจ็กต์ Bubblewrap และวิซาร์ดเสร็จสมบูรณ์แล้ว ระบบจะสร้างรายการต่อไปนี้
- twa-manifest.json - การกําหนดค่าโปรเจ็กต์ซึ่งแสดงค่าที่เลือกในวิซาร์ด Bubblewrap คุณจะต้องติดตามไฟล์นี้ด้วยระบบควบคุมเวอร์ชัน เพราะสามารถใช้สร้างโปรเจ็กต์ Bubblewrap ขึ้นใหม่ได้หากจําเป็น
- ไฟล์โครงการ Android - ไฟล์ที่เหลือในไดเรกทอรีจะเป็นโครงการ Android ที่สร้างขึ้น โปรเจ็กต์นี้เป็นแหล่งที่มาที่ใช้สําหรับคําสั่ง Bubblewrap Build นอกจากนี้คุณยังติดตามไฟล์เหล่านี้ด้วยระบบควบคุมเวอร์ชันได้อีกด้วย
- (ไม่บังคับ) คีย์การลงนาม - หากคุณเลือกที่จะให้ Bubblewrap สร้างคีย์การลงนามให้คุณ คีย์ก็จะเป็นเอาต์พุตไปยังตําแหน่งที่อธิบายในวิซาร์ด ตรวจสอบว่าเก็บคีย์ไว้ในที่ที่ปลอดภัยและจํากัดจํานวนผู้ที่มีสิทธิ์เข้าถึง คีย์ดังกล่าวใช้เพื่อพิสูจน์แอปใน Play Store จากคุณ
ไฟล์เหล่านี้มีทุกอย่างที่เราต้องการในการสร้างแพ็กเกจแอปพลิเคชัน Android
สร้าง Android App Bundle
จากภายในไดเรกทอรีเดียวกันที่คุณเรียกใช้คําสั่งเริ่มต้นของ Bubblewrap' ให้เรียกใช้คําสั่งต่อไปนี้ (คุณจะต้องมีรหัสผ่านสําหรับคีย์การลงนาม):
$ bubblewrap build
คําสั่งบิลด์จะสร้างไฟล์ที่สําคัญ 2 ไฟล์ดังนี้
- app-release-bundle.aab - Android App Bundle ของ PWA' ซึ่งเป็นไฟล์ที่คุณจะอัปโหลดไปยัง Google Play Store
- app-release-signed.apk - รูปแบบแพ็กเกจของ Android ที่ใช้ติดตั้งแอปพลิเคชันไปยังอุปกรณ์การพัฒนาได้โดยตรงโดยใช้คําสั่ง
bubblewrap install
3 ลองเลย - Bubblewrap
ตอนนี้ถึงตาคุณแล้ว สิ่งที่ได้เรียนรู้ในขั้นตอนก่อนหน้ามีดังนี้
- สร้างไดเรกทอรีเพื่อใช้เก็บโปรเจ็กต์ Android ที่สร้างขึ้น
- เริ่มไดเรกทอรีนั้นด้วย Bubblewrap และ Manifest ของเว็บแอป PWA'
- สร้างคีย์การลงนามใหม่ หรือใช้คีย์เดิมที่มีอยู่หากมี
- สร้าง Android App Bundle จากโครงการ Android ที่สร้างขึ้น
4 กําลังเพิ่มแอปลงใน Google Store ของ Google
ตอนนี้คุณมี Android App Bundle สําหรับ PWA แล้ว ก็ถึงเวลาอัปโหลดไปยัง Play Store ของ Google เมื่อลงทะเบียนบัญชีนักพัฒนาซอฟต์แวร์แล้ว คุณจะไปที่ Play Console เพื่อลงชื่อเข้าสู่ระบบและเริ่มต้นใช้งานได้
สร้างแอป
เมื่อลงชื่อเข้าสู่ระบบแล้ว คุณจะเห็นหน้าจอที่แสดงแอปทั้งหมด ใกล้กับด้านบนจะมีปุ่มสร้างแอปที่เมื่อคลิก จะแสดงหน้าจอต่อไปนี้ซึ่งจะนําคุณผ่านการสร้างข้อมูลแอป Android ใหม่
ที่นี่มีช่องจํานวนมากให้กรอกข้อมูล รวมถึงชื่อแอป ภาษาเริ่มต้น ไม่ว่าจะเป็นแอปหรือเกม ทั้งแบบฟรีหรือต้องซื้อ และการประกาศจํานวนหนึ่ง คุณจะสร้างแอปไม่ได้หากไม่ยอมรับการประกาศ ดังนั้นคุณควรอ่านและทําความเข้าใจคําอธิบายของแอปก่อนยอมรับ
เมื่อกรอกข้อมูลทั้งหมดเรียบร้อยแล้วและคลิกปุ่มสร้างแอปที่ด้านล่างของแบบฟอร์ม ระบบจะนําคุณไปยังหน้าแดชบอร์ดสําหรับแอปใหม่ คุณจะเห็นแดชบอร์ดของงานที่ต้องทําให้เสร็จสมบูรณ์เพื่อตั้งค่า เริ่มทดสอบ และเผยแพร่แอป
ตั้งค่าการทดสอบภายใน
การทดสอบภายในเป็นวิธีที่ยอดเยี่ยมในการเผยแพร่แอปอย่างรวดเร็วโดยไม่ต้องตรวจสอบกับกลุ่มผู้ทดสอบที่เชื่อถือได้ที่คุณเลือก ดูงานในรายการตรวจสอบเริ่มการทดสอบเลย แล้วเลือกเลือกผู้ทดสอบ
การคลิกงานจะนําคุณไปยังหน้าการทดสอบภายใน นี่คือที่ที่คุณจะจัดการการตั้งค่าการทดสอบสําหรับแอปได้ คุณสามารถไปยังการตั้งค่าได้อีกครั้งโดยเปิดส่วนการทดสอบในเมนูรุ่นในแถบด้านข้าง สิ่งแรกที่ต้องทําคือการสร้างรายชื่ออีเมลของผู้ทดสอบเพื่อทดสอบแอป คลิกลิงก์สร้างรายชื่ออีเมลในส่วนผู้ทดสอบของหน้า ซึ่งจะเป็นการเปิดป๊อปอัปสําหรับสร้างรายชื่ออีเมล
ในป๊อปอัปนี้ คุณจะต้องตั้งชื่อรายชื่ออีเมล โดยคุณจะป้อนอีเมลหรืออัปโหลด CSV ของอีเมลที่จะใช้ด้วยตนเองก็ได้ เมื่อเสร็จแล้ว ให้กดปุ่มบันทึกการเปลี่ยนแปลง คุณจะกลับไปที่รายชื่ออีเมลที่สร้างไว้แล้วเพื่อเพิ่มหรือนําอีเมลออกได้ตามต้องการ หลังจากเพิ่มผู้ทดสอบแล้ว ก็ถึงเวลาสร้างรุ่นทดสอบ คลิกปุ่มสร้างรุ่นใหม่ที่ด้านบนของหน้า
สร้างรุ่นสําหรับการทดสอบ
หลังจากคลิกปุ่มสร้างรุ่นใหม่แล้ว คุณจะได้รับการแจ้งเตือนผ่านส่วนต่างๆ ความสมบูรณ์ของแอปอย่างแรกคือที่ที่คุณจัดการเกี่ยวกับวิธีจัดการคีย์ App Signing ตัวเลือกเริ่มต้นคือให้ Google จัดการคีย์ Signing ของคุณ ซึ่งเป็นตัวเลือกที่แนะนําเพราะจะปลอดภัยและทําให้แอปกู้คืนได้ในกรณีที่คีย์การอัปโหลดสูญหาย
Play App Signing
การอัปโหลดแอปและการสรุป
หลังจากเลือกวิธีจัดการคีย์ Signing แล้ว ระบบจะขอให้คุณอัปโหลด App Bundle ไปยังรุ่นของคุณ ซึ่งทําได้โดยลากและวางไฟล์ app-release-bundle.aab ที่ Bubblewrap สร้างในแบบฟอร์ม หากต้องการดําเนินการรุ่นให้เสร็จสิ้น ให้ป้อนรายละเอียดของรุ่นที่เหลือและคลิกบันทึก จากนั้นคลิกตรวจสอบรุ่น และสุดท้ายคือปุ่มเริ่มเปิดตัวรุ่นสําหรับการทดสอบภายในเพื่อเริ่มรุ่น การดําเนินการนี้จะทําให้แอปของคุณพร้อมใช้งานสําหรับผู้ทดสอบภายใน กลับไปที่แท็บผู้ทดสอบในหน้าการทดสอบภายใน คุณจะคัดลอกลิงก์เพื่อแชร์กับผู้ทดสอบเพื่อให้ผู้ทดสอบเข้าถึงแอปได้
5 ลองเลย - สร้างแอป
ตอนนี้ถึงตาคุณแล้ว สิ่งที่ได้เรียนรู้ในขั้นตอนก่อนหน้ามีดังนี้
- สร้างแอปใหม่สําหรับ PWA ใน Play Console
- ตั้งค่าการทดสอบภายในสําหรับแอปและเพิ่มตัวคุณเองเป็นผู้ทดสอบ
- อัปโหลด App Bundle และสร้างรุ่นทดสอบของแอป
- ติดตั้งแอปของคุณจาก Play Store ในอุปกรณ์ Android หรือ Chrome OS โดยใช้ลิงก์ทดสอบ
6 ลิงก์เนื้อหาดิจิทัล (Digital Asset Links)
หากคุณลองทดสอบ PWA ใน Play คุณอาจสังเกตเห็นว่า Play ทํางานแบบเต็มหน้าจอไม่ได้ นั่นเป็นเพราะคุณยังไม่ได้ยืนยันการเป็นเจ้าของเว็บไซต์ผ่านไฟล์ลิงก์เนื้อหาดิจิทัล แม้ว่า Bubblewrap กําหนดค่าและสร้างแพ็กเกจแอปพลิเคชัน Android ได้ แต่คุณต้องอัปเดตลิงก์ให้เสร็จก่อนอัปเดตเว็บแอปพลิเคชัน
รับลายนิ้วมือ SHA-256 ของแอป
หากต้องการกําหนดค่าลิงก์เนื้อหาดิจิทัลของ PWA' คุณต้องมีลายนิ้วมือ SHA-256 สําหรับใบรับรองที่ใช้เพื่อลงนามพัสดุที่ผู้ใช้ได้รับในโทรศัพท์
พร้อม Play App Signing
หากคุณตั้งค่า Play App Signing สําหรับแอปเมื่อสร้างรุ่น (ซึ่งก่อนหน้านี้แนะนํา) คุณจะเห็นลายนิ้วมือ SHA-256 ใน Play Console โปรดทราบว่าใบรับรองนี้แตกต่างจากใบรับรองที่ใช้ในการอัปโหลดแอปพลิเคชัน หากต้องการรับลายนิ้วมือจากภายในแอปพลิเคชันของคุณใน Play Console ให้ไปที่ Releases->Setup->App Integrity ที่นั่น คุณจะเห็นตัวเลือกจํานวนมากในส่วนใบรับรองคีย์ App Signing คัดลอกค่าลายนิ้วมือสําหรับใบรับรอง SHA-256
ไม่ใช้ Play App Signing
หากเลือกไม่ใช้ Play App Signing คีย์ที่ใช้ลงนามแอปพลิเคชันครั้งสุดท้ายจะเป็นคีย์เดียวกับที่ใช้สําหรับอัปโหลดแอปพลิเคชันไปยัง Play Console คุณใช้เครื่องมือคีย์ของ 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 ให้เรียกใช้คําสั่งต่อไปนี้จากภายในไดเรกทอรีเดียวกันที่สร้างขึ้นระหว่าง Bubblewrapping Your PWA โดยแทนที่ <fingerprint> ด้วยลายนิ้วมือที่คัดลอกมาจากขั้นตอนก่อนหน้า
$ bubblewrap fingerprint add <fingerprint>
คําสั่งนี้จะเพิ่มลายนิ้วมือลงในรายการลายนิ้วมือของแอปพลิเคชัน และสร้างไฟล์ assetlinks.json อัปโหลดไฟล์นี้ไปยังไดเรกทอรี .well-known ในต้นทางเดียวกันกับ PWA
7 ลองเลย - ลิงก์เนื้อหาดิจิทัล
ตอนนี้ถึงตาคุณแล้ว สิ่งที่ได้เรียนรู้ในขั้นตอนก่อนหน้ามีดังนี้
- ค้นหาลายนิ้วมือ SHA-256 ของแอป
- สร้างไฟล์ลิงก์เนื้อหาดิจิทัลสําหรับแอปของคุณ
- อัปโหลดไฟล์ลิงก์เนื้อหาดิจิทัลไปยัง PWA
- ยืนยันว่าตั้งค่าไฟล์ลิงก์เนื้อหาดิจิทัลอย่างถูกต้องโดยใช้ API และแอปทดสอบ
8 ทดสอบความรู้ของคุณ
ก่อนที่จะเสร็จสิ้น ให้ทดสอบความรู้และดูว่าคุณได้เรียนรู้อะไรบ้างโดยการตอบคําถามต่อไปนี้ อย่าไปพูดถึงคําตอบสิ!
หลังจากสร้างโปรเจ็กต์ Android ด้วย Bubblewrap แล้ว Sally จะส่งไฟล์ ______ ที่สร้างขึ้นไปยังระบบควบคุมเวอร์ชันของเธอเพื่อให้เธอสร้างไฟล์ใหม่ได้ทุกเมื่อที่ต้องการ
จอมต้องการให้ทีม QA ทดสอบแอป Android ใน PWA เขา ______ Android App Bundle กับแทร็กทดสอบภายใน
แอป PWA ของ Oogie Boogie' ไม่ได้เรียกใช้โหมดเต็มหน้าจอ ปัญหานี้แก้ไขได้โดยการมอบลายนิ้วมือสําหรับใบรับรอง SHA-256 สําหรับ ______ และอัปโหลดไปยังไฟล์ลิงก์เนื้อหาดิจิทัล (Digital Asset Links) ซึ่งอยู่ใน ______ ต้นทางเดียวกับ PWA
9 ทดสอบความรู้ของคุณ - คําตอบ
ตอบคําถามเพื่อทดสอบความรู้
- หลังจากสร้างโปรเจ็กต์ Android ด้วย Bubblewrap แล้ว Sally จะส่งไฟล์ ______ ที่สร้างขึ้นไปยังระบบควบคุมเวอร์ชันของเธอเพื่อให้เธอสร้างไฟล์ใหม่ได้ทุกเมื่อที่ต้องการ
- คําตอบ: twa-manifest.json
- ส่วน: Bubblewrap PWA
- จอมต้องการให้ทีม QA ทดสอบแอป Android ใน PWA เขา ______ Android App Bundle กับแทร็กทดสอบภายใน
- คําตอบ: ป้ายและการอัปโหลด
- ส่วน: การเพิ่มแอปลงใน Google Store ของ Google
- แอป PWA ของ Oogie Boogie' ไม่ได้เรียกใช้โหมดเต็มหน้าจอ ปัญหานี้แก้ไขได้โดยการมอบลายนิ้วมือสําหรับใบรับรอง SHA-256 สําหรับ ______ และอัปโหลดไปยังไฟล์ลิงก์เนื้อหาดิจิทัล (Digital Asset Links) ซึ่งอยู่ใน ______ ต้นทางเดียวกับ PWA
- คําตอบ: sign Signing key, /.well-known/assetlinks.json
- ส่วน: ลิงก์เนื้อหาดิจิทัล
10 ยินดีด้วย
ยินดีด้วย คุณได้ดูวิธีเพิ่ม PWA ไปยัง Google Store ของ Google แล้ว
เมื่อคุณพร้อมที่จะดําเนินการแล้ว ลองทําตามขั้นตอนต่อไปนี้ด้วยตนเอง
- สร้างรุ่นที่ใช้งานจริงของแอป
- เจาะลึกตัวเลือกเพิ่มเติมในการเผยแพร่แอป ซึ่งรวมถึงรุ่น Chrome OS เท่านั้น และรุ่นที่มีแอป Android สําหรับอุปกรณ์เคลื่อนที่ และ PWA สําหรับ Chrome OS
- ดูวิธีตั้งค่า Play Billing สําหรับแอป และใช้งานใน PWA และแบ็กเอนด์
ขอให้สนุกกับการเขียนโค้ด