איך להוסיף את גרסת Progressive Web App ל-Google Play

1. ברוך הבא

בשיעור ה-Lab הזה תשלימו אפליקציית Progressive Web App שפרסתם ותלווה אותה לאפליקציה להפצת אותה בחנות Play של Google.

מה תלמדו

  • איך להשתמש ב-Bubblewrap כדי לאגד את Progressive Web App בחנות Play של Google
  • מהו מפתח החתימה וכיצד להשתמש בו
  • איך ליצור אפליקציה חדשה ב-Play Console של Google ולהגדיר גרסת בדיקה לבדיקת האפליקציה לפני הפרסום
  • מהם קישורי נכסים דיגיטליים ואיך להוסיף אותם לאפליקציית האינטרנט

מה חשוב לדעת

מה תצטרך להכין

  • אפליקציית Progressive Web App שפורסמה באינטרנט ואפשר לבצע בה שינויים
  • ממשק שורת הפקודה של wrapped מותקן ומוכן לשימוש
  • חשבון פיתוח ב-Google Play
  • מפתח החתימה הקיים שלך, אם כבר הפעלת אפליקציות ב-Google Play
  • מכשיר Android או Chrome OS שבו אפשר לבצע בדיקה

מה לא נכלל?

2. בועות PWA

זוג הבועות הוא כלי שמאפשר לך לארוז את Progressive Web App בקובץ Android App Bundle כמו הרצת כמה פקודות CLI. לשם כך, היא יוצרת פרויקט Android שמשיק את PWA כפעילות מהימנה באינטרנט.

כדי להתחיל, יוצרים ספרייה שבה הפרויקט צריך לפעול ועוברים אליו:

$ mkdir my-pwa && cd my-pwa

לאחר מכן, יש להריץ את הכלי לשורת הפקודה בועת wrapper כדי ליצור את התצורה ופרויקט Android של קובץ ה-Android App Bundle שניתן להעלות ל-Play:

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

כאן, 'מסגרת בועות' מתחילה עם המיקום של קובץ מניפסט של אפליקציית אינטרנט. פעולה זו תיצור תצורת ברירת מחדל מהמניפסט של אפליקציית האינטרנט, ותפעיל אשף במסוף שיאפשר לך לשנות את תצורת ברירת המחדל. פועלים לפי האשף כדי לשנות ערכים שנוצרו על ידי הכלי.

אשף CLI בועת הבועות שמציג אתחול משדה תעופה, עם עקיפת הדומיין example.com וכתובות ה-URL להתחלה.

חתימת מפתח

בחנות Play של Google נדרשת חתימה דיגיטלית של חבילות אפליקציות עם אישור בזמן ההעלאה, לרוב לרוב הוא נקרא 'מפתח חתימה'. זהו אישור בחתימה עצמית שהוא שונה מזה שמשמש להצגת הבקשה שלך ב-HTTPS.

בעת יצירת האפליקציה, יוצג ב-wrapping הנתיב של המפתח. אם האפליקציה שלך רשומה בחנות Play קיימת, עליך להוסיף את הנתיב לאותו מפתח שבו נעשה שימוש בדף האפליקציה הזה.

אשף Clipping בבועות שמבקש מכם לזהות את המיקום והשם של מפתח החתימה הקיים של המשתמש.

אם אין לך חתימת אפליקציה קיימת, והיא יוצרת דף עסקי חדש בחנות Play, אפשר להשתמש בערך ברירת המחדל שסופק על ידי 'בועות' כדי ליצור מפתח חדש עבורך:

אשף CLI בועות שמשאל אם המשתמש רוצה ליצור חתימה חדשה.

פלט בועות

