استخدام نافذة مربع العمل

إحدى وحدات Workspace التي لم تحصل على تغطية كافية بعد في هذا المستند هي workbox-window، وهي مجموعة من الوحدات المخصّصة للتشغيل في window. أهداف هذه الوحدة هي:

  • تبسيط عملية تسجيل مشغّلي الخدمات وإجراء تعديلات من خلال مساعدة المطوّرين في تحديد اللحظات المهمة في دورة حياة عاملي الخدمة، ما يسهِّل الاستجابة في تلك اللحظات
  • لمنع المطوّرين من ارتكاب أخطاء شائعة، مثل تسجيل مشغّل خدمات في نطاق غير صحيح.
  • لتبسيط المراسلات بين window ونطاق مشغّل الخدمات

استيراد واستخدام workbox-window

إنّ عملية التصدير التي ستستخدمها غالبًا من workbox-window هي الفئة Workbox التي يمكنك استيرادها في Node أو من شبكة توصيل المحتوى (CDN) في صفحة ويب.

إنشاء حزمة محلية

إذا كانت سلسلة الأدوات تتضمّن أداة حزمة، مثل حزمة ويب أو مجموعة بيانات، يمكنك تجميع workbox-window محليًا.

أولاً، يجب تثبيت "workbox-window" كأداة تعتمد على الإنتاج في تطبيقك:

npm install workbox-window --save

بعد ذلك، في JavaScript في تطبيقك، يمكنك import الصف Workbox من workbox-window:

<script type="module">
import {Workbox} from 'workbox-window';

if ('serviceWorker' in navigator) {
  const wb = new Workbox('/sw.js');

  wb.register();
}
</script>

على الرغم من أنّ نطاق workbox-window صغير جدًا، يمكنك تقسيمه عن المنطق الأساسي للتطبيق على موقعك الإلكتروني باستخدام الديناميكية import، وهو ما قد يقلّل من حجم الحزمة الرئيسية لصفحتك:

<script type="module">
if ('serviceWorker' in navigator) {
  const {Workbox} = await import('workbox-window');

  const wb = new Workbox('/sw.js');
  wb.register();
}
</script>

استخدام شبكة توصيل المحتوى (CDN)

وعلى الرغم من أنّ الطريقة غير المقترَحة، يبقى استخدام workbox-window أسهل من خلال استيراده من شبكة توصيل محتوى (CDN):

<script type="module">
  import {Workbox} from 'https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-window.prod.mjs';

  if ('serviceWorker' in navigator) {
    const wb = new Workbox('/sw.js');

    wb.register();
  }
</script>

ستلاحظ أن العنصر <script> في المثال أعلاه يستخدم السمة type="module". هذا الإجراء مطلوب إذا أردت استخدام عبارات import الثابتة في المتصفِّح بدون خطوة إصدار. إنّ جميع المتصفّحات الرئيسية المتوافقة مع مشغّلي الخدمة تتوافق أيضًا مع وحدات JavaScript، لذا يمكن عرض هذا الرمز في أي متصفّح، لأنّ المتصفّحات القديمة ستتجاهل عناصر <script> التي تحتوي على قيمة السمة type تبلغ "module".

تسجيل مشغّل الخدمات

يتم تسجيل مشغّل الخدمات في workbox-window باستخدام طريقة register الخاصة بالفئة Workbox على النحو التالي:

import {Workbox} from 'workbox-window';

const wb = new Workbox('/sw.js');
wb.register();

قد يبدو أنّ هذا الإجراء يشبه تسجيل مشغّل خدمات بنفسك باستخدام navigator.serviceWorker.register. ومع ذلك، يتولى Workbox.register الانتظار حتى حدث window load قبل تسجيل مشغّل الخدمات. وهذا أمرٌ مرغوب فيه في المواقف التي ينطوي فيها ذلك على تخزين مؤقت، بحيث يمكن تجنب تزايد الطلب على معدل نقل البيانات الذي قد يؤخر بدء تشغيل الصفحة.

التواصل بين window ونطاق مشغّل الخدمات

يملك مشغّلو الخدمات نطاقهم الخاص بشكل منفصل عن window، ويمكنهم الوصول إلى مجموعة فرعية فقط من واجهات برمجة التطبيقات المتوفّرة في window. ومع ذلك، من الممكن الاتصال بين window ومشغّل الخدمات. تتيح دالة workbox-window التواصل السهل بين النطاقين باستخدام طريقة messageSW في وحدة workbox-window.

يستخدم مربع العمل تنسيقًا محددًا للرسائل عبارة عن كائن بالخصائص التالية:

  • type هي سلسلة فريدة مطلوبة تحدّد الرسالة. يجب أن يكون التنسيق بأحرف كبيرة، مع وجود شرطات سفلية تفصل بين الكلمات (على سبيل المثال، CACHE_URLS).
  • meta هي سلسلة اختيارية تمثل اسم حزمة Workbox التي ترسل الرسالة، وعادة ما يتم حذفها.
  • payload هي مَعلمة اختيارية تمثّل البيانات التي تريد إرسالها. يمكن أن يكون أي نوع بيانات.

في ما يلي مثال على آلية عمل messageSW، بدءًا من الرمز في مشغّل الخدمات:

// sw.js
const SW_VERSION = '1.0.0';

self.addEventListener('message', (event) => {
  if (event.data.type === 'GET_VERSION') {
    event.ports[0].postMessage(SW_VERSION);
  }
});

وبعد ذلك تظهر التعليمة البرمجية التالية في صفحة الويب:

const wb = new Workbox('/sw.js');
wb.register();

const swVersion = await wb.messageSW({type: 'GET_VERSION'});
console.log('Service Worker version:', swVersion);

هناك العديد من الحالات التي يكون فيها التواصل بين مشغّل الخدمات وwindow مفيدًا، مثل إبلاغ المستخدم عند توفّر تحديث لعامل الخدمة. تعتمد هذه الوصفة على طريقة مساعد خاصة لـ self.skipWaiting تسمى messageSkipWaiting، والتي ترسل رسالة ذات قيمة type تبلغ SKIP_WAITING.