קריאה מראש של קובץ השירות של Angular

בעזרת קובץ השירות (service worker) של Angular, האפליקציה מהירה ואמינה יותר ברשתות עם קישוריות גרועה.

Minko Gechev

התמודדות עם קישוריות מוגבלת

כאשר למשתמשים יש גישה מוגבלת לרשת – או בכלל לא – הפונקציונליות של אפליקציית האינטרנט עלולה להיפגע משמעותית ולרוב נכשלת. שימוש ב-service worker על מנת לספק טעינה מראש מאפשר לך ליירט בקשות רשת ולספק תשובות ישירות מהמטמון המקומי, במקום לאחזר אותן מהרשת. לאחר שהנכסים של האפליקציה נשמרו במטמון, הגישה הזו יכולה להאיץ משמעותית את האפליקציה ולגרום לה לפעול כשהמשתמש במצב אופליין.

בפוסט הזה נסביר איך מגדירים מראש שמירה במטמון באפליקציה של Angular. ההנחה היא שאתם כבר מכירים את השמירה במטמון ואת ה-Service Workers באופן כללי. אם אתם זקוקים לרענון, עיינו בפוסט Service workspace ו-cache Storage API.

חדש: קובץ שירות של Angular

צוות Angular מציע מודול של קובץ שירות (service worker) עם פונקציונליות של שמירה מראש במטמון, שמשולבת היטב עם framework ועם ממשק שורת הפקודה של Angular (CLI).

כדי להוסיף את קובץ השירות (service worker), מריצים את הפקודה הבאה ב-CLI:

ng add @angular/pwa

@angular/service-worker ו-@angular/pwa אמורות להיות מותקנות עכשיו באפליקציה ואמורות להופיע ב-package.json. הסכימה ng-add מוסיפה לפרויקט גם קובץ בשם ngsw-config.json, שבו אפשר להשתמש כדי להגדיר את קובץ השירות (service worker). (הקובץ כולל תצורת ברירת מחדל שתתאים לכם מאוחר יותר).

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

ng build --prod

בספרייה dist/service-worker-web-dev יופיע קובץ בשם ngsw.json. הקובץ הזה מנחה את Angular Service Worker איך לשמור את הנכסים באפליקציה במטמון. הקובץ נוצר במהלך תהליך ה-build על סמך התצורה (ngsw-config.json) והנכסים הדיגיטליים שנוצרו בזמן ה-build.

עכשיו, מפעילים שרת HTTP בספרייה שמכילה את הנכסים בסביבת הייצור של האפליקציה, פותחים את כתובת ה-URL הציבורית ובודקים את הבקשות לרשת ב-Chrome DevTools:

  1. לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
  2. לוחצים על הכרטיסייה רשתות.

חשוב לשים לב שכרטיסיית הרשת כוללת אוסף של נכסים סטטיים שההורדה שלהם מתבצעת ישירות ברקע על ידי הסקריפט ngsw-worker.js:

אפליקציה לדוגמה

זהו קובץ השירות של Angular ששולח מראש את הנכסים הסטטיים שצוינו בקובץ המניפסט ngsw.json שנוצר.

אבל חסר נכס חשוב אחד: nyan.png. כדי לשמור מראש את התמונה הזו, צריך להוסיף תבנית שכוללת אותה אל ngsw-config.json, שנמצאת ברמה הבסיסית (root) של סביבת העבודה:

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js",
        "/assets/*.png"
        ]
      }
    },
    ...
}

בעקבות השינוי הזה, כל תמונות ה-PNG שבתיקייה /assets יתווספו לקבוצת נכסי המשאבים app. מכיוון שהשדה installMode של קבוצת הנכסים הזו מוגדר לערך prefetch, קובץ השירות (service worker) ישמור מראש את כל הנכסים שצוינו, ועכשיו הם כוללים תמונות בפורמט PNG.

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

סיכום

השימוש ב-Service Worker לביצוע טרום-מטמון יכול לשפר את ביצועי האפליקציות על-ידי שמירת נכסים במטמון מקומי, מה שמשפר את האמינות שלהן ברשתות חלשות. כדי להשתמש בשליחה מראש מהמטמון עם Angular ו-Angular CLI:

  1. צריך להוסיף את החבילה @angular/pwa לפרויקט.
  2. עריכת ngsw-config.json כדי לקבוע מה ה-Service Worker ישמור.