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