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

Jonathan Bingham
X GitHub
Arthur Evans
X GitHub

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

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

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

العودة إلى المستقبل: إيقاف واجهات برمجة التطبيقات من الإصدار 0

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

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

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

لاختبار موقعك الإلكتروني مع إيقاف واجهات برمجة التطبيقات من الإصدار 0:

  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

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

  5. أخيرًا، حمِّل تطبيقك واختبر الميزات. إذا سارت الأمور على النحو المتوقّع، اكتملت العملية.

استخدام مكونات polyfills من الإصدار 0

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

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

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

تثبيت حِزم polyfills من الإصدار 0

لم يتم نشر مكونات Web Components الإصدار 0 القابلة للاستبدال مطلقًا في قاعدة بيانات npm. يمكنك تثبيت العناصر القابلة للاستبدال باستخدام 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، عليك تعديل مكونات الملء اللاحق يدويًا في حال طرح إصدار آخر. من المحتمل أن تحتاج إلى التحقّق من وحدات الملء في الرمز البرمجي.

تحميل حِزم polyfills من الإصدار 0

يتم توفير حِزم Web Components الإصدار 0 الكاملة كحِزمتَين منفصلتَين:

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

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

لتحميل مكونات polyfills بدون قيد أو شرط:

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

أو:

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

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

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

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

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

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

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

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

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

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

من المفترض أن يؤدي التأكّد من تحميل حِزم polyfills من الإصدار 0 إلى استمرار عمل موقعك الإلكتروني عند إزالة واجهات برمجة التطبيقات من الإصدار 0. ننصحك بالانتقال إلى واجهات برمجة تطبيقات Web Components الإصدار 1، وهي متوافقة على نطاق واسع.

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

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

ملخّص

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

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