وحدات ES في مشغّلي الخدمات

بديل حديث لـImportScripts()

Jeff Posnick

الخلفية

الوحدات باللغة الإسبانية كانت المفضلة لدى المطوِّرين لبعض الوقت الآن. بالإضافة إلى عدد المزايا الأخرى، وتوفر وعودًا بتنسيق وحدات عالمية حيث يمكن دمج التعليمات البرمجية المشتركة يتم إصدارها مرة واحدة ويتم تشغيلها في المتصفحات وفي بيئات تشغيل بديلة مثل Node.js. بينما وذلك على جميع المتصفحات الحديثة بعض دعم وحدات ES، إلا أنها لا توفر الدعم في كل مكان تشغيل التعليمة البرمجية. على وجه التحديد، إتاحة استيراد وحدات اللغة الإسبانية داخل ملف المتصفح مشغّل الخدمات قد بدأت للتو في الانتشار على نطاق أوسع.

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

حالات الاستخدام

إنّ حالة الاستخدام المثالية لوحدات ES داخل مشغّلي الخدمات هي تحميل مكتبة حديثة أو رمز تهيئة تتم مشاركته مع بيئات تشغيل أخرى متوافقة مع وحدات اللغة الإسبانية

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

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

القيود الحالية

عمليات الاستيراد الثابتة فقط

يمكن استيراد وحدات ES بإحدى الطريقتين التاليتين: ثابتًا باستخدام بنية import ... from '...'، أو ديناميكيًا باستخدام طريقة import(). داخل مشغّل الخدمات، نجد أن بيانات بناء الجملة معتمد حاليًا.

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

في النهاية، قد تتم إزالة هذا الحظر وفرض قيود على الإعلانات الديناميكية (ES) عمليات استيراد الوحدات قد يُسمح باستخدامها. في الوقت الحالي، تأكد من أنك تستخدم بناء الجملة الثابت فقط داخل عامل الخدمة.

ماذا عن العمال الآخرين؟

الدعم لـ وحدات باللغة الإسبانية في "مخصَّصة" العمال—الذين التي تم إنشاؤها باستخدام new Worker('...', {type: 'module'}) — أكثر انتشارًا، تتوفّر هذه الميزة في Chrome وEdge منذ الإصدار 80، بالإضافة إلى الإصدارات الأحدث من Safari. يتيح العاملون المتخصّصون استيراد وحدات ES الثابتة والديناميكية على حد سواء.

تتوفّر وحدات اللغة الإسبانية في Chrome وEdge على العاملون المشترَكون منذ الإصدار 83، ولكن لا في الوقت الحالي في متصفح آخر.

ليس هناك دعم لخرائط الاستيراد

السماح باستيراد خرائط بيئات وقت التشغيل لإعادة كتابة محددات الوحدات، على سبيل المثال، إلحاق عنوان URL لشبكة توصيل محتوى (CDN) مفضّلة يمكن تحميل وحدات ES من خلالها.

في حين أن Chrome وEdge الإصدار 89 والإصدارات الأحدث خرائط الاستيراد، فهي حاليًا لا يمكن استخدامها مع الخدمة العمال.

دعم المتصفح

تتوفّر وحدات ES في مشغّلي الخدمات في Chrome وEdge بدءًا من الإصدار 91.

أضافت Safari الدعم في الإصدار 122 من Technology Preview ومن المتوقّع أن يتوقّع المطوّرون طرح هذه الوظيفة في الإصدار الثابت من Safari في المستقبل.

مثال على الرمز

هذا مثال أساسي على استخدام وحدة إسبانية مشتركة في window الخاصة بتطبيق الويب مع تسجيل مشغّل خدمات يستخدم وحدة ES نفسها:

// Inside config.js:
export const cacheName = 'my-cache';

// Inside your web app:
<script type="module">
  import {cacheName} from './config.js';
  // Do something with cacheName.

  await navigator.serviceWorker.register('es-module-sw.js', {
    type: 'module',
  });
</script>

// Inside es-module-sw.js:
import {cacheName} from './config.js';

self.addEventListener('install', (event) => {
  event.waitUntil((async () => {
    const cache = await caches.open(cacheName);
    // ...
  })());
});

التوافق مع الأنظمة القديمة

سيعمل المثال أعلاه بشكل جيد إذا كانت جميع المتصفِّحات متوافقة مع وحدات اللغة الإسبانية في للعاملين في الخدمة، ولكن اعتبارًا من هذه الكتابة، ليس هذا هو الحال.

للتوافق مع المتصفحات التي لا يتوفر لها دعم مدمج، يمكنك تشغيل النص البرمجي لمشغل الخدمات من خلال برنامج حزم متوافق مع وحدة ES لإنشاء مشغّل الخدمات الذي يتضمن جميع رموز الوحدة المضمنة، وسيعمل في المتصفحات القديمة. أما إذا كانت الوحدات التي تحاول استيرادها متوفر مسبقًا مجمعة في IIFE أو UMD، يمكنك استيرادها باستخدام importScripts()

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

_صورة من "فلادو" "باونوفيك" على قناة Unقلاش_