تحديث مكونات الويب - مزيد من الوقت للترقية إلى واجهات برمجة التطبيقات v1 API

Jonathan Bingham
Arthur Evans

تعد واجهات برمجة التطبيقات Web Components v1 API معيارًا للنظام الأساسي للويب وتم شحنه في Chrome وSafari وFirefox و (قريبًا) Edge. يستخدم الإصدار الأول من واجهات برمجة التطبيقات ملايين المواقع الإلكترونية، علمًا أنّه يصل إلى مليارات المستخدمين يوميًا. وقدّم المطوّرون الذين يستخدمون الإصدار 0 من مسودة واجهات برمجة التطبيقات ملاحظات قيّمة أثّرت في المواصفات. ولكن لم يتم دعم واجهات برمجة التطبيقات v0 إلا من خلال Chrome. لضمان إمكانية التشغيل التفاعلي، في أواخر العام الماضي، أعلنّا أنه تم إيقاف مسودة واجهات برمجة التطبيقات هذه نهائيًا وتحديد موعد لإزالتها اعتبارًا من الإصدار 73 من Chrome.

نظرًا لأنّ عددًا كافيًا من المطوّرين طلبوا وقتًا إضافيًا لنقل البيانات، لم تتم إزالة واجهات برمجة التطبيقات من Chrome بعد. تستهدف الآن مسودة واجهات برمجة التطبيقات الإصدار 0 إزالتها في Chrome 80، وذلك قرابة شهر شباط (فبراير) 2020.

وفي ما يلي ما تحتاج إلى معرفته إذا كنت تعتقد أنك قد تستخدم واجهات برمجة التطبيقات v0:

الرجوع إلى المستقبل: إيقاف v0 APIs

لاختبار موقعك الإلكتروني مع إيقاف واجهات v0 APIs، عليك بدء تشغيل Chrome من سطر الأوامر باستخدام العلامات التالية:

--disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

يجب الخروج من Chrome قبل بدء تشغيله من سطر الأوامر. إذا كان لديك Chrome Canary، يمكنك إجراء الاختبار في إصدار Canary مع تحميل هذه الصفحة في Chrome.

لاختبار موقعك الإلكتروني مع إيقاف الإصدار 0 APIs:

  1. إذا كنت تستخدم نظام التشغيل Mac، يمكنك الانتقال إلى chrome://version للعثور على المسار التنفيذي لمتصفِّح Chrome. ستحتاج إلى المسار في الخطوة 3.
  2. إنهاء Chrome.
  3. أعِد تشغيل متصفِّح Chrome باستخدام علامات سطر الأوامر:

    --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

    للحصول على تعليمات حول بدء تشغيل Chrome بالعلامات، يُرجى الاطّلاع على تشغيل Chromium بالعلامات. على سبيل المثال، على نظام التشغيل Windows، يمكنك تشغيل:

    chrome.exe --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports
    
  4. للتحقق مرة أخرى من بدء تشغيل المتصفّح بشكل صحيح، افتح علامة تبويب جديدة، ثم افتح وحدة تحكُّم DevTools، ثم شغِّل الأمر التالي:

    console.log(
    "Native HTML Imports?", 'import' in document.createElement('link'),
    "Native Custom Elements v0?", 'registerElement' in document,
    "Native Shadow DOM v0?", 'createShadowRoot' in document.createElement('div'));
    

    إذا كان كل شيء يعمل على النحو المتوقّع، من المفترَض أن يظهر لك:

    Native HTML Imports? false Native Custom Elements v0? false Native Shadow DOM v0? false
    

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

  5. أخيرًا، قم بتحميل تطبيقك وشغِّل الميزات. إذا كان كل شيء يسير كما هو متوقع، فتكون قد انتهيت.

استخدام رموز polyfill الإصدار 0

توفر رموز polyfill الإصدار 0 من مكونات الويب دعمًا لواجهات برمجة التطبيقات الإصدار v0 على المتصفحات التي لا توفر دعمًا أصليًا. إذا كان موقعك الإلكتروني لا يعمل على Chrome مع إيقاف واجهات برمجة التطبيقات v0 API، من المحتمل أنّك لا تحمِّل رموز polyfill. هناك العديد من الاحتمالات:

  • لا يتم تحميل رموز polyfill على الإطلاق. في هذه الحالة، من المفترض أن يفشل موقعك على المتصفحات الأخرى، مثل Firefox وSafari.
  • أنت تحمِّل رموز polyfill بشكل مشروط بناءً على تحليل المتصفّح. في هذه الحالة، يجب أن يعمل موقعك على متصفحات أخرى. انتقِل مباشرةً إلى تحميل رموز polyfill.

في الماضي، كان فريق مشروع البوليمر وآخرون يوصون بتحميل رموز polyfill بشكل مشروط بناءً على ميزة رصد الميزات. ومن المفترض أن يعمل هذا الأسلوب بشكل جيد في حال إيقاف واجهات برمجة التطبيقات v0 API.

تثبيت رموز polyfill الإصدار 0

لم يتم نشر رموز polyfill الإصدار 0 من مكوّنات الويب مطلقًا في سجلّ npm. يمكنك تثبيت polyfills باستخدام Bower، إذا كان مشروعك يستخدم Bower بالفعل. أو يمكنك التثبيت من ملف ZIP.

  • للتثبيت باستخدام Bower:

    bower install --save webcomponents/webcomponentsjs#^0.7.0

  • للتثبيت من ملف ZIP، قم بتنزيل أحدث إصدار 0.7.x من GitHub:

    https://github.com/webcomponents/webcomponentsjs/releases/tag/v0.7.24

    في حال التثبيت من ملف ZIP، ستحتاج إلى تحديث رموز polyfill يدويًا في حال طرح إصدار آخر. ربما تحتاج إلى التحقق من رموز polyfill باستخدام التعليمة البرمجية.

تحميل رموز polyfill الإصدار 0

يتم توفير رموز polyfill الإصدار 0 من مكونات الويب كحزمتين منفصلتين:

webcomponents-min.js يتضمن جميع رموز polyfill. تتضمّن هذه الحزمة رمز polyfill لـ shadow DOM الذي هو أكبر بكثير من رموز polyfill الأخرى ويتميّز بتأثير أكبر في الأداء. لا تستخدم هذه الحزمة إلا إذا كنت بحاجة إلى دعم shadow DOM.
webcomponents-lite-min.js يتضمّن جميع رموز polyfill باستثناء shadow DOM. ملاحظة: على مستخدمي Polymer 1.x اختيار هذه الحزمة، نظرًا لتضمين محاكاة Shadow DOM في مكتبة البوليمر مباشرةً. يحتاج مستخدمو Polymer 2.x إلى إصدار مختلف من رموز polyfill. يمكنك الاطّلاع على مشاركة مدونة "مشروع البوليمر" للحصول على التفاصيل.

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

لتحميل رموز polyfill بدون شروط:

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-lite-min.js">
</script>

أو الصيغة التالية:

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-min.js">
</script>

إذا تم تثبيت polyfills مباشرةً من GitHub، عليك توفير المسار الذي تم تثبيت polyfill فيه.

إذا قمت بتحميل رموز polyfill بشكل مشروط بناءً على رصد الميزات، من المفترض أن يستمر موقعك الإلكتروني في العمل بعد إزالة الإصدار 0.

في حال تحميل رموز polyfill بشكل مشروط باستخدام تقصّي المتصفِّح (أي تحميل رموز polyfill على متصفّحات غير Chrome)، سيفشل موقعك الإلكتروني بعد إزالة التوافق مع الإصدار 0 من Chrome.

يُرجى مساعدتي بهذا الخصوص. لا أعرف واجهات برمجة التطبيقات التي أستخدمها.

إذا كنت لا تعرف ما إذا كنت تستخدم أيًا من واجهات برمجة التطبيقات v0 API أو أي واجهات برمجة التطبيقات التي تستخدمها، يمكنك التحقّق من نتائج وحدة التحكّم في Chrome.

  1. إذا كنت قد بدأت Chrome في السابق باستخدام علامات إيقاف v0 APIs، فأغلِق Chrome وأعِد تشغيله بشكل طبيعي.
  2. افتح علامة تبويب جديدة في Chrome وحمِّل موقعك الإلكتروني.
  3. اضغط على Control+Shift+J (في أنظمة التشغيل Windows وLinux وChromeOS) أو Command+Option+J (في نظام التشغيل Mac) لفتح وحدة التحكّم في أدوات مطوّري البرامج.
  4. تحقَّق من نتائج وحدة التحكّم للاطّلاع على رسائل الإيقاف النهائي. إذا كان هناك الكثير من مخرجات وحدة التحكم، أدخل "الإيقاف" في المربع الفلتر.
نافذة وحدة تحكّم تعرض تحذيرات الإيقاف النهائي

من المفترض أن تظهر لك رسائل الإيقاف النهائي لكل واجهة برمجة تطبيقات v0 تستخدمها. يعرض الناتج أعلاه رسائل عن عمليات استيراد HTML، والعناصر المخصصة 0، وshadow DOM 0.

إذا كنت تستخدم واحدًا أو أكثر من واجهات برمجة التطبيقات هذه، راجِع استخدام رموز polyfill الإصدار 0.

الخطوات التالية: الانتقال من الإصدار 0

إنّ التأكّد من تحميل رموز polyfill الإصدار 0 v0 يجب أن يضمن استمرار عمل موقعك الإلكتروني بعد إزالة واجهات v0 API. نقترح عليك الانتقال إلى واجهات برمجة التطبيقات Web Components v1 API المتاحة على نطاق واسع.

إذا كنت تستخدم مكتبة مكوّنات ويب، مثل مكتبة البوليمر أو X-Tag أو SkateJS، عليك أولاً التحقّق مما إذا كانت إصدارات أحدث من المكتبة متاحة وتتوافق مع واجهات برمجة التطبيقات v1 API.

إذا كانت لديك مكتبتك الخاصة أو كتبت عناصر مخصّصة بدون مكتبة، عليك الترقية إلى واجهات برمجة التطبيقات الجديدة. قد تساعدك هذه المراجع في إجراء ما يلي:

التلخيص

سيتم إيقاف واجهات برمجة التطبيقات التي تستخدم الإصدار 0 من مسودة مكونات الويب. إذا أغفلت عن هذه المشاركة، احرِص على اختبار تطبيقك مع إيقاف واجهة برمجة التطبيقات v0 API وتحميل رموز polyfill حسب الحاجة.

على المدى الطويل، نشجعك على الترقية إلى أحدث واجهات برمجة التطبيقات ومواصلة استخدام مكونات الويب!