Progressive Web Apps: מעבר למצב אופליין

1. ברוך הבא

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

מה תלמדו

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

מה חשוב לדעת

• HTML בסיסי ו-JavaScript

מה צריך להכין

• דפדפן שתומך ב-Service Workers

2. שנתחיל?

מתחילים על ידי שכפול או הורדת הקוד למתחילים הדרוש להשלמת מעבדת קוד זו:

שכפול הרפובליקה

להורדת קובץ Zip

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

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

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

קובצי מפתח

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

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

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

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

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

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

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

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

כבר קיים קובץ קובץ שירות (service worker) ולכן כדי לוודא שהשינויים מופיעים, יש לרשום אותו בבקשה שלנו. כדי לעשות זאת, צריך להוסיף את הקוד הבא לחלק העליון של js/main.js:

import swURL from 'sw:../service-worker.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 {
      const reg = await navigator.serviceWorker.register(swURL);
      console.log('Service worker registered! 😎', reg);
    } catch (err) {
      console.log('😥 Service worker registration failed: ', err);
    }
  });
}

יש צורך בתחביר הייבוא של כתובת ה-URL של קובץ השירות (service worker), כדי שכלי ה-build, WMR, יוכל להרכיב את קובץ השירות (service worker) בצורה נכונה. אם אינך משתמש ב-WMR, עליך להגדיר במקום זאת את swURL כנתיב ל-worker שלך.

הסבר

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

משאבי מטמון מראש

כדי שאפליקציית האינטרנט תפעל במצב אופליין, הדפדפן צריך להיות מסוגל להגיב לבקשות רשת ולבחור היכן לנתב אותן. כדי לעשות זאת, צריך להוסיף את 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.log התואמים לאירועים השונים ב-service worker!

אם אירועי console.log לא מופיעים, בודקים את אזור קובץ השירות (service worker) בכרטיסייה 'אפליקציות' כדי לוודא שאין שגיאות עם קובץ השירות (service worker) ושהוא לא במצב המתנה.

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

הסבר

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

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

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

5. מעולה!

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

מעבדת הקוד הבאה בסדרה היא עבודה עם Workbox