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

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

מידע על Codelab זה

subjectהעדכון האחרון: ספט׳ 18, 2024
account_circleנכתב על ידי גוגלר

1.‏ שלום

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

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

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

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

אם משכפלים את המאגר, חשוב לוודא שנמצאים בהסתעפות 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. מעבר לכרטיסייה Application (אפליקציה)
  3. מעבר לקטע Service Workers
  4. מסמנים את התיבה 'אופליין'
  5. רענון הדף בלי לסגור את כלי הפיתוח ל-Chrome

כרטיסיית האפליקציה בכלי הפיתוח ל-Chrome פתוחה ל-Service Workers עם תיבת הסימון Offline (אופליין) מסומנת

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

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);
    }
  });
}

הסבר

הקוד הזה רושם את קובץ השירות הריק 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.

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

הסבר

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

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

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

5.‏ מעולה!

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

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

bug_report דיווח על טעות