אפליקציות Progressive Web App: מעבר למצב אופליין

1. היי!

בשיעור ה-Lab הזה, תיקחו אפליקציית אינטרנט קיימת ותגרמו לה לפעול במצב אופליין. ה-codelab הזה הוא הראשון בסדרת codelabs נלווים לסדנת Progressive Web App. יש עוד שבעה קורסי Codelab בסדרה הזו.

מה תלמדו

• כתיבה של Service Worker באופן ידני
• הוספת Service Worker לאפליקציית אינטרנט קיימת
• שימוש ב-Service Worker וב-Cache Storage API כדי להפוך משאבים לזמינים אופליין

מה חשוב לדעת

• HTML בסיסי ו-JavaScript

מה צריך

• דפדפן שתומך בקובצי שירות (Service Workers)

2. טיפים להגדרה

כדי להתחיל, משכפלים או מורידים את קוד ההתחלה שנדרש להשלמת ה-Codelab הזה:

שכפול המאגר

הורדת קובץ Zip

אם משכפלים את מאגר הנתונים, חשוב לוודא שנמצאים בהסתעפות starter. קובץ ה-ZIP מכיל גם את הקוד של הענף הזה.

בסיס הקוד הזה דורש Node.js בגרסה 14 ואילך. אחרי שהקוד זמין, מריצים את הפקודה npm ci משורת הפקודה בתיקיית הקוד כדי להתקין את כל התלויות שצריך. לאחר מכן, מריצים את npm start כדי להפעיל את שרת הפיתוח של ה-codelab.

קובץ README.md של קוד המקור מספק הסבר לכל הקבצים המופצים. בנוסף, אלה הקבצים הקיימים העיקריים שתעבדו איתם במהלך ה-codelab:

קבצים חשובים

• ‫js/main.js - קובץ JavaScript של האפליקציה הראשית
• ‫service-worker.js – קובץ service worker של האפליקציה

3. בדיקה במצב אופליין

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

1. פותחים את כלי הפיתוח ל-Chrome.
2. מעבר לכרטיסייה 'אפליקציה'
3. מעבר לקטע Service Workers
4. מסמנים את התיבה 'אופליין'
5. רענון הדף בלי לסגור את כלי הפיתוח ל-Chrome

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

4. העברה למצב אופליין

הגיע הזמן להוסיף Service Worker בסיסי. התהליך הזה יתבצע בשני שלבים: רישום של קובץ שירות (service worker) ואחסון במטמון של משאבים.

רישום של קובץ שירות (service worker)

כבר יש קובץ ריק של Service Worker, אז כדי לוודא שהשינויים יופיעו, נרשום אותו באפליקציה שלנו. כדי לעשות זאת, מוסיפים את הקוד הבא לחלק העליון של js/main.js:

// Register the service worker
if ('serviceWorker' in navigator) {
  // Wait for the 'load' event to not block other work
  window.addEventListener('load', async () => {
    // Try to register the service worker.
    try {
      // Capture the registration for later use, if needed
      let reg;

      // Use ES Module version of our Service Worker in development
      if (import.meta.env?.DEV) {
        reg = await navigator.serviceWorker.register('/service-worker.js', {
          type: 'module',
        });
      } else {
        // In production, use the normal service worker registration
        reg = await navigator.serviceWorker.register('/service-worker.js');
      }

      console.log('Service worker registered! 😎', reg);
    } catch (err) {
      console.log('😥 Service worker registration failed: ', err);
    }
  });
}

‫import.meta היא דרך מבוססת-תקנים לאחזור מטא-נתונים ספציפיים להקשר לגבי מודול JavaScript. המשתנה env מוזרק על ידי כלי הבנייה שלנו כדי לספק לנו מידע על הסביבה הנוכחית, כאשר DEV הוא ערך בוליאני שמציין אם אנחנו נמצאים בפיתוח או לא.

הסבר

הקוד הזה רושם את קובץ השירות (service worker) הריק service-worker.js אחרי שהדף נטען, ורק אם האתר תומך בקובצי שירות.

טעינה מראש של משאבים

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

// Choose a cache name
const cacheName = 'cache-v1';
// List the files to precache
const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];

// When the service worker is installing, open the cache and add the precache resources to it
self.addEventListener('install', (event) => {
  console.log('Service worker install event!');
  event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
});

self.addEventListener('activate', (event) => {
  console.log('Service worker activate event!');
});

// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
self.addEventListener('fetch', (event) => {
  console.log('Fetch intercepted for:', event.request.url);
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      if (cachedResponse) {
        return cachedResponse;
      }
      return fetch(event.request);
    }),
  );
});

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

אם אירועי console.log לא מופיעים, בודקים את האזור Service Worker בכרטיסייה Applications כדי לוודא שאין שגיאות ב-Service Worker, ושהוא לא במצב המתנה.

אחר כך, עוברים שוב למצב אופליין ומרעננים את האתר. הוא אמור להיטען גם כשאתם במצב אופליין.

הסבר

במהלך אירוע ההתקנה של קובץ השירות (service worker), נפתח מטמון עם שם באמצעות Cache Storage API. הקבצים והנתיבים שצוינו ב-precacheResources נטענים למטמון באמצעות השיטה cache.addAll. התהליך הזה נקרא טרום-שמירה במטמון כי הוא שומר במטמון את קבוצת הקבצים מראש בזמן ההתקנה, ולא שומר אותם במטמון כשצריך אותם או כשמבקשים אותם.

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

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

5. מעולה!

למדתם איך להעביר את אפליקציית האינטרנט למצב אופליין באמצעות service workers ו-Cache Storage API.

ה-codelab הבא בסדרה הוא Working with Workbox