הוספת Progressive Web App ל-Google Play

1. שלום

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

מה תלמדו

  • איך משתמשים ב-Bubblewrap כדי לארוז את אפליקציית ה-PWA לחנות Google Play
  • מהו מפתח חתימה ואיך משתמשים בו
  • איך ליצור אפליקציה חדשה ב-Google Play Console למפתחים ולהגדיר גרסת בדיקה כדי לבדוק את האפליקציה לפני הפרסום
  • מה זה Digital Asset Links ואיך מוסיפים אותם לאפליקציית האינטרנט

מה חשוב לדעת

מה נדרש

מה לא נכלל

2. Bubblewrapping Your PWA

‫Bubblewrap הוא כלי שמאפשר לארוז את ה-PWA שלכם בחבילת אפליקציות ל-Android בקלות, כמו הפעלה של כמה פקודות CLI. הוא עושה זאת על ידי יצירת פרויקט Android שמפעיל את אפליקציית ה-PWA שלכם כפעילות מהימנה באינטרנט.

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

$ mkdir my-pwa && cd my-pwa

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

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

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

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

מפתח החתימה

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

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

אשף Bubblewrap CLI מבקש את המיקום והשם של מפתח החתימה הקיים של המשתמש.

אם אין לכם מפתח חתימה קיים ואתם יוצרים כרטיס מוצר חדש ב-Play Store, אתם יכולים להשתמש בערך ברירת המחדל שסופק על ידי Bubblewrap כדי ליצור מפתח חדש בשבילכם:

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

פלט של Bubblewrap

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

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

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

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

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

$ bubblewrap build

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

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

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

3. אני רוצה לנסות – Bubblewrap

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

העלאה וסיום של אפליקציה

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

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

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

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

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

6. Digital Asset Links

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

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

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

עם Play App Signing

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

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

ללא חתימת אפליקציה ב-Play

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

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

  1. מאתרים את טביעת האצבע מסוג SHA-256 של האפליקציה.
  2. יוצרים קובץ Digital Asset Links לאפליקציה.
  3. מעלים את קובץ ה-Digital Asset Links ל-PWA.
  4. כדי לוודא שקובץ ה-Digital Asset Links מוגדר בצורה נכונה, משתמשים ב-API ובאפליקציית הבדיקה.

8. בחן את ידיעותיך

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

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

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

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

העלאות גרסאות build והעלאות גרסאות חתימות והעלאות

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

upload key, /.well-known/assetlinks.json upload key, /assetlinks.json signing key, /.well-known/assetlinks.json signing key, /assetlinks.json

9. בדיקת הידע – תשובות

תשובות לשאלות בחידון!

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

10. מעולה!

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

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

שיהיה בהצלחה!