Fetch API מתקדם: יירוט בקשות ושמירת תגובות במטמון (Caching)

ה-Fetch API הפך לסטנדרט לביצוע בקשות רשת ב-JavaScript מודרני. בעוד שהשימוש הבסיסי בו פשוט, ניצול מלא של הפוטנציאל שלו דורש הבנה של טכניקות מתקדמות כמו יירוט בקשות ושמירת תגובות במטמון (caching). מאמר זה יסקור מושגים אלו לעומק, ויספק דוגמאות מעשיות ושיטות עבודה מומלצות לבניית יישומי ווב בעלי ביצועים גבוהים ונגישות גלובלית.

הבנת ה-Fetch API

ה-Fetch API מספק ממשק חזק וגמיש לאחזור משאבים ברשת. הוא משתמש ב-Promises, מה שמקל על ניהול והבנה של פעולות אסינכרוניות. לפני שנצלול לנושאים מתקדמים, נסקור בקצרה את היסודות:

שימוש בסיסי ב-Fetch

בקשת Fetch פשוטה נראית כך:

            
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

            

              
                Copy
              
            
          

קוד זה מאחזר נתונים מה-URL שצוין, בודק שגיאות HTTP, מנתח את התגובה כ-JSON, ורושם את הנתונים לקונסול. טיפול בשגיאות הוא חיוני להבטחת יישום יציב.

יירוט בקשות

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

• הוספת כותרות אימות (authentication headers)
• שינוי נתוני הבקשה
• רישום בקשות לצורכי ניפוי באגים (debugging)
• יצירת תגובות API מדומות (mocking) במהלך הפיתוח

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

Service Workers: הבסיס ליירוט

Service Worker הוא קובץ JavaScript הפועל ברקע, בנפרד מה-thread הראשי של הדפדפן. הוא יכול ליירט בקשות רשת, לשמור תגובות במטמון, ולספק פונקציונליות במצב לא מקוון. כדי להשתמש ב-Service Worker, יש לרשום אותו תחילה:

            
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(error => {
      console.error('Service Worker registration failed:', error);
    });
}

            

              
                Copy
              
            
          

קוד זה בודק אם הדפדפן תומך ב-Service Workers ורושם את הקובץ service-worker.js. ה-scope מגדיר אילו כתובות URL ה-Service Worker ישלוט עליהן.

הטמעת יירוט בקשות

בתוך הקובץ service-worker.js, ניתן ליירט בקשות באמצעות האירוע fetch:

            
self.addEventListener('fetch', event => {
  // Intercept all fetch requests
  event.respondWith(
    new Promise(resolve => {
      // Clone the request to avoid modifying the original
      const req = event.request.clone();

      // Modify the request (e.g., add an authentication header)
      const headers = new Headers(req.headers);
      headers.append('Authorization', 'Bearer your_api_key');

      const modifiedReq = new Request(req.url, {
        method: req.method,
        headers: headers,
        body: req.body,
        mode: 'cors',
        credentials: req.credentials,
        cache: req.cache,
        redirect: req.redirect,
        referrer: req.referrer,
        integrity: req.integrity
      });

      // Make the modified request
      fetch(modifiedReq)
        .then(response => resolve(response))
        .catch(error => {
          console.error('Fetch error in Service Worker:', error);
          // Optionally, return a default response or error page
          resolve(new Response('Offline', { status: 503, statusText: 'Service Unavailable' }));
        });
    })
  );
});

            

              
                Copy
              
            
          

קוד זה מיירט כל בקשת fetch, משכפל אותה, מוסיף כותרת Authorization, ולאחר מכן מבצע את הבקשה המתוקנת. המתודה event.respondWith() מורה לדפדפן כיצד לטפל בבקשה. חיוני לשכפל את הבקשה; אחרת, תשנו את הבקשה המקורית, מה שעלול להוביל להתנהגות בלתי צפויה. הוא גם מוודא העברה של כל אפשרויות הבקשה המקוריות כדי להבטיח תאימות. שימו לב לטיפול בשגיאות: חשוב לספק חלופה למקרה שה-fetch נכשל (למשל, במצב לא מקוון).

