הפעלת אפליקציות Chrome בנייד באמצעות Apache Cordova

צרור הכלים להפעלת אפליקציות Chrome בנייד נמצא בגרסת טרום-השקה (Preview) מוקדמת. נשמח לקבל ממך לשלוח לנו משוב באמצעות מעקב אחר בעיות ב-GitHub, פורום המפתחים של אפליקציות Chrome, Stack Overflow או דף G+ למפתחים.

אפליקציית Chrome שפועלת גם במחשב וגם בנייד

סקירה כללית

ניתן להריץ את אפליקציות Chrome ב-Android וב-iOS באמצעות צרור כלים שמבוסס על Apache Cordova, מסגרת לפיתוח לנייד בקוד פתוח לפיתוח אפליקציות לנייד באמצעות שימוש ב-HTML, ב-CSS וב-JavaScript.

Apache Cordova אורזת את קוד האינטרנט של האפליקציה במעטפת אפליקציה מקורית ומאפשרת לכם להפיץ את אפליקציית האינטרנט ההיברידית שלך דרך Google Play ו/או Apple App Store. כדי להשתמש ב-Apache Cordova באפליקציית Chrome קיימת, צריך להשתמש בשורת הפקודה cca (c ordova c hrome a pp) של Google.

מקורות מידע נוספים

  • יש כמה שיקולים מיוחדים שצריך לזכור כשמפתחים עם קורדובה. פרטנו אותם בקטע שיקולים.
  • כדי לראות אילו ממשקי API של Chrome נתמכים בנייד, אפשר להיכנס לדף סטטוס ה-API.
  • כדי לראות תצוגה מקדימה של אפליקציית Chrome במכשיר Android ללא מערכת הכלים, צריך להשתמש באפליקציות Chrome ב-Developer Tool (ADT).

בואו נתחיל.

שלב 1: מתקינים את כלי הפיתוח

אפליקציות Chrome לנייד יכולות לטרגט ל-iOS 6 ואילך ול-Android 4.x+.

יחסי תלות של פיתוח בכל הפלטפורמות

  • נדרשת גרסה 0.10.0 (ואילך) של Node.js עם npm:

    • Windows: מתקינים את Node.js באמצעות קובצי ההפעלה של ההתקנה שניתן להוריד מ nodejs.org.
    • OS X או Linux: קובצי הפעלה של התקנה זמינים גם באתר nodejs.org. אם אם אתם רוצים להימנע מהצורך בגישה לרמה הבסיסית (root), יכול להיות שיהיה נוח יותר להתקין אותו דרך nvm. דוגמה:
    curl https://raw.github.com/creationix/nvm/master/install.sh | sh
source ~/.bash_profile || source ~/.profile || source ~/.bashrc
nvm install 0.10
nvm alias default 0.10

מוגדר טירגוט ל-Android

כשמפתחים אפליקציה ל-Android, צריך גם להתקין:

  • Java JDK 7 (ומעלה)
  • Android SDK גרסה 4.4.2 (ואילך)
    • מתקינים את Android SDK ואת הכלים למפתחי Android, שכלולים בחבילה עם Android ADT.
    • מוסיפים את sdk/tools ו-sdk/platform-tools למשתנה הסביבה PATH.
    • OS X: הגרסה של Eclipse שכלולה ב-Android SDK מחייבת JRE 6. אם המשתמש פותח ב-Eclipse.app לא מופיעה בקשה להתקין את JRE 6. אפשר להוריד אותה דרך Mac App Store.
    • Linux: ל-Android SDK נדרשות ספריות תמיכה ב-32 ביט. ב-Ubuntu, מקבלים את הקבצים האלה דרך: apt-get install ia32-libs
  • Apache Ant

מוגדר טירגוט ל-iOS

