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

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

Minko Gechev

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

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

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

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

ng add @angular/pwa

הפקודה הזו:

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

כברירת מחדל, ה-Service Worker אמור להיות רשום בתוך כמה שניות מטעינת הדף הראשון. אם לא, מומלץ לשנות את registrationStrategy.

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

בפוסט Precache with the Angular service worker מוסבר איך להגדיר את Angular Service Worker. שם מוסבר איך לציין אילו משאבים רוצים ש-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.