הגדרה מראש של קובץ תגובה ב-Create React App עם תיבת עבודה

שמירת נכסים במטמון באמצעות שירות עובד (service worker) יכולה לזרז ביקורים חוזרים ולספק תמיכה במצב אופליין. אפשר לעשות זאת בקלות באמצעות Workbox והיא כלולה ב-Create React App כברירת מחדל.

Houssein Djirdeh

Workbox מובנה ב-Create React App ‏(CRA) עם הגדרת ברירת מחדל שמאחסנת מראש את כל הנכסים הסטטיים באפליקציה בכל build.

בקשות או תשובות מה-service worker

למה זה שימושי?

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

Workbox ב-CRA

Workbox הוא אוסף כלים שמאפשרים ליצור ולתחזק שירותי עובדים. ב-CRA, ה-workbox-webpack-plugin כבר כלול ב-build של הייצור, ורק צריך להפעיל אותו בקובץ src/index.js כדי לרשום עובד שירות חדש בכל build:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();
serviceWorker.register();

זוהי דוגמה לאפליקציית React שנוצרה באמצעות CRA, עם שירות פעיל שמופעל באמצעות הקובץ הזה:

כדי לראות אילו נכסים נשמרים במטמון:

  • כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא מסך מלא.
  • מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את DevTools.
  • לוחצים על הכרטיסייה רשתות.
  • טוענים מחדש את האפליקציה.

תוכלו לראות שבמקום להציג את גודל המטען הייעודי (Payload), בעמודה Size מופיעה הודעת (from ServiceWorker) שמציינת שהמשאבים האלה אוחזרו מה-Service Worker.

בקשות רשת עם Service Worker

מאחר שכל הנכסים הסטטיים מאוחסנים במטמון של ה-service worker, כדאי לנסות להשתמש באפליקציה במצב אופליין:

  1. בכרטיסייה Network (רשת) בכלי הפיתוח, מסמנים את התיבה Offline (אופליין) כדי לדמות חוויית שימוש במצב אופליין.
  2. טוענים מחדש את האפליקציה.

האפליקציה עובדת בדיוק באותו אופן, גם בלי חיבור לרשת!

שינוי אסטרטגיות האחסון במטמון

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

למרות ב-Workbox יש תמיכה בהגדרת אסטרטגיות וגישות שונות לשמירה במטמון של משאבים סטטיים ודינמיים, אבל אי אפשר לשנות או להחליף את הגדרות ברירת המחדל ב-CRA אלא אם מוציאים לגמרי את ההגדרה. עם זאת, יש הצעה פתוחה לבדוק הוספה של תמיכה בקובץ workbox.config.js חיצוני. כך המפתחים יוכלו לשנות את הגדרות ברירת המחדל על ידי יצירת קובץ workbox.config.js אחד בלבד.

טיפול באסטרטגיה שמתמקדת במטמון

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

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

במסמכי העזרה של CRA מוסבר בהרחבה על הנקודות האלה ועוד.

סיכום

שימוש בקובץ שירות (service worker) כדי לאחסן מראש משאבים חשובים באפליקציה, כדי לספק למשתמשים חוויית שימוש מהירה יותר וגם תמיכה במצב אופליין.

  1. אם משתמשים ב-CRA, מפעילים את Service Worker שהוגדר מראש ב-src/index.js.
  2. אם אתם לא משתמשים ב-CRA כדי לפתח אפליקציית React, צריך לכלול בתהליך ה-build את אחת מהספריות הרבות שמופיעות ב-Workbox, כמו workbox-webpack-plugin.
  3. כדאי לעקוב אחרי הבעיה הזו ב-GitHub כדי לדעת מתי CRA תתמוך בקובץ שינוי workbox.config.js.