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

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

Houssein Djirdeh

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

בקשות/תשובות מ-Service Worker

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

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

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

תיבת עבודה היא אוסף של כלים שמאפשרים ליצור ולתחזק שירות ב-Google Workspace for Education. ב-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) מופעל באמצעות הקובץ הזה:

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

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

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

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

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

  1. בכרטיסייה רשת בכלי הפיתוח, מסמנים את התיבה אופליין כדי: סימולציה של חוויה אופליין.
  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, צריך לכלול אחד ספריות רבות ש-Workbox מספק, כמו workbox-webpack-plugin, תהליך ה-build.
  3. כדאי לשים לב מתי CRA יתמוך בקובץ שינוי מברירת המחדל workbox.config.js כאן בעיה ב-GitHub.