לאחר התחלת הפרויקט על בועות והשלמת האשף, נוצרים הפריטים הבאים:

  • twa-manifest.json – הגדרת הפרויקט המשקפת את הערכים שנבחרו באשף הבועות. כדאי לעקוב אחר הקובץ הזה באמצעות מערכת בקרת הגרסאות, מפני שניתן להשתמש בו כדי ליצור מחדש את כל הפרויקט לבועות שבו יש צורך.
  • קובצי פרויקטים ב-Android – הקבצים שנותרו בספרייה הם הפרויקט ב-Android שנוצר. הפרויקט הזה הוא המקור המשמש לפקודת ה-build של Bubblewrap. כמו כן, ניתן לעקוב אחר הקבצים האלה באמצעות מערכת בקרת הגרסאות.
  • (אופציונלי) חתימת מפתח - אם תבחרו באפשרות 'ביטול מכסה' כדי ליצור את מפתח החתימה עבורכם, המפתח יפלט במיקום המתואר באשף. יש לוודא שהמפתח נשמר במקום בטוח ולהגביל את מספר האנשים שיש להם גישה אליו. המפתח משמש כדי להוכיח שאפליקציות בחנות Play מגיעות ממך.

עם הקבצים האלה, יש לנו עכשיו את כל מה שצריך כדי לבנות קובץ Android App Bundle.

יצירת קובץ Android App Bundle

מתוך אותה ספרייה הרצתם את פקודת ה-Bubble&&339;

$ bubblewrap build

פלט CLI בועות לבניית פרויקט, המבקש סיסמאות למפתח החתימה והצגת הדור של גרסאות שונות של האפליקציה ל-Android.

פקודת ה-build תיצור שני קבצים חשובים:

  • app-release-bundle.aab – קובץ ה-App Bundle של Android. זה הקובץ שיועלה לחנות Google Play.
  • app-release-signed.APK – פורמט אריזה של Android שיכול לשמש להתקנת האפליקציה ישירות במכשיר פיתוח באמצעות הפקודה bubblewrap install.

3. רוצה לנסות? - בועות

עכשיו התור שלך! בעזרת מה שלמדתם בשלב הקודם, נסו לבצע את הפעולות הבאות:

  1. יצירת ספרייה כך שתכלול את פרויקט Android שיצרת.
  2. מפעילים את הספרייה באמצעות בועת עטוף ומניפסט של אפליקציית האינטרנט ב-PWA&#39.
  3. ניתן ליצור מפתח חתימה חדש או לעשות שימוש חוזר במפתח הקיים.
  4. בונים את קובץ ה-Android App Bundle בפרויקט שנוצר על ידי Android.

4. הוספת האפליקציה שלך לחנות Play של Google

עכשיו יש לך קובץ Android App Bundle של PWA והגיע הזמן להעלות אותו לחנות Play של Google! לאחר רישום חשבון המפתח שלך, אפשר לעבור אל Play Console כדי להתחבר ולהתחיל.

יצירת אפליקציה

לאחר ההתחברות, יוצג מסך שבו מוצגות כל האפליקציות שלך. בחלק העליון של המסך יש לחצן, יצירת אפליקציה, שיציג את המסך הבא כדי להנחות אותך ביצירה של דף אפליקציה חדש ל-Android.

מסך שמציג את הטופס ליצירת אפליקציה של Play Console’s.

יש מספר שדות למילוי, כולל שם האפליקציה, שפת ברירת המחדל, אם זו אפליקציה או משחק, אם זה בחינם או בתשלום וכמה הצהרות. לא תהיה לך אפשרות ליצור אפליקציה בלי להסכים להצהרות, לכן חשוב לקרוא אותן ולהבין אותן לפני שמביעים בהן הסכמה.

לאחר מילוי כל הפרטים ולחיצה על הלחצן יצירת אפליקציה בתחתית הטופס, תועברו למרכז הבקרה של האפליקציה החדשה. במרכז הבקרה יופיעו רשימות של משימות שעליכם לבצע כדי להגדיר, להתחיל בדיקה ולפרסם את האפליקציה שלכם.

הגדרת בדיקה פנימית

בדיקה פנימית היא דרך מצוינת להפיץ את האפליקציה במהירות בלי לבדוק אותה לקבוצה של בודקים נאמנים. מסמנים את המשימות ברשימה התחלת הבדיקה עכשיו ובוחרים באפשרות בחירת בודקים.

התחלת הבדיקה של רשימת המשימות