לתשומת ליבך, ניתן לפתח ל-iOS רק ב-OS X. בנוסף, צריך להתקין את:

  • Xcode 5 (ואילך) שכולל את כלי שורת הפקודה Xcode
  • ios-deploy (יש לפרוס במכשיר iOS)
    • npm install -g ios-deploy
  • ios-sim (יש צורך לפרוס בסימולטור של iOS)
    • npm install -g ios-sim
  • אופציונלי: הרשמה כמפתח iOS
    • זה הכרחי כדי לבצע בדיקה במכשירים אמיתיים וכדי לשלוח את האפליקציה לחנות האפליקציות.
    • אפשר לדלג על ההרשמה אם מתכננים להשתמש רק בסימולטורים של iPhone/iPad.

התקנת כלי שורת הפקודה cca

התקנת cca דרך npm:

npm install -g cca

אם רוצים לעדכן את ה-toolchain בהמשך עם גרסאות חדשות: npm update -g cca.

כדי לוודא שהכול מותקן כראוי, מריצים את הפקודה הזו משורת הפקודה:

cca checkenv

יוצג מספר הגרסה של cca שהופק פלט ואישור לגבי ה-SDK ל-Android או ל-iOS בתהליך ההתקנה.

שלב 2: יוצרים פרויקט

כדי ליצור פרויקט ברירת מחדל של אפליקציית Chrome לנייד בספרייה בשם YourApp צריך להריץ:

cca create YourApp

אם כבר בניתם אפליקציית Chrome ואתם רוצים לנייד אותה לפלטפורמה לנייד, תוכלו להשתמש סימון --link-to כדי ליצור קישור סימבולי אליו:

cca create YourApp --link-to=path/to/manifest.json

אם במקום זאת אתם רוצים להעתיק את הקבצים הקיימים של אפליקציית Chrome, אפשר להשתמש בדגל --copy-from:

cca create YourApp --copy-from=path/to/manifest.json

אין לכם עדיין אפליקציית Chrome משלכם? נסו אחת מתוך אפליקציות Chrome לדוגמה לנייד תמיכה.

שלב 3: פיתוח

תוכלו ליצור ולהפעיל את האפליקציה בשתי דרכים:

  • אפשרות א': משורת הפקודה, באמצעות הכלי cca, או
  • אפשרות ב': באמצעות סביבת פיתוח משולבת (IDE), כמו ליקוי חמה או Xcode. השימוש בסביבת פיתוח משולבת (IDE) הוא אופציונלי לחלוטין (אבל שימושי בדרך כלל) כדי לסייע בהפעלה, הגדרה וניפוי באגים של האפליקציה ההיברידית שלך לנייד.

אפשרות א': פיתוח ופיתוח באמצעות שורת הפקודה

מהרמה הבסיסית (root) של תיקיית הפרויקט שנוצרה ב-cca:

Android

  • כדי להריץ את האפליקציה באמולטור Android: cca emulate android
    • הערה: כדי לבצע את הפעולה הזו, צריך להגדיר אמולטור. כדי להגדיר זאת, אפשר להריץ את android avd. כדי להוריד תמונות נוספות של אמולטור, מריצים את android. כדי שהתמונות ב-Intel יפעלו מהר יותר, מתקינים את HAXM של Intel.
  • כדי להריץ את האפליקציה במכשיר Android מחובר: cca run android

iOS

  • כדי להריץ את האפליקציה בסימולטור iOS: cca emulate ios
  • כדי להפעיל את האפליקציה במכשיר iOS מחובר: cca run ios

אפשרות ב': פיתוח ופיתוח באמצעות סביבת פיתוח משולבת (IDE)

Android

  1. במצב ליקוי חמה, בוחרים 'File ->' Import.
  2. בחירת Android > Existing Android Code Into Workspace.
  3. ייבוא מהנתיב שיצרת באמצעות cca.
    • צפויים להיות שני פרויקטים לייבוא, אחד מהם הוא *-CordovaLib.
  4. לוחצים על הלחצן 'הפעלה' כדי להפעיל את האפליקציה.
    • יהיה עליך ליצור תצורת הרצה (כמו בכל יישומי Java). אתם בדרך כלל מקבלים בפעם הראשונה שהתבקשתי לעשות זאת.
    • גם בפעם הראשונה יהיה עליך לנהל את המכשירים או האמולטורים.

iOS

  1. פותחים את הפרויקט ב-Xcode על ידי הקלדת הפקודה הבאה בחלון הטרמינל:

    cd YourApp
