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

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

Houssein Djirdeh

זהירות: חלק מההדגמות בדף הזה כבר לא פועלות, כי האירוח ב-Glitch הסתיים.

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

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

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

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

Workbox ב-CRA

‫Workbox הוא אוסף של כלים שמאפשרים ליצור ולתחזק קובצי Service Worker. ב-CRA, הקובץ workbox-webpack-plugin כבר כלול ב-production 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) כדי לפתוח את כלי הפיתוח.
• לוחצים על הכרטיסייה רשת.
• טוענים מחדש את האפליקציה.

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

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

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

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

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

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

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

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

טיפול באסטרטגיית cache-first

הסתמכות על המטמון של ה-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.