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

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

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

סקירה כללית

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

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

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

בואו נתחיל.

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

כלי הפיתוח של אפליקציות Chrome לנייד יכולים לטרגט את iOS מגרסה 6 ואילך ואת Android מגרסה 4.x ואילך.

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

  • נדרשת Node.js בגרסה 0.10.0 (או גרסה מתקדמת יותר) עם 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 Simulator)
    • npm install -g ios-sim
  • אופציונלי: הרשמה כמפתחי iOS
    • הדבר נחוץ לצורך בדיקה במכשירים אמיתיים ולצורך שליחה לחנות האפליקציות.
    • אם אתם מתכננים להשתמש רק בסימולטורים של iPhone או iPad, אתם יכולים לדלג על תהליך הרישום.

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

התקנה של cca דרך npm:

npm install -g cca

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

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

cca checkenv

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

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

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

cca create YourApp

אם כבר פיתחתם אפליקציית Chrome ואתם רוצים לנייד אותה לפלטפורמה לנייד, תוכלו להשתמש בדגל --link-to כדי ליצור symlink.

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), כמו Eclipse או 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

אפשרות ב': פיתוח ויצירת גרסאות build באמצעות סביבת פיתוח משולבת (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. חשוב לוודא שאתם יוצרים את היעד הנכון.

    בפינה הימנית העליונה (לצד הלחצנים Run ו-Stop) יש תפריט נפתח לבחירת הפרויקט והמכשיר היעד. מוודאים שהאפשרות 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, צריך את הגדלים הבאים:

  • 36px, ‏ 48px, ‏ 78px, ‏ 96px

באפליקציות ל-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 כולל קבוצה של מסכי splash של Cordova כברירת מחדל.

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

  • 320px x 480px + 2x
  • 768px x 1024px + 2x (iPad לאורך)
  • 1024px x 768px + 2x (iPad לרוחב)
  • 640px x 1146px

בשלב זה, cca לא משנה את התמונות במסך הפתיחה.

שלב 5: פרסום

בספרייה platforms של הפרויקט יש שני פרויקטים מקומיים מלאים: אחד ל-Android ואחד ל-iOS. אפשר ליצור גרסאות מוצר של הפרויקטים האלה ולפרסם אותן ב-Google Play או ב-App Store ל-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.

פרסום ב-App Store ל-iOS

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

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

    open platforms/ios/*.xcodeproj

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

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

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

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

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

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

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

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

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

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

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

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

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

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