پیش کش در Create React App with Workbox

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 است که یک سرویس دهنده از طریق این فایل فعال شده است:

برای مشاهده اینکه کدام دارایی ها در حافظه پنهان ذخیره می شوند:

• برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید .
• «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
• روی تب Network کلیک کنید.
• برنامه را دوباره بارگیری کنید.

متوجه خواهید شد که به جای نشان دادن اندازه بار، ستون Size یک پیام (from ServiceWorker) نشان می دهد که نشان می دهد این منابع از سرویس دهنده بازیابی شده اند.

از آنجایی که سرویس‌کار تمام دارایی‌های استاتیک را ذخیره می‌کند، سعی کنید از برنامه در حالت آفلاین استفاده کنید:

1. در تب Network در DevTools، کادر آفلاین را فعال کنید تا یک تجربه آفلاین را شبیه سازی کنید.
2. برنامه را دوباره بارگیری کنید.

این برنامه دقیقاً به همان روش عمل می کند، حتی بدون اتصال به شبکه!