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

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

Houssein Djirdeh

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

لمعرفة مواد العرض التي يتم تخزينها مؤقتًا:

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

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

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

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

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

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

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

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

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

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

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

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

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

الخاتمة

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

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