איך יוצרים Progressive Web App באמצעות Angular CLI

רוצים להפוך את אפליקציית Angular שלכם לאפליקציה שניתן להתקין? אל תחכו יותר מדי!

Minko Gechev

במאמר הזה נסביר איך להשתמש בממשק שורת הפקודה (CLI) של Angular כדי ליצור Progressive Web App‏ (PWA).

אפשר למצוא את דוגמת הקוד מהמדריך הזה ב-GitHub.

יצירת PWA שאפשר להתקין

כדי להפוך אפליקציית Angular ל-PWA, כל מה שצריך לעשות הוא להריץ פקודה אחת:

ng add @angular/pwa

הפקודה הזו:

• יוצרים service worker עם הגדרת ברירת מחדל של שמירת נתונים במטמון.
• יוצרים קובץ מניפסט, שמגדיר לדפדפן איך האפליקציה צריכה להתנהג כשהיא מותקנת במכשיר של המשתמש.
• מוסיפים קישור לקובץ המניפסט ב-index.html.
• מוסיפים את התג theme-color <meta> אל index.html.
• יוצרים סמלי אפליקציות בספרייה src/assets.

כברירת מחדל, ה-service worker אמור להירשם תוך כמה שניות אחרי טעינת הדף הראשונה. אם לא, כדאי לשנות את registrationStrategy.

התאמה אישית של אפליקציית PWA

במאמר העברה מראש למטמון בעזרת קובץ השירות (service worker) של Angular מוסבר איך להגדיר את קובץ השירות של Angular. שם מוסבר איך לציין אילו משאבים רוצים שה-service worker ישמור במטמון, ואיזו אסטרטגיה הוא צריך ליישם כדי לעשות זאת.

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

כדאי להציץ בקובץ המניפסט שנוצר על ידי Angular CLI:

{
  "name": "manifest-web-dev",
  "short_name": "manifest-web-dev",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    …
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

אפשר לשנות את הערך הרלוונטי בmanifest.webmanifest כדי להתאים אישית כל אחד מהמאפיינים האלה.

אפליקציית PWA מפנה לקובץ המניפסט שלה באמצעות רכיב link ב-index.html. אחרי שהדפדפן ימצא את ההפניה, תוצג ההנחיה הוספה למסך הבית:

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

חשוב להתאים אישית את מאפייני המניפסט והסמלים לפני שפורסים את ה-PWA בסביבת הייצור.

סיכום

כדי ליצור אפליקציית Angular שניתן להתקין:

1. מוסיפים את @angular/pwa לפרויקט באמצעות Angular CLI.
2. עורכים את האפשרויות בקובץ manifest.webmanifest בהתאם לפרויקט.
3. מעדכנים את הסמלים בספרייה src/assets/icons כך שיתאימו לפרויקט.
4. אפשר גם לערוך את theme-color ב-index.html.