לחיצה על המשימה תעביר אתכם לדף בדיקה פנימית. לכאן תנהל את הגדרת הבדיקה של האפליקציה. כדי לנווט אליה שוב, יש לפתוח את הקטע בדיקה בתפריט השקה בסרגל הצד. הדבר הראשון שצריך לעשות כאן הוא ליצור רשימת כתובות אימייל של בודקים כדי לבדוק את האפליקציה. לשם כך, לוחצים על הקישור יצירת רשימת כתובות אימייל בקטע בודקים בדף. פעולה זו תפתח חלון קופץ שבו תופיע רשימת האימייל שלך.

חלון קופץ שמציג את הטופס ליצירת רשימת כתובות אימייל, שכולל את שם הרשימה, כתובות האימייל, קישור להעלאת קובץ CSV של כתובות אימייל ואזור להצגת כתובות האימייל שהועלו.

בחלון הקופץ הזה נותנים שם לרשימת כתובות האימייל, ואפשר להזין אותן באופן ידני. אפשר גם להעלות קובץ CSV של כתובות אימייל. כשמסיימים, לוחצים על הלחצן שמירת השינויים. תהיה לך אפשרות לחזור לרשימות של כתובות אימייל שכבר יצרת כדי להוסיף או להסיר כתובות אימייל לפי הצורך. לאחר הוספת הבודקים, הגיע הזמן ליצור גרסת בדיקה. לוחצים על הלחצן יצירת גרסה חדשה בחלק העליון של הדף.

דף בדיקה פנימי עם חץ שמצביע על לחצן היצירה החדש.

יצירת גרסה לבדיקה

לאחר הלחיצה על הלחצן יצירת גרסה חדשה, תופיע הודעה במספר קטעים. המפתח הראשון, שלמות אפליקציה, הוא המקום שבו בוחרים איך לנהל את חתימת האפליקציה. אפשרות ברירת המחדל היא לאפשר ל-Google לנהל את מפתח החתימה, זו האפשרות המומלצת כי היא מאובטחת וגם שומרת על יכולת השחזור של האפליקציה במקרה של אובדן מפתח ההעלאה.

חתימת אפליקציה של Play

תרשים זרימה שמציג משמאל לימין מפתח ומפתח ההעלאה, שחותם על האפליקציה שלו ושולח אותו אל Google. לאחר מכן, ל-Google יש חתימת אפליקציה וחותמת על האפליקציה באמצעות המפתח הזה, ולאחר מכן נשלחת אל המשתמש

העלאת אפליקציות וסיומת האפליקציה

אחרי שתבחרו איך לנהל את מפתח החתימה, תתבקשו להעלות את קובץ ה-App Bundle לגרסה. כדי לעשות זאת, גוררים ומשחררים את הקובץ app-release-bundle.aab בטופס הבועה. כדי לסיים את ההשקה, ממלאים את שאר הפרטים של הגרסה ולוחצים על שמירה, ואז על בדיקת הגרסה, ולבסוף על הלחצן התחלת ההשקה לבדיקה פנימית כדי להתחיל את ההשקה. בעקבות זאת, האפליקציה תהיה זמינה לבודקים הפנימיים! חזרה לכרטיסייה בודקים בדף בדיקה פנימית, ניתן להעתיק קישור לשיתוף עם הבודקים כדי שהם יוכלו לגשת לאפליקציה.

דף בדיקה פנימית, עם חץ שמצביע על הקישור להעתקת הקישור כדי לשתף קישור לבדיקה עם בודקים.

5. רוצה לנסות? יצירת אפליקציה

עכשיו התור שלך! בעזרת מה שלמדתם בשלב הקודם, נסו לבצע את הפעולות הבאות:

  1. יצירת אפליקציה חדשה ב-PWA ב-Play Console.
  2. הגדרת בדיקה פנימית עבור האפליקציה והוספת עצמך כבודק.
  3. יש להעלות את קובץ ה-App Bundle וליצור גרסת בדיקה לאפליקציה.
  4. התקן את האפליקציה שלך מחנות Play במכשיר ה-Android או ה-Chrome OS באמצעות הקישור לבדיקה!

6. Digital Asset Links

אם ניסית לבדוק את ה-PWA ב-Play, ייתכן שהוא לא פועל במסך מלא. הסיבה לכך היא שעדיין לא ביצעתם אימות של הבעלות על האתר באמצעות קובץ קישורים לנכס דיגיטלי. בועת אריזה יכולה להגדיר וליצור את חבילת האפליקציה ל-Android, אבל צריך לסיים את הקישור על ידי עדכון אפליקציית האינטרנט.

