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

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

Minko Gechev

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

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

בפוסט הזה מוסבר איך להגדיר שמירה במטמון באפליקציה Angular. המערכת יוצאת מנקודה הנחה שאתם כבר מכירים את נושאי ההעברה מראש במטמון ואת קובצי השירות (service worker) באופן כללי. אם אתם צריכים רענון, תוכלו לעיין בפוסט Service Worker ו-Cache Storage API.

היכרות עם קובץ השירות (service worker) של 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:

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

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

זהו קובץ השירות (service worker) של 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 ו-Agular CLI:

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