يمكن أن يؤدي التخزين المؤقت للأصول مع عامل خدمات إلى تسريع الزيارات المتكررة وتوفير الدعم بلا اتصال بالإنترنت. يسهّل Workbox تنفيذ هذا الإجراء، ويتم تضمينه في Create React App تلقائيًا.
Workbox مدمَجة في
أنشِئ تطبيق React (CRA) باستخدام إعدادات تلقائية تخزّن جميع
الأصول الثابتة في تطبيقك مع كل إصدار.
لماذا يُعدّ ذلك مفيدًا؟
يعمل عاملو الخدمة على تمكينك من تخزين الموارد المهمة في ذاكرة التخزين المؤقت (الدفع المسبق) حتى عندما يحمّل المستخدم صفحة الويب للمرة الثانية، المتصفح استردادها من مشغّل الخدمات بدلاً من تقديم طلبات إلى الشبكة. وينتج عن ذلك تحميل الصفحة بشكل أسرع عند تكرار الزيارات، وكذلك في القدرة على عرض المحتوى عندما يكون المستخدم غير متصل بالإنترنت.
صندوق العمل في 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 وفعَّل عامل خدمة من خلال هذا الملف:
للاطّلاع على مواد العرض التي يتم تخزينها مؤقتًا، اتّبِع الخطوات التالية:
- لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط
ملء الشاشة
- اضغط على "Control+Shift+J" (أو "Command+Option+J" على أجهزة Mac) لفتح "أدوات مطوري البرامج".
- انقر على علامة التبويب الشبكة.
- أعِد تحميل التطبيق.
ستلاحظ أنّه بدلاً من عرض حجم الحمولة، يعرض عمود "Size"
رسالة (from ServiceWorker) للإشارة إلى أنّه تم استرداد هذه الموارد
من مشغّل الخدمات.
نظرًا لأن عامل الخدمة يخزِّن جميع الأصول الثابتة مؤقتًا، جرِّب استخدام التطبيق بلا اتصال بالإنترنت:
- في علامة التبويب الشبكة في "أدوات مطوري البرامج"، فعِّل مربّع الاختيار بلا إنترنت من أجل محاكاة تجربة بلا اتصال بالإنترنت.
- أعِد تحميل التطبيق.
يعمل التطبيق بالطريقة نفسها، حتى بدون الاتصال بشبكة اتصال!
تعديل استراتيجيات التخزين المؤقت
إنّ استراتيجية التخزين المُسبق التلقائية التي يستخدمها Workbox في CRA هي cache-first، حيث يتم استرجاع جميع الأصول الثابتة من ذاكرة التخزين المؤقت لمشغّل الخدمات، وفي حال تعذّر ذلك (على سبيل المثال، إذا لم يكن المورد مخزَّنًا مؤقتًا)، يتم تقديم طلب الشبكة. هذا النمط هو كيفية استمرار عرض المحتوى للمستخدمين حتى عند تنفيذ حالة عدم الاتصال بالإنترنت.
على الرغم من أن Workbox يوفر الدعم لتحديد إستراتيجيات وأساليب مختلفة
إلى تخزين الموارد الثابتة والديناميكية مؤقتًا، لا يمكن للتهيئة التلقائية في CRA
يمكن تعديلها أو استبدالها ما لم تخرجها بالكامل. ومع ذلك، هناك
فتح الاقتراح
يمكنك الاطّلاع على إمكانية إضافة ملف workbox.config.js خارجي. هذا النمط
تتيح للمطورين إلغاء الإعدادات الافتراضية من خلال إنشاء
ملف workbox.config.js واحد.
التعامل مع استراتيجية تعتمد على ذاكرة التخزين المؤقت أولاً
الاعتماد على ذاكرة التخزين المؤقت لعامل الخدمة أولاً ثم الرجوع إلى الشبكة طريقة ممتازة لإنشاء مواقع يتم تحميلها بشكل أسرع في الزيارات اللاحقة يعمل بلا اتصال بالإنترنت إلى حد ما. ومع ذلك، هناك بعض الأشياء التي تحتاج إلى من وضعها في الاعتبار:
- كيف يمكن اختبار سلوكيات التخزين المؤقت من قِبل عامل في الخدمة؟
- هل يجب أن تكون هناك رسالة للمستخدمين تخبرهم بأنّهم ينظرون إلى الموقع الإلكتروني المحتوى المخزّن مؤقتًا؟
مؤسسة CRA المستندات تشرح هذه النقاط وغيرها بالتفصيل.
الخاتمة
استخدِم عامل خدمة لتخزين الموارد المهمة مؤقتًا في تطبيقك من أجل تقديم تجربة أسرع للمستخدمين إلى جانب الدعم في وضع عدم الاتصال.
- إذا كنت تستخدم CRA، فعّل مشغّل الخدمات المهيأ مسبقًا في
src/index.js - إذا كنت لا تستخدم CRA لإنشاء تطبيق React، فضمِّن إحدى
يوفر مربع العمل العديد من المكتبات، مثل
workbox-webpack-plugin، في عملية التصميم. - تحقَّق من الحالات التي ستوفّر فيها CRA ملف إلغاء
workbox.config.js. في هذه الدورة مشكلة في GitHub.