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

שמירת נכסים במטמון עם Service Worker יכולה לזרז את הביקורים החוזרים ולספק תמיכה אופליין. זה קל, ונכלל ב-Create React App כברירת מחדל.

Houssein Djirdeh

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

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

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

תיבת עבודה ב-CRA

Workbox הוא אוסף של כלים שמאפשרים ליצור ולתחזק קובצי שירות (service worker). ב-CRA, השדה workbox-webpack-plugin כבר כלול ב-build של סביבת הייצור וצריך להפעיל אותו רק בקובץ src/index.js כדי לרשום קובץ שירות (service worker) חדש בכל 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 שמופעלת בה קובץ שירות (service worker) דרך הקובץ הזה:

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

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

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

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

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

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

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

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

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

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

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

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

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

סיכום

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

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