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

ويمكن أن يساعد التخزين المؤقت لمواد العرض مع مشغّل الخدمات في تسريع الزيارات المتكرّرة وتوفير الدعم بلا اتصال بالإنترنت. يسهّل تطبيق Workbox هذه العملية، ويتم تضمينه تلقائيًا في ميزة "إنشاء تطبيق React".

Houssein Djirdeh

إنّ 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) للإشارة إلى أنّه تم استرداد هذه الموارد من عامل الخدمة.

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

وبما أنّ مشغّل الخدمات يخزّن جميع الأصول الثابتة في ذاكرة التخزين المؤقت، حاوِل استخدام التطبيق أثناء عدم الاتصال بالإنترنت:

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

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

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

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

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

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

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

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

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

الخلاصة

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

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