דוגמה: הוספת כותרות אימות

מקרה שימוש נפוץ ליירוט בקשות הוא הוספת כותרות אימות לבקשות API. זה מבטיח שרק משתמשים מורשים יוכלו לגשת למשאבים מוגנים.

            
self.addEventListener('fetch', event => {
  if (event.request.url.startsWith('https://api.example.com')) {
    event.respondWith(
      new Promise(resolve => {
        const req = event.request.clone();
        const headers = new Headers(req.headers);
        // Replace with actual authentication logic (e.g., retrieving token from local storage)
        const token = localStorage.getItem('api_token'); 

        if (token) {
          headers.append('Authorization', `Bearer ${token}`);
        } else {
           console.warn("No API token found, request may fail.");
        }

        const modifiedReq = new Request(req.url, {
          method: req.method,
          headers: headers,
          body: req.body,
          mode: 'cors',
          credentials: req.credentials,
          cache: req.cache,
          redirect: req.redirect,
          referrer: req.referrer,
          integrity: req.integrity
        });

        fetch(modifiedReq)
          .then(response => resolve(response))
          .catch(error => {
            console.error('Fetch error in Service Worker:', error);
            resolve(new Response('Offline', { status: 503, statusText: 'Service Unavailable' }));
          });
      })
    );
  } else {
    // Let the browser handle the request as usual
    event.respondWith(fetch(event.request));
  }
});

            

              
                Copy
              
            
          

קוד זה מוסיף כותרת Authorization לבקשות שמתחילות ב-https://api.example.com. הוא מאחזר את טוקן ה-API מה-local storage. חיוני להטמיע ניהול טוקנים ואמצעי אבטחה נאותים, כגון HTTPS ואחסון מאובטח.

דוגמה: שינוי נתוני בקשה

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

            
self.addEventListener('fetch', event => {
  if (event.request.url.includes('/submit-form')) {
    event.respondWith(
      new Promise(resolve => {
        const req = event.request.clone();
        req.text().then(body => {
          try {
            const parsedBody = JSON.parse(body);
            // Transform the data (e.g., add a timestamp)
            parsedBody.timestamp = new Date().toISOString();

            // Convert the transformed data back to JSON
            const transformedBody = JSON.stringify(parsedBody);

            const modifiedReq = new Request(req.url, {
              method: req.method,
              headers: req.headers,
              body: transformedBody,
              mode: 'cors',
              credentials: req.credentials,
              cache: req.cache,
              redirect: req.redirect,
              referrer: req.referrer,
              integrity: req.integrity
            });

            fetch(modifiedReq)
              .then(response => resolve(response))
              .catch(error => {
                console.error('Fetch error in Service Worker:', error);
                resolve(new Response('Offline', { status: 503, statusText: 'Service Unavailable' }));
              });
          } catch (error) {
            console.error("Error parsing request body:", error);
            resolve(fetch(event.request)); // Fallback to original request
          }
        });
      })
    );
  } else {
    event.respondWith(fetch(event.request));
  }
});

            

              
                Copy
              
            
          

קוד זה מיירט בקשות ל-/submit-form, מנתח את גוף הבקשה כ-JSON, מוסיף חותמת זמן, ולאחר מכן שולח את הנתונים שעברו שינוי לשרת. טיפול בשגיאות הוא חיוני כדי להבטיח שהיישום לא יקרוס אם גוף הבקשה אינו JSON תקין.

שמירת תגובות במטמון (Response Caching)

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

היתרונות של שמירת תגובות במטמון

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

הטמעת שמירת תגובות במטמון עם Service Workers

Service Workers מספקים מנגנון חזק להטמעת שמירת תגובות במטמון. ניתן להשתמש ב-Cache API כדי לאחסן ולאחזר תגובות.

            
const cacheName = 'my-app-cache-v1';
const cacheableUrls = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  'https://api.example.com/data'
];

// Install event:  Cache static assets
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(cacheName)
      .then(cache => {
        console.log('Caching app shell');
        return cache.addAll(cacheableUrls);
      })
  );
});

