יכול להיות שיהיה לכם קשה להגדיר פעילויות אינטרנט מהימנות, במיוחד אם אתם רק רוצים להציג את האתר שלכם. במדריך הזה נסביר איך ליצור פרויקט קטן שמשתמש בפעילויות אינטרנט מהימנות.
בסוף המדריך הזה, תוכלו:
- השתמשתם ב-Bubblewrap כדי ליצור אפליקציה שמשתמשת בפעילות אינטרנט מהימנה ועוברת אימות.
- להבין מתי נעשה שימוש במפתחות החתימה.
- לדעת מה החתימה שמשמשת לבניית אפליקציית Android.
- לדעת איך ליצור קובץ בסיסי של Digital Asset Links.
כדי לפעול לפי המדריך הזה, צריך:
- Node.js מגרסה 10 ואילך.
- טלפון או אמולטור Android שמחוברים ומוגדרים לפיתוח. מפעילים את ניפוי הבאגים ב-USB אם משתמשים בטלפון פיזי.
- דפדפן לנייד שתומך בפעילות Trusted Web.
- אתר שרוצים להציג בפעילות Trusted Web.
אתם יכולים להשתמש בפעילות Trusted Web באפליקציית Android כדי להפעיל כרטיסיית דפדפן במסך מלא, בלי ממשק משתמש של דפדפן. היכולת הזו מוגבלת לאתרים שבבעלותכם. כדי להוכיח בעלות, צריך להגדיר Digital Asset Links.
כשמפעילים פעילות אינטרנט מהימנה, הדפדפן מאמת את הקישורים של נכסים דיגיטליים. אם האימות נכשל, הדפדפן חוזר להצגת האתר ככרטיסייה בהתאמה אישית.
התקנה והגדרה של Bubblewrap
Bubblewrap הוא אוסף של ספריות וכלי לשורת פקודה (CLI) ל-Node.js, שעוזר למפתחים ליצור, לבנות ולהפעיל אפליקציות אינטרנט מתקדמות (PWA) בתוך אפליקציות ל-Android, באמצעות פעילות אינטרנט מהימנה.
מריצים את הפקודה הבאה כדי להתקין את ה-CLI:
npm i -g @bubblewrap/cli
הגדרת הסביבה
כשמריצים את Bubblewrap בפעם הראשונה, הוא מציע להוריד ולהתקין באופן אוטומטי את התלות החיצונית הנדרשת. מומלץ לאפשר הורדות אוטומטיות, כי כך אפשר לוודא שהתלות מוגדרת בצורה נכונה. כדי להשתמש בערכת Java Development Kit (JDK) קיימת או בהתקנה של כלי שורת פקודה של Android, אפשר לעיין במסמכי התיעוד של Bubblewrap.
הפעלה ראשונית של הפרויקט ובנייה שלו
מאתחלים פרויקט Android שעוטף PWA:
bubblewrap init --manifest=https://my-twa.com/manifest.json
Bubblewrap קורא את Web Manifest, מבקש מהמפתחים לאשר את הערכים שישמשו בפרויקט Android ויוצר את הפרויקט באמצעות הערכים האלה.
אחרי שהפרויקט נוצר, מריצים את הפקודה הבאה כדי ליצור קובץ APK:
bubblewrap build
ריצה
בשלב ה-build נוצר קובץ בשם app-release-signed.apk. אפשר להתקין את הקובץ במכשיר פיתוח לצורך בדיקה או להעלות אותו לחנות Play לצורך פרסום.
Bubblewrap מספק פקודה להתקנה ולבדיקה של האפליקציה במכשיר מקומי. כשמכשיר הפיתוח מחובר למחשב, מריצים את הפקודה:
bubblewrap install
אפשר גם להשתמש בכלי adb.
adb install app-release-signed.apk
האפליקציה אמורה להיות זמינה עכשיו במפעיל האפליקציות במכשיר.
כשפותחים את האפליקציה, האתר מושק ככרטיסייה בהתאמה אישית ולא כפעילות Trusted Web. הסיבה לכך היא שעדיין לא הגדרנו את האימות של Digital Asset Links.
חלופות לממשק משתמש גרפי (GUI) ל-Bubblewrap
PWA Builder מספק ממשק משתמש גרפי שמשתמש בספריית Bubblewrap כדי להפעיל את יצירת הפרויקטים של פעילות Trusted Web. כאן אפשר למצוא הוראות לשימוש ב-PWA Builder כדי ליצור אפליקציית Android שפותחת את ה-PWA.
מפתחות חתימה
ב-Digital Asset Links נלקח בחשבון המפתח שבו חתום ה-APK, וסיבה נפוצה לכשל באימות היא שימוש בחתימה שגויה. (חשוב לזכור שאם האימות ייכשל, האתר יופעל ככרטיסייה בהתאמה אישית עם ממשק משתמש של דפדפן בחלק העליון של הדף). כש-Bubblewrap יוצרת את האפליקציה, נוצר קובץ APK עם מפתח שהוגדר בשלב init. עם זאת, כשמפרסמים את האפליקציה ב-Google Play, יכול להיות שייווצר מפתח אחר, בהתאם לאופן שבו בוחרים לטפל במפתחות החתימה. מידע נוסף על מפתחות חתימה ועל הקשר שלהם ל-Bubblewrap ול-Google Play
הגדרת קובץ קישור הנכסים
פרוטוקול Digital Asset Links מורכב בעיקר מקובץ באתר שמפנה לאפליקציה, וממטא-נתונים באפליקציה שמפנים לאתר.
אחרי שיוצרים את קובץ assetlinks.json, מעלים אותו לאתר בנתיב .well-known/assetlinks.json (יחסי לשורש) כדי שהדפדפן יוכל לאמת את האפליקציה בצורה תקינה. במאמר הזה יש מידע מעמיק על הקשר בין Digital Asset Links לבין מפתח החתימה.
בדיקת הדפדפן
פעילות Trusted Web תנסה לפעול בהתאם לבחירת הדפדפן שמוגדרת כברירת מחדל אצל המשתמש. אם דפדפן ברירת המחדל של המשתמש תומך בפעילויות אינטרנט מהימנות, הוא יופעל. אם אין דפדפן כזה, המערכת תבחר דפדפן אחר מותקן שתומך בפעילות אינטרנט מהימנה. לבסוף, התנהגות ברירת המחדל היא חזרה למצב של כרטיסיות מותאמות אישית.
כלומר, אם אתם מנפים באגים שקשורים לפעילויות אינטרנט מהימנות, אתם צריכים לוודא שאתם משתמשים בדפדפן שאתם חושבים שאתם משתמשים בו. כדי לבדוק באיזה דפדפן משתמשים, אפשר להשתמש בפקודה הבאה:
> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome
השלבים הבאים
אם פעלתם לפי ההוראות במדריך הזה, סביר להניח שיצרתם פעילות אינטרנט מהימנה תקינה ויש לכם מספיק ידע כדי לנפות באגים אם האימות ייכשל. אם לא, כדאי לעיין במושגים נוספים ב-Android למפתחי אתרים.
בשלב הבא, יוצרים סמל לאפליקציה. אחרי זה, אפשר לשקול פריסה של האפליקציה בחנות Play.