טביעת אצבע SHA-256 של האפליקציה שלך

כדי להגדיר את קישורי הנכסים הדיגיטליים של PWA' אתם צריכים את טביעת האצבע SHA-256 עבור האישור המשמש לחתימה על החבילה שהמשתמש מקבל בטלפון.

עם חתימת אפליקציה של Play

אם הגדרתם את התכונה 'חתימת אפליקציות ב-Play' בזמן יצירת הגרסה (מומלצת בעבר), ניתן למצוא את טביעת האצבע SHA-256 ב-Play Console. חשוב לזכור שהאישור הזה שונה מהאישור המשמש להעלאת הבקשה שלך. כדי להשיג את טביעת האצבע, מתוך האפליקציה ב-Play Console, נכנסים אל Releases->Setup->App שלמות. שם יש מספר אפשרויות בקטע אישור חתימת אפליקציה. מעתיקים את הערך של טביעת האצבע לאישור SHA-256.

מסך תקינות האפליקציה עם טביעת אצבע של אישור SHA-256.

ללא חתימת אפליקציה של Play

אם ביטלת את ההסכמה לחתימת אפליקציה של Play, המפתח המשמש לחתימה על האפליקציה הסופית יהיה אותו מפתח שבו השתמשת כדי להעלות את האפליקציה ל-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.

התכונה 'גלישת בועות' יכולה לנהל את טביעות האצבע של החתימה שאחזרת וליצור עבורה את הקובץ הנכון של קישורים לנכסים דיגיטליים. כדי להוסיף טביעת אצבע באמצעות 'בועת בועות', מריצים את הפקודה הבאה מתוך אותה ספרייה שנוצרה במהלך wrapping 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 שלה באמצעות 'בועת בועות', סליה מבצעת את קובץ ה-______ שנוצר במערכת בקרת הגרסאות שלה, כדי שהיא תוכל לבנות אותה מחדש בכל עת.

twa-manifest.json מפתח חתימה app-release-bundle.aab build.gradle

ג'ק מבקש מצוות בקרת האיכות שלו לבדוק את אפליקציית PWA Android שלו. הוא ______ את חבילת ה-Android App Bundle למסלול בדיקה פנימית.

העלאות בנייה והעלאות פריטי תוכן שלטים והעלאות

אפליקציית Oogie Boogie'PAndroid לא פועלת במסך מלא. כדי לפתור את הבעיה, הם מקבלים טביעת אצבע לאישור SHA-256 עבור הקובץ ______ ומעלים אותה לקובץ Digital Asset Links שנמצא ב-______ באותו המקור כמו ה-PWA.

מפתח העלאה, /.well-known/assetlinks.json מפתח העלאה, /assetlinks.json מפתח חתימה, /.well-known/assetlinks.json מפתח חתימה, /assetlinks.json

9. בחנו את הידע שלכם - תשובות

תשובות ל"בדיקת הידע" שלך!

  1. לאחר שהיא יוצרת את פרויקט Android שלה באמצעות 'בועת בועות', סליה מבצעת את קובץ ה-______ שנוצר במערכת בקרת הגרסאות שלה, כדי שהיא תוכל לבנות אותה מחדש בכל עת.
  2. ג'ק מבקש מצוות בקרת האיכות שלו לבדוק את אפליקציית PWA Android שלו. הוא ______ את חבילת ה-Android App Bundle למסלול בדיקה פנימית.
  3. אפליקציית Oogie Boogie'PAndroid לא פועלת במסך מלא. כדי לפתור את הבעיה, הם מקבלים טביעת אצבע לאישור SHA-256 עבור הקובץ ______ ומעלים אותה לקובץ Digital Asset Links שנמצא ב-______ באותו המקור כמו ה-PWA.

10. מעולה!

מעולה! למדת איך להוסיף את ה-PWA שלך לחנות Play של Google!

כשתהיו מוכנים לעשות את זה, תוכלו לנסות בעצמכם את השלבים הבאים:

תכנות מהנה!