ميزة "التخزين المؤقت" في "إنشاء تطبيق React باستخدام Workbox"

يمكن أن يؤدي تخزين مواد العرض مؤقتًا باستخدام عامل خدمة إلى تسريع الزيارات المتكررة وتوفير إمكانية الاستخدام بلا إنترنت. تسهّل مكتبة Workbox إجراء ذلك، وهي مضمّنة في Create React App تلقائيًا.

تم دمج Workbox في أداة Create React App (CRA) باستخدام إعدادات تلقائية تُخزِّن مسبقًا كل مواد عرض الثابتة في تطبيقك مع كل عملية إنشاء.

الطلبات أو الردود مع مشغّل الخدمات

ما الفائدة من ذلك؟

تتيح لك مهام الخدمة تخزين الموارد المهمة في ذاكرتها المؤقتة (التخزين المؤقت المُسبَق) لكي يتمكّن المتصفّح من استردادها من مهام الخدمة بدلاً من إرسال طلبات إلى الشبكة عندما يحمّل المستخدِم صفحة الويب للمرة الثانية. ويؤدي ذلك إلى تحميل الصفحات بشكل أسرع عند الزيارات المتكرّرة، بالإضافة إلى القدرة على عرض المحتوى عندما يكون المستخدم غير متصل بالإنترنت.

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 وتم تفعيل عامل خدمة من خلال هذا الملف:

للاطّلاع على مواد العرض التي يتم تخزينها مؤقتًا:

  • لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على ملء الشاشة ملء الشاشة.
  • اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوري البرامج".
  • انقر على علامة التبويب الشبكة.
  • أعِد تحميل التطبيق.

ستلاحظ أنّه بدلاً من عرض حجم الحمولة، يعرض عمود Size رسالة (from ServiceWorker) للإشارة إلى أنّه تم استرداد هذه الموارد من الخدمة العاملة.

طلبات الشبكة مع مشغّل الخدمات

بما أنّ الخدمة العاملة تُخزِّن مؤقتًا جميع مواد العرض الثابتة، جرِّب استخدام التطبيق بلا إنترنت:

  1. في علامة التبويب الشبكة في "أدوات مطوري البرامج"، فعِّل مربّع الاختيار بلا إنترنت لمحاكاة تجربة بلا اتصال بالإنترنت.
  2. أعِد تحميل التطبيق.

يعمل التطبيق بالطريقة نفسها تمامًا، حتى بدون اتصال بالشبكة.

تعديل استراتيجيات التخزين المؤقت

إنّ استراتيجية التخزين المؤقت المُسبَق التلقائية التي تستخدمها Workbox في CRA هي التخزين المؤقت أولاً، حيث يتم جلب جميع مواد العرض الثابتة من ذاكرة التخزين المؤقت لخدمة Worker، وإذا تعذّر ذلك، يتم توجيه طلب الشبكة (إذا لم يتم تخزين المورد مؤقتًا مثلاً). بهذه الطريقة، يمكن عرض المحتوى للمستخدمين حتى بلا اتصال بالإنترنت.

على الرغم من أنّ Workbox يقدّم دعمًا لتحديد استراتيجيات وطرق مختلفة لتخزين الموارد الثابتة والديناميكية، لا يمكن تعديل الإعدادات التلقائية في CRA أو استبدالها ما لم يتم إخراجها بالكامل. ومع ذلك، هناك اقتراح مفتوح لاستكشاف إمكانية إضافة ملف workbox.config.js خارجي. سيسمح ذلك للمطوّرين بإلغاء الإعدادات التلقائية من خلال إنشاءملفworkbox.config.js واحد فقط.

التعامل مع استراتيجية "الاستناد إلى ذاكرة التخزين المؤقت أولاً"

إنّ الاعتماد على ذاكرة التخزين المؤقت لعامل الخدمة أولاً ثم الرجوع إلى الشبكة هو طريقة ممتازة لإنشاء مواقع إلكترونية يتم تحميلها بشكل أسرع عند الزيارات اللاحقة وتعمل بلا إنترنت إلى حدٍ ما. ومع ذلك، هناك بعض الأشياء التي يجب أخذها في الاعتبار:

  • كيف يمكن اختبار سلوكيات التخزين المؤقت من خلال عامل خدمة؟
  • هل يجب عرض رسالة للمستخدمين لإعلامهم بأنّهم يشاهدون محتوى مخزّنًا مؤقتًا؟

توضّح مستندات تقييم الأداء بالتفصيل هذه النقاط وغيرها.

الخاتمة

استخدِم مشغّل خدمات لتخزين الموارد المهمة مسبقًا في تطبيقك لتوفير تجربة أسرع للمستخدمين بالإضافة إلى إتاحة إمكانية الاستخدام بلا إنترنت.

  1. إذا كنت تستخدم ميزة "الاستجابة السريعة للطلبات"، فعِّل عامل الخدمة الذي تم إعداده مسبقًا في src/index.js.
  2. إذا لم تكن تستخدِم CRA لإنشاء تطبيق React، يمكنك تضمين إحدى مكتبات Workbox المتعددة، مثل workbox-webpack-plugin، في عملية الإنشاء.
  3. يمكنك الاطّلاع على موعد توفّر workbox.config.jsملف إلغاء الإعدادات في هذه المشكلة على GitHub.