שימוש בחלון של תיבת עבודה

מודול אחד של תיבת עבודה שעדיין לא קיבל כיסוי מספיק בתיעוד הזה הוא workbox-window. זו קבוצת מודולים שמיועדים לפעול ב-window. אלה המטרות של יחידת הלימוד:

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

ייבוא של workbox-window ושימוש בו

הייצוא שבו תשתמשו הכי הרבה פעמים מ-workbox-window הוא הכיתה Workbox, שאפשר לייבא ב-Node או מה-CDN בדף אינטרנט.

יצירת חבילה מקומית

אם כלי הפיתוח שלכם כולל חבילה כמו webpack או Rollup, תוכלו לארוז את workbox-window באופן מקומי.

קודם כול, מתקינים את workbox-window כחבילה שתלויה בסביבת הייצור של האפליקציה:

npm install workbox-window --save

לאחר מכן, ב-JavaScript של האפליקציה, תוכלו import את המחלקה Workbox מ-workbox-window:

<script type="module">
import {Workbox} from 'workbox-window';

if ('serviceWorker' in navigator) {
  const wb = new Workbox('/sw.js');

  wb.register();
}
</script>

אמנם workbox-window הוא די קטן, אבל אפשר לפצל אותו מהלוגיקה העיקרית של האפליקציה באתר באמצעות import דינמי, וכך להקטין את החבילה הראשית של הדף:

<script type="module">
if ('serviceWorker' in navigator) {
  const {Workbox} = await import('workbox-window');

  const wb = new Workbox('/sw.js');
  wb.register();
}
</script>

שימוש ב-CDN

זו לא הגישה המומלצת, אבל דרך קלה יותר להשתמש ב-workbox-window היא לייבא אותו מ-CDN:

<script type="module">
  import {Workbox} from 'https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-window.prod.mjs';

  if ('serviceWorker' in navigator) {
    const wb = new Workbox('/sw.js');

    wb.register();
  }
</script>

שימו לב שרכיב <script> בדוגמה שלמעלה משתמש במאפיין type="module". צריך לעשות זאת אם רוצים להשתמש בהצהרות import סטטיות בדפדפן בלי שלב build. כל הדפדפנים העיקריים שתומכים ב-service worker גם תומכים במודולים של JavaScript, לכן מותר להציג את הקוד הזה בכל דפדפן, כי דפדפנים ישנים יותר יתעלמו מרכיבי <script> עם ערך מאפיין type של "module".

רישום Service Worker

כדי לרשום קובץ שירות ב-workbox-window, משתמשים בשיטה register של הכיתה Workbox באופן הבא:

import {Workbox} from 'workbox-window';

const wb = new Workbox('/sw.js');
wb.register();

יכול להיות שזה דומה לרישום של קובץ שירות (service worker) בעצמך באמצעות navigator.serviceWorker.register. עם זאת, Workbox.register ימתין עד לאירוע window load לפני רישום ה-Service Worker. מומלץ להשתמש באפשרות הזו במצבים שבהם נעשה שימוש בשמירת נתונים במטמון מראש, כדי למנוע מצב של תחרות על רוחב הפס שעלול לעכב את הפעלת הדף.

תקשורת בין ההיקף window לבין היקף ה-service worker

ל-service workers יש היקף משלהם, נפרד מ-window, ויש להם גישה רק לקבוצת משנה של ממשקי ה-API שזמינים ב-window. עם זאת, אפשר לתקשר בין window לבין ה-service worker. workbox-window מאפשר תקשורת קלה יותר בין שני ההיקפים באמצעות ה-method messageSW של המודול של workbox-window.

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

• type היא מחרוזת ייחודית שנדרשת לזיהוי ההודעה. הפורמט צריך להיות באותיות רישיות עם קווים תחתונים שמפרידים בין מילים (לדוגמה, CACHE_URLS).
• meta היא מחרוזת אופציונלית שמייצגת את שם החבילה של תיבת העבודה ששולחת את ההודעה, ובדרך כלל היא לא מוצגת.
• payload הוא פרמטר אופציונלי שמייצג את הנתונים שרוצים לשלוח. הוא יכול להיות מכל סוג נתונים.

בהמשך מופיעה דוגמה לאופן שבו פועלת messageSW, החל מהקוד ב-service worker:

// sw.js
const SW_VERSION = '1.0.0';

self.addEventListener('message', (event) => {
  if (event.data.type === 'GET_VERSION') {
    event.ports[0].postMessage(SW_VERSION);
  }
});

לאחר מכן, מופיע הקוד הבא בדף האינטרנט:

const wb = new Workbox('/sw.js');
wb.register();

const swVersion = await wb.messageSW({type: 'GET_VERSION'});
console.log('Service Worker version:', swVersion);

במקרים רבים התקשורת בין קובץ שירות (service worker) לבין window יכולה להועיל, למשל להודיע למשתמש כשיש עדכון של Service Worker. המתכון הזה מסתמך על שיטת עוזר מיוחדת בשביל self.skipWaiting בשם messageSkipWaiting, ששולחת הודעה עם הערך type של SKIP_WAITING.