ذخیره کردن دارایی‌ها در حافظه نهان با کارگر سرویس می‌تواند سرعت بازدیدهای تکراری را افزایش دهد و پشتیبانی آفلاین ارائه دهد. Workbox این کار را آسان می‌کند و به‌طور پیش‌فرض در Create React App گنجانده شده است.
Workbox در
Create React App (CRA) با پیکربندی پیش‌فرضی ساخته شده است که همه
دارایی‌های ثابت را در برنامه شما با هر ساخت پیش‌ذخیره می‌کند.
چرا این اطلاعات مفید است؟
عوامل خدماتی به شما امکان می‌دهند منابع مهم را در حافظه نهان آن ذخیره کنید (پیش‌ذخیره‌سازی در حافظه نهان) تا وقتی کاربر صفحه وب را برای بار دوم بار می‌کند، مرورگر بتواند آن‌ها را از عامل خدماتی بازیابی کند و نیازی به ارسال درخواست به شبکه نباشد. این کار باعث می‌شود صفحه‌ها در بازدیدهای تکراری سریع‌تر بار شوند و همچنین امکان نمایش محتوا در زمانی که کاربر آفلاین است فراهم شود.
Workbox در CRA
Workbox مجموعه‌ای از ابزارها است که به شما امکان می‌دهد کارگران خدمات را ایجاد و نگهداری کنید. در CRA،
workbox-webpack-plugin
ازقبل در ساخت تولید گنجانده شده است و فقط باید در
فایل src/index.js فعال شود تا با هر ساخت،
یک کارگر سرویس جدید ثبت شود:
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 آورده شده است که کارگر سرویس آن ازطریق این فایل فعال شده است:
برای دیدن اینکه کدام دارایی‌ها در حافظه نهان ذخیره می‌شوند:
- برای پیش‌دید کردن سایت، مشاهده برنامه را فشار دهید. سپس
تمام‌صفحه
را فشار دهید. - برای باز کردن DevTools، کلیدهای `Control+Shift+J` (یا `Command+Option+J` در Mac) را فشار دهید.
- روی برگه شبکه کلیک کنید.
- برنامه را مجدداً بار کنید.
متوجه خواهید شد که به‌جای نمایش اندازه بار، ستون Size پیام (from ServiceWorker) را نشان می‌دهد تا نشان دهد این منابع از کارگر سرویس بازیابی شده‌اند.
ازآنجایی‌که کارگر سرویس همه دارایی‌های ثابت را ذخیره می‌کند، سعی کنید از برنامه در حالت آفلاین استفاده کنید:
- در برگه شبکه در DevTools، چارگوش انتخاب آفلاین را فعال کنید تا تجربه آفلاین را شبیه‌سازی کنید.
- برنامه را مجدداً بار کنید.
این برنامه دقیقاً به همان روش کار می‌کند، حتی بدون اتصال شبکه!
تغییر استراتژی‌های ذخیره‌سازی در حافظه نهان
راهبرد پیش‌ذخیره‌سازی پیش‌فرض مورداستفاده Workbox در CRA cache-first است، که در آن همه دارایی‌های ایستا از حافظه پنهان عامل خدماتی واکشی می‌شوند و اگر این کار ناموفق باشد (مثلاً اگر منبع در حافظه پنهان ذخیره نشده باشد)، درخواست شبکه انجام می‌شود. این همان روشی است که محتوا همچنان می‌تواند به کاربران ارائه شود، حتی زمانی که آن‌ها در حالت کاملاً آفلاین هستند.
اگرچه Workbox از تعریف راهبردها و رویکردهای مختلف برای ذخیره منابع ایستا و پویا در حافظه نهان پشتیبانی می‌کند، پیکربندی پیش‌فرض در CRA را نمی‌توان تغییر داد یا بازنویسی کرد، مگراینکه به‌طور کامل خارج شوید. بااین‌حال،
پیشنهاد بازی
برای کاوش افزودن پشتیبانی از فایل workbox.config.js خارجی وجود دارد. این
به توسعه‌دهندگان اجازه می‌دهد تنظیمات پیش‌فرض را فقط با ایجاد یک
فایل workbox.config.js لغو کنند.
مدیریت راهبرد اولویت با حافظه پنهان
تکیه کردن بر حافظه نهان سرویس‌کار در ابتدا و سپس بازگشتن به شبکه راهی عالی برای ساختن سایت‌هایی است که در بازدیدهای بعدی سریع‌تر بار می‌شوند و تا حدودی به‌صورت آفلاین کار می‌کنند. بااین‌حال، چند نکته وجود دارد که باید درنظر گرفته شود:
- چگونه می‌توان رفتارهای ذخیره‌سازی مؤقت توسط یک کارمند خدمات را آزمایش کرد؟
- آیا باید پیامی برای کاربران وجود داشته باشد تا به آن‌ها اطلاع دهد که درحال مشاهده محتوای ذخیره‌شده در حافظه نهان هستند؟
اسناد CRA این نکات و موارد دیگر را به‌طور مفصل توضیح می‌دهد.
نتیجه‌گیری
از یک سرویس‌کار برای پیش‌ذخیره منابع مهم در برنامه خود استفاده کنید تا تجربه سریع‌تری برای کاربران خود و همچنین پشتیبانی آفلاین ارائه دهید.
- اگر از CRA استفاده می‌کنید، کارگر سرویس ازپیش پیکربندی‌شده را در
src/index.jsفعال کنید. - اگر از CRA برای ساختن برنامه React استفاده نمی‌کنید، یکی از کتابخانه‌های متعددی را که Workbox ارائه می‌دهد، مانند
workbox-webpack-plugin، در فرایند ساخت خود بگنجانید. - برای اطلاع از اینکه CRA چه زمانی از فایل لغو
workbox.config.jsپشتیبانی خواهد کرد، این مشکل GitHub را دنبال کنید.