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

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

Minko Gechev

בפוסט הזה נסביר איך להשתמש בממשק שורת הפקודה Angular (CLI) כדי ליצור 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 מוסבר כיצד להגדיר את קובץ השירות (service worker) של 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.