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

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

Minko Gechev

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

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

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

אנחנו גאים להציג – קובץ השירות (service worker) של Angular

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

כדי להוסיף את ה-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. הקובץ הזה מורה ל-service worker של Angular איך לשמור את הנכסים באפליקציה במטמון. הקובץ נוצר במהלך תהליך ה-build על סמך התצורה (ngsw-config.json) והנכסים שנוצרו בזמן ה-build.

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

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

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

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

עם זאת, חסר נכס חשוב אחד: nyan.png. כדי לשמור את התמונה הזו במטמון מראש, צריך להוסיף תבנית שכוללת אותה לקובץ ngsw-config.json שנמצא ברמה הבסיסית של סביבת העבודה:

{
  "$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.