open platforms/ios/*.xcodeproj

  2. חשוב לוודא שאתם יוצרים את היעד הנכון.

    בפינה הימנית העליונה (לצד הלחצנים 'הפעלה' ו'עצירה'), יש תפריט נפתח לבחירת פרויקט היעד במכשיר. מוודאים שהאפשרות YourApp נבחרה ולא CordovaLib.

  3. לוחצים על הלחצן 'הפעלה'.

ביצוע שינויים בקוד המקור של האפליקציה

קובצי ה-HTML, ה-CSS וה-JavaScript נמצאים בספרייה www של תיקיית פרויקט ה-cca.

חשוב: אחרי שמבצעים שינויים ב-www/, צריך להריץ את cca prepare לפני פריסה תרגום מכונה. אם מריצים את cca build, cca run או cca emulate משורת הפקודה, שלב ההכנה יתבצע באופן אוטומטי. אם מפתחים באמצעות Eclipse/XCode, צריך להריץ cca prepare ידנית.

ניפוי באגים

אפשר לנפות באגים באפליקציית Chrome בנייד באותו אופן שבו מנפים באגים באפליקציות Cordova.

שלב 4: השלבים הבאים

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

מניפסט לנייד

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

צריך לשנות את הערכים כאן בהתאם.

סמלים

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

ב-Android נדרשים הגדלים הבאים:

  • 36 פיקסלים, 48 פיקסלים, 78 פיקסלים, 96 פיקסלים

באפליקציות ל-iOS, הגדלים הנדרשים משתנים בהתאם למכשיר שבו אתם תומכים: iOS 6 לעומת iOS 7. מספר הסמלים המינימלי הנדרש הוא:

  • iOS 6: 57px, 72px, 114px, 144px
  • iOS 7: 72px, 120px, 152px

רשימת סמלים מלאה תיראה כך בקובץ ה-manifest.json:

"icons": {
  "16": "assets/icons/icon16.png",
  "36": "assets/icons/icon36.png",
  "48": "assets/icons/icon48.png",
  "57": "assets/icons/icon57.png",
  "72": "assets/icons/icon72.png",
  "78": "assets/icons/icon78.png",
  "96": "assets/icons/icon96.png",
  "114": "assets/icons/icon114.png",
  "120": "assets/icons/icon120.png",
  "128": "assets/icons/icon128.png",
  "144": "assets/icons/icon144.png",
  "152": "assets/icons/icon152.png"
}

הסמלים יועתקו למקומות המתאימים בכל פלטפורמה בכל הרצה cca prepare

מסכי פתיחה

אפליקציות ב-iOS מציגות מסך פתיחה קצר בזמן שהאפליקציה נטענת. סט של מפזר קורדובה שמוגדר כברירת מחדל מסכים כלולים ב-platforms/ios/[AppName]/Resources/splash.

הגדלים הנדרשים הם:

  • 320 פיקסלים x 480 פיקסלים + 2x
  • 768px x 1024px + 2x (לאורך של iPad)
  • 1024px x 768px + 2x (לרוחב של iPad)
  • 640 x 1146 פיקסלים

התמונות של מסך הפתיחה לא משתנות כרגע על ידי cca.

שלב 5: פרסום

בספריית platforms של הפרויקט יש שני פרויקטים מותאמים אישית מלאים: אחד ל-Android, ו אחת ל-iOS. אפשר ליצור גרסאות הפצה של הפרויקטים האלה ולפרסם אותן ב-Google Play או בחנות האפליקציות של iOS.

פרסום בחנות Play

כדי לפרסם את האפליקציה ל-Android בחנות Play:

  1. מעדכנים את שני מזהי הגרסאות של Android ואז מריצים את cca prepare:

    • android:versionName מוגדר באמצעות המפתח version ב-www/manifest.json (הפעולה הזו מגדירה את של האפליקציה הארוזה למחשב).
    • android:versionCode מוגדר באמצעות המפתח versionCode ב-www/manifest.mobile.js.

  2. עריכה (או יצירה) של platforms/android/ant.properties והגדרת key.store וגם key.alias נכסים (כפי שמוסבר במסמכים למפתחי Android).

  3. יוצרים את הפרויקט:

    ./platforms/android/cordova/build --release

  4. עליך לאתר את קובץ ה-APK החתום שנמצא ב-platforms/android/ant-build/.

  5. מעלים את האפליקציה החתומה אל מסוף המפתחים של Google Play.

פרסום בחנות האפליקציות ל-iOS

  1. צריך לעדכן את גרסת האפליקציה על ידי הגדרת המפתח של CFBundleVersion ב-www/manifest.mobile.js, ואז מריצים את cca prepare.

  2. פותחים את קובץ פרויקט ה-Xcode שנמצא בספרייה platforms/ios:

    open platform/ios/*.xcodeproj

  3. פועלים לפי ההוראות במדריך להפצת אפליקציות של Apple.

שיקולים מיוחדים

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

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

  • בעיות פריסה במסכים קטנים, במיוחד בפריסה לאורך.
  • המערכת תתעלם מהגדלים של חלונות אפליקציית Chrome שהוגדרו דרך chrome.app.window, ובמקום זאת ייעשה שימוש המאפיינים המקוריים של המכשיר.
    • הצעה לתיקון: הסרת מאפייני חלון שמוגדרים בתוך הקוד; לעצב אפליקציה בגדלים שונים או בראשי תיבות.
  • יהיה קשה להקיש על לחצנים וקישורים קטנים עם האצבע.
    • הצעה לתיקון: צריך לשנות את משטחי המגע כך שיהיו לפחות 44 x 44 נקודות.
  • התנהגות לא צפויה כשמסתמכים על העברת העכבר שלא קיימת במסכי מגע.
    • הצעה לתיקון: בנוסף להעברת העכבר, מפעילים רכיבי ממשק משתמש כמו תפריטים נפתחים והסברים קצרים מקישים.
  • השהיה של 300 אלפיות השנייה עבור הקשה.

ממשקי API נתמכים של Chrome

הפכנו רבים מממשקי ה-API העיקריים של Chrome לזמינים ל-Chrome Apps לנייד, כולל:

  • identity – כניסה למשתמשים באמצעות OAuth2
  • payments - מכירת מוצרים וירטואליים בתוך האפליקציה לנייד
  • pushMessaging - דחיפת הודעות לאפליקציה מהשרת שלך
  • sockets – שליחה וקבלה של נתונים ברשת באמצעות TCP ו-UDP
  • התראות (Android בלבד) - שליחת התראות עשירות מהאפליקציה לנייד
  • storage – אחסון ואחזור של נתוני מפתח/ערך באופן מקומי
  • syncFileSystem – אחסון ואחזור קבצים שגובו על ידי Google Drive
  • התראות - הרצת משימות מדי פעם
  • לא פעיל – זיהוי שינויים במצב חוסר הפעילות של המחשב
  • power - ביטול תכונות ניהול צריכת החשמל של המערכת

עם זאת, לא כל ממשקי ה-API של Chrome JavaScript מוטמעים. ולא כל התכונות של Chrome למחשב זמין בנייד:

  • אין תג <webview>
  • אין IndexedDB
  • אין getUserMedia()
  • אין NaCl

אפשר לעקוב אחרי ההתקדמות בדף סטטוס API.

כלי למפתחים של אפליקציות Chrome

Chrome Apps Developer Tool (ADT) ל-Android הוא אפליקציה עצמאית ל-Android שמאפשרת לך להוריד ולהפעיל אפליקציית Chrome בלי להגדיר את צרור הכלים של הפיתוח כפי שמתואר למעלה. כדאי להשתמש את Chrome ADT כאשר רוצים להציג במהירות תצוגה מקדימה של אפליקציית Chrome קיימת (שכבר ארוזה כקובץ .crx) במכשיר Android.

Chrome ADT ל-Android נמצא כרגע בגרסת טרום-אלפא. כדי לנסות, אפשר להיכנס נתוני הגרסה של ChromeADT.APK להוראות התקנה ושימוש.