// Activate event: Clean up old caches
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.filter(name => name !== cacheName)
          .map(name => caches.delete(name))
      );
    })
  );
});

// Fetch event: Serve cached responses or fetch from the network
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // Cache hit - return response
        if (response) {
          return response;
        }

        // Not in cache - fetch from network
        return fetch(event.request).then(
          response => {
            // Check if we received a valid response
            if (!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // Clone the response (because it's a stream and can only be consumed once)
            const responseToCache = response.clone();

            caches.open(cacheName)
              .then(cache => {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        ).catch(error => {
          // Handle network error
          console.error("Fetch failed:", error);
          // Optionally, provide a fallback response (e.g., offline page)
          return caches.match('/offline.html');
        });
      })
  );
});

            

              
                Copy
              
            
          

קוד זה שומר נכסים סטטיים במטמון במהלך אירוע ה-install ומגיש תגובות שמורות במטמון במהלך אירוע ה-fetch. אם תגובה לא נמצאת במטמון, הוא מאחזר אותה מהרשת, שומר אותה במטמון, ואז מחזיר אותה. אירוע ה-activate משמש לניקוי מטמונים ישנים כאשר ה-Service Worker מתעדכן. גישה זו גם מבטיחה שרק תגובות תקינות (סטטוס 200 וסוג 'basic') נשמרות במטמון.

אסטרטגיות מטמון (Cache Strategies)

ישנן מספר אסטרטגיות מטמון שונות שבהן ניתן להשתמש, בהתאם לצרכי היישום שלכם:

• מטמון-תחילה (Cache-First): נסו להגיש את התגובה מהמטמון תחילה. אם היא לא נמצאת, אחזרו אותה מהרשת ושמרו אותה במטמון. זה טוב לנכסים סטטיים ומשאבים שאינם משתנים בתדירות גבוהה.
• רשת-תחילה (Network-First): נסו לאחזר את התגובה מהרשת תחילה. אם זה נכשל, הגישו אותה מהמטמון. זה טוב לנתונים דינמיים שצריכים להיות עדכניים.
• מטמון, ואז רשת (Cache, then Network): הגישו את התגובה מהמטמון באופן מיידי, ואז עדכנו את המטמון עם הגרסה האחרונה מהרשת. זה מספק טעינה ראשונית מהירה ומבטיח שלמשתמש תמיד יהיו הנתונים העדכניים ביותר (בסופו של דבר).
• ישן-בזמן-אימות-מחדש (Stale-While-Revalidate): החזירו תגובה שמורה במטמון באופן מיידי ובמקביל בדקו ברשת גרסה מעודכנת. עדכנו את המטמון ברקע אם גרסה חדשה יותר זמינה. דומה ל-"מטמון, ואז רשת" אך מספק חווית משתמש חלקה יותר.

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

דוגמה: שמירת תגובות API במטמון

הנה דוגמה לשמירת תגובות API במטמון באמצעות אסטרטגיית Cache-First:

            
self.addEventListener('fetch', event => {
  if (event.request.url.startsWith('https://api.example.com')) {
    event.respondWith(
      caches.match(event.request)
        .then(response => {
          // Cache hit - return response
          if (response) {
            return response;
          }

          // Not in cache - fetch from network
          return fetch(event.request).then(
            response => {
              // Check if we received a valid response
              if (!response || response.status !== 200 || response.type !== 'basic') {
                return response;
              }

              // Clone the response (because it's a stream and can only be consumed once)
              const responseToCache = response.clone();

              caches.open(cacheName)
                .then(cache => {
                  cache.put(event.request, responseToCache);
                });

              return response;
            }
          );
        })
    );
  } else {
    // Let the browser handle the request as usual
    event.respondWith(fetch(event.request));
  }
});

            

              
                Copy
              
            
          

קוד זה שומר במטמון תגובות API מ-https://api.example.com. כאשר מתבצעת בקשה, ה-Service Worker בודק תחילה אם התגובה כבר נמצאת במטמון. אם כן, התגובה מהמטמון מוחזרת. אם לא, הבקשה מתבצעת לרשת, והתגובה נשמרת במטמון לפני שהיא מוחזרת.

שיקולים מתקדמים

פסילת מטמון (Cache Invalidation)

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

• Cache Busting: הוסיפו מספר גרסה או חותמת זמן ל-URL של המשאב. כאשר המשאב משתנה, ה-URL משתנה, והדפדפן יאחזר את הגרסה החדשה.
• תפוגה מבוססת-זמן: הגדירו גיל מקסימלי לתגובות שמורות במטמון. לאחר זמן התפוגה, הדפדפן יאחזר גרסה חדשה מהשרת. השתמשו בכותרת Cache-Control כדי לציין את הגיל המקסימלי.
• פסילה ידנית: השתמשו במתודה caches.delete() כדי להסיר ידנית תגובות שמורות במטמון. ניתן להפעיל זאת על ידי אירוע בצד השרת או פעולת משתמש.
• WebSockets לעדכונים בזמן אמת: השתמשו ב-WebSockets כדי לדחוף עדכונים מהשרת ללקוח, ולפסול את המטמון בעת הצורך.

רשתות להפצת תוכן (CDNs)

רשתות להפצת תוכן (CDNs) הן רשתות מבוזרות של שרתים השומרות תוכן במטמון קרוב יותר למשתמשים. שימוש ב-CDN יכול לשפר משמעותית את הביצועים עבור משתמשים ברחבי העולם על ידי הפחתת זמן השהיה וצריכת רוחב פס. ספקי CDN פופולריים כוללים את Cloudflare, Amazon CloudFront ו-Akamai. בעת שילוב עם CDNs, ודאו שכותרות ה-Cache-Control מוגדרות כראוי להתנהגות מטמון אופטימלית.

שיקולי אבטחה

בעת הטמעת יירוט בקשות ושמירת תגובות במטמון, חיוני לשקול השלכות אבטחה:

• HTTPS: השתמשו תמיד ב-HTTPS כדי להגן על נתונים במעבר.
• CORS: הגדירו כראוי Cross-Origin Resource Sharing (CORS) כדי למנוע גישה לא מורשית למשאבים.
• חיטוי נתונים: חטאו קלט משתמש כדי למנוע התקפות cross-site scripting (XSS).
• אחסון מאובטח: אחסנו נתונים רגישים, כמו מפתחות API וטוקנים, באופן מאובטח (למשל, באמצעות עוגיות HTTPS-only או API לאחסון מאובטח).
• Subresource Integrity (SRI): השתמשו ב-SRI כדי להבטיח שמשאבים שאוחזרו מ-CDNs של צד שלישי לא שונו.

ניפוי באגים ב-Service Workers

ניפוי באגים ב-Service Workers יכול להיות מאתגר, אך כלי המפתחים של הדפדפן מספקים מספר תכונות כדי לעזור:

• לשונית Application: לשונית ה-Application ב-Chrome DevTools מספקת מידע על Service Workers, כולל הסטטוס, ה-scope, ואחסון המטמון שלהם.
• רישום לקונסול: השתמשו בהצהרות console.log() כדי לרשום מידע על פעילות ה-Service Worker.
• Breakpoints: הגדירו breakpoints בקוד ה-Service Worker כדי לעבור שלב-אחר-שלב בביצוע ולבדוק משתנים.
• Update on Reload: הפעילו את "Update on reload" בלשונית ה-Application כדי להבטיח שה-Service Worker מתעדכן בכל פעם שאתם טוענים מחדש את הדף.
• Unregister Service Worker: השתמשו בכפתור "Unregister" בלשונית ה-Application כדי לבטל את רישום ה-Service Worker. זה יכול להיות שימושי לפתרון בעיות או להתחלה מחדש.

סיכום

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

על ידי שליטה בטכניקות מתקדמות אלו של Fetch API, תוכלו לקחת את כישורי פיתוח הווב שלכם לשלב הבא ולבנות יישומי ווב יוצאי דופן באמת.