ملخّص لأهم الأخبار والتحديثات التي تم الإعلان عنها خلال فعالية المنتدى الإلكتروني التي استمرت لمدة 3 أيام، وتذكير بالفعاليات الإقليمية القادمة.
لقد انتهينا للتو من فعالية web.dev LIVE التي استمرت لثلاثة أيام، حيث اجتمع بعض أعضاء منتدى الويب على الإنترنت لمناقشة حالة تطوير الويب. بدأنا كل يوم في منطقة زمنية إقليمية مختلفة، وشارك موظفو Google جولة من التحديثات والأخبار والنصائح بهدف مساعدة المطورين بالأدوات والإرشادات للحفاظ على الويب مستقرًا وقويًا ويمكن الوصول إليه.
إذا فاتك جزء من البث المباشر، يمكنك مشاهدة الجلسات المسجّلة على YouTube. لدينا أيضًا فعاليات إقليمية قادمة في جميع أنحاء العالم تنظّمها مجموعات Google Developer Groups وستقدّم جلسات نظرة متعمّقة حول المواضيع التي تناولناها خلال فعالية web.dev LIVE.
لنتعرّف على بعض الأخبار والتحديثات التي تمت مشاركتها على مدار الأيام الثلاثة.
مؤشرات أداء الويب
أعلن فريق Chrome عن إطلاق مبادرة Web Vitals بهدف توفير إرشادات ومقاييس وأدوات موحّدة لمساعدة المطوّرين في تقديم تجارب ممتازة للمستخدمين على الويب. أعلن أيضًا فريق "بحث Google" مؤخرًا أنّه سيقيّم تجربة الصفحة كمعيار للترتيب، وسيتّخذ من مقاييس مؤشرات أداء الويب الأساسية أساسًا لهذا التقييم.
إنّ الركائز الثلاث لمؤشرات Core Web Vitals لعام 2020 هي سرعة التحميل والتفاعل والثبات البصري لمحتوى الصفحة، ويتم قياسها من خلال المقاييس التالية:
- يقيس مقياس سرعة عرض أكبر محتوى مرئي سرعة التحميل المتصوَّرة ويحدِّد ضمن المخطط الزمني لتحميل الصفحة الوقت الذي من المرجَّح أن تم فيه تحميل المحتوى الرئيسي للصفحة.
- يقيس مقياس مهلة الاستجابة الأولى مدى الاستجابة ويحدّد كميًا التجربة التي يشعر بها المستخدمون عند محاولة التفاعل مع صفحة لأول مرة.
- يحدِّد مقياس متغيّرات التصميم التراكمية مقدار الثبات البصري ويقيس مقدار الحركة غير المتوقّعة لمحتوى الصفحة.
في فعالية web.dev LIVE، شاركنا أفضل الممارسات حول كيفية تحسين مؤشرات أداء الويب الأساسية وكيفية استخدام "أدوات مطوري البرامج في Chrome" لاستكشاف قيم مؤشرات موقعك الإلكتروني. وشاركنا أيضًا العديد من المحادثات الأخرى المتعلقة بالأداء والتي يمكنك العثور عليها على web.dev/live في جدول اليوم الأول.
tooling.report
قد يكون التطوير لمنصة واسعة مثل الويب أمرًا صعبًا. غالبًا ما تكون أدوات الإنشاء في صميم مشروع تطوير تطبيقات الويب، وتؤدي دورًا رئيسيًا في التعامل مع مراحل نشاط المطوّر والمنتج.
لقد رأينا جميعًا ملفات إعدادات تصميم غير عملية، لذا لمساعدة مطوّري تطبيقات الويب ومؤلفي الأدوات في التغلّب على تعقيدات الويب، أنشأنا tooling.report. هو موقع إلكتروني يساعدك في اختيار أداة الإنشاء المناسبة لمشروعك التالي، وتحديد ما إذا كان الانتقال من أداة إلى أخرى يستحق العناء، أو معرفة كيفية دمج أفضل الممارسات في إعدادات الأدوات وقاعدة الرموز البرمجية.
لقد صمّمنا مجموعة من الاختبارات لتحديد أدوات الإنشاء التي تتيح لك اتّباع أفضل الممارسات في مجال تطوير الويب. لقد عملنا مع مؤلفي أداة الإنشاء للتأكد من أننا استخدمنا أدواتهم بشكل صحيح وتمثيلها بشكل عادل.
يغطي الإصدار الأولي من tooling.report webpack v4 وRollup v2 وParcel v2 وBrowserify مع Gulp، والتي يبدو أنها أدوات الإنشاء الأكثر شيوعًا في الوقت الحالي. لقد أنشأنا tooling.report مع مرونة إضافة المزيد من أدوات الإنشاء والاختبارات الإضافية بمساعدة من المنتدى.
إذا لم نذكر إحدى أفضل الممارسات التي يجب اختبارها، يُرجى اقتراحها في مشكلة على GitHub. إذا أردت كتابة اختبار أو إضافة أداة جديدة لم نُدرجها في المجموعة الأولية، نرحّب بمساهمتك.
في الوقت الحالي، يمكنك الاطّلاع على مزيد من المعلومات حول نهجنا في إنشاء tooling.report ومشاهدة جلستنا من web.dev LIVE.
الخصوصية والأمان على الويب
يؤمن Chrome بأهمية توفير شبكة ويب مفتوحة تحترم خصوصية المستخدمين وتحافظ على حالات الاستخدام الرئيسية التي تضمن استمرار عمل الويب للجميع.
في عام 2019، اقترح Chrome تعديلاً على معيار ملفات تعريف الارتباط لتقييد ملفات تعريف الارتباط في سياق الطرف الأول تلقائيًا، وطلب وضع علامة صريحة على ملفات تعريف الارتباط في سياق الطرف الثالث. ويوفّر ذلك على وجه التحديد خط دفاع ضد هجمات تزوير الطلبات عبر المواقع. يتم الآن اعتماد الاقتراح من قِبل Chrome وFirefox وEdge ومتصفحات أخرى.
على الرغم من أنّ Chrome قرّر التراجع مؤقتًا عن هذه التغييرات في ضوء فيروس كورونا المستجد (كوفيد-19)، من المؤسف أنّه خلال الأزمات التي يكون فيها المستخدمون أكثر عرضة للخطر، يزداد أيضًا هذا النوع من الهجمات. لذلك، مع الإصدار الثابت من Chrome 84 (منتصف تموز/يوليو 2020)، سيبدأ طرح التغييرات مرة أخرى في جميع إصدارات Chrome من 80 والإصدارات الأحدث. يمكنك الاطّلاع على إرشادات ملفات تعريف الارتباط بسمة SameSite بالإضافة إلى جلسة web.dev LIVE لمزيد من المعلومات.
علاوةً على ذلك، في إطار مبادرة حماية الخصوصية، يقدّم Chrome عددًا من المقترحات المتعلقة بالمعايير التي تهدف إلى دعم حالات الاستخدام التي تتيح للمستخدمين كسب رزقهم من خلال منصة الويب، ولكن بطريقة تحترم خصوصية المستخدم بشكل أفضل. يسعى Chrome بنشاط للحصول على ملاحظات حول هذه الاقتراحات، ويشارك في المنتديات المفتوحة لرابطة الشبكة العالمية (W3C) لمناقشة الاقتراحات بالإضافة إلى تلك التي قدّمتها أطراف أخرى. يمكنك الاطّلاع على مزيد من المعلومات حول هذه المبادرة في جلسة الأمان والخصوصية على الويب المفتوح.
أخيرًا، بالنظر إلى أمان المستخدم، كانت ثغرة Spectre تعني أنّ الرمز البرمجي الضار الذي يتم تشغيله في إحدى عمليات المتصفّح قد يتمكّن من قراءة أي بيانات مرتبطة بهذه العملية حتى لو كانت من مصدر مختلف. ومن بين الإجراءات التي تتخذها المتصفحات للتخفيف من حدة هذه المشكلة هي عزل المواقع الإلكترونية، أي وضع كل موقع إلكتروني في عملية منفصلة. يمكنك مشاهدة جلسة web.dev LIVE حول سياسات تضمين الموارد من مصادر متعددة وسياسات فتح النوافذ من مصادر متعددة (COOP وCOEP) لمزيد من المعلومات.
إنشاء ويب بإمكانات فعّالة
يمنحك Chrome حرية إنشاء تطبيقات ويب عالية الجودة تتيح لك الوصول إلى أكبر عدد من المستخدمين على مختلف الأجهزة. من خلال الجمع بين إمكانية التثبيت والموثوقية في تطبيقات الويب التقدّمية، مع مشروع الإمكانات (Project Fugu)، يركّز Chrome على ثلاثة أشياء لسد الفجوة بين التطبيقات الخاصة بالنظام الأساسي والويب، لمساعدتك في إنشاء تجارب رائعة وتقديمها.
أولاً، تعمل فِرق Chrome جاهدةً لمنح مطوّري تطبيقات الويب والمستخدمين مزيدًا من التحكّم في تجربة التثبيت، وإضافة عرض ترويجي للتثبيت إلى المربّع المتعدّد الاستخدامات، وغير ذلك. على الرغم من انتشار الويب في كل مكان، لا يزال من المهم لبعض الأنشطة التجارية أن يكون لديها تطبيقها في المتجر. للمساعدة في ذلك، أطلق Chrome Bubblewrap، وهي مكتبة وواجهة سطر أوامر (CLI) تسهّل إدراج تطبيق الويب التقدّمي في "متجر Google Play". في الواقع، يستخدم موقع PWABuilder.com الآن أداة Bubblewrap في الخلفية. ببضع نقرات بالماوس فقط، يمكنك إنشاء حزمة APK وتحميل تطبيق الويب التقدّمي إلى "متجر Google Play"، طالما أنّك تستوفي المعايير.
ثانيًا، يوفّر Chrome تكاملاً أوثق مع نظام التشغيل، مثل إمكانية مشاركة صورة أو أغنية أو أي شيء آخر من خلال استدعاء خدمة المشاركة على مستوى النظام باستخدام Web Share API، أو إمكانية تلقّي المحتوى عند مشاركته من تطبيق مثبّت مختلف. يمكنك إبقاء المستخدمين على اطّلاع دائم أو إشعارهم بشكل دقيق بالنشاط الجديد باستخدام شارات التطبيق. بالإضافة إلى ذلك، أصبح من السهل على المستخدمين بدء إجراء بسرعة باستخدام اختصارات التطبيقات، والتي ستتوفّر في الإصدار 84 من Chrome (منتصف يوليو 2020).
وأخيرًا، يعمل Chrome على توفير إمكانات جديدة تتيح سيناريوهات جديدة لم تكن ممكنة من قبل، مثل برامج التحرير التي تقرأ الملفات وتكتبها على نظام الملفات المحلي للمستخدم، أو تحصل على قائمة بالخطوط المثبّتة محليًا حتى يتمكّن المستخدمون من استخدامها في تصميماتهم.
خلال فعالية web.dev LIVE، تحدّثنا عن العديد من الإمكانات والميزات الأخرى التي تتيح لك تقديم تجربة مماثلة لتلك التي توفّرها التطبيقات المخصّصة لمنصات معيّنة، مع الإمكانات نفسها. يمكنك الاطّلاع على جميع الجلسات على web.dev/live في جدول اليوم الثاني.
الميزات الجديدة في "أدوات مطوري البرامج في Chrome" وLighthouse 6.0
أدوات مطوّري البرامج في Chrome: علامة التبويب "المشاكل الجديدة" ومحاكي عيوب الألوان ودعم Web Vitals
من أهم ميزات "أدوات مطوري البرامج في Chrome" هي قدرتها على رصد المشاكل في صفحة الويب ولفت انتباه المطوّر إليها. وهذا الأمر مهم جدًا مع انتقالنا إلى المرحلة التالية من الويب الذي يركّز على الخصوصية. للحدّ من الإشعارات المزعجة والفوضى في وحدة التحكّم، أطلقت "أدوات مطوّري البرامج في Chrome" علامة التبويب "المشاكل" التي تركّز على ثلاثة أنواع من المشاكل المهمة للبدء بها: مشاكل ملفات تعريف الارتباط والمحتوى المختلط ومشاكل COEP. يمكنك مشاهدة جلسة web.dev LIVE حول العثور على المشاكل وحلّها باستخدام علامة التبويب "المشاكل" للبدء.
بالإضافة إلى ذلك، بما أنّ Core Web Vitals أصبحت من أهم مجموعات المقاييس التي يتتبّعها مطوّرو تطبيقات الويب ويقيسونها، تهدف "أدوات مطوري البرامج" إلى ضمان قدرة المطوّرين على تتبُّع مستوى أدائهم بسهولة مقارنةً بهذه الحدود. لذلك، تتوفر هذه المقاييس الثلاثة الآن في لوحة "الأداء" ضمن "أدوات مطوّري البرامج في Chrome".
وأخيرًا، مع تزايد عدد المطوّرين الذين يركّزون على تسهيل الاستخدام، قدّمت "أدوات مطوري البرامج في Chrome" أيضًا محاكيًا لقصور رؤية الألوان يتيح للمطوّرين محاكاة الرؤية الضبابية وأنواع أخرى من قصور الرؤية. يمكنك الاطّلاع على مزيد من المعلومات حول هذه الميزة والعديد من الميزات الأخرى في جلسة الميزات الجديدة في "أدوات مطوري البرامج في Chrome".
Lighthouse 6.0: مقاييس جديدة، وقياسات معملية لمؤشرات أداء الويب الأساسية، ونتيجة أداء معدَّلة، وعمليات تدقيق جديدة
Lighthouse هي أداة مبرمَجة ومفتوحة المصدر تساعد المطوّرين في تحسين أداء مواقعهم الإلكترونية. في الإصدار الأخير، ركّز فريق Lighthouse على تقديم إحصاءات استنادًا إلى مقاييس تمنحك نظرة متوازنة على جودة تجربة المستخدم في ما يتعلّق بالجوانب المهمة.
لضمان الاتساق، أضافت Lighthouse دعمًا لمؤشرات أداء الويب الأساسية: LCP وTBT (وكيل FID لأنّ Lighthouse هي أداة معملية ولا يمكن قياس مهلة الاستجابة الأولى (FID) إلا في الميدان) وCLS. أزالت أداة Lighthouse أيضًا ثلاثة مقاييس قديمة: سرعة عرض أوّل محتوى مفيد على الصفحة وأول وقت خمول لوحدة المعالجة المركزية والحد الأقصى المحتمل لمهلة الاستجابة الأولى للتفاعل. وتعود عمليات الإزالة هذه إلى اعتبارات مثل تباين المقاييس والمقاييس الأحدث التي تقدّم انعكاسات أفضل لجزء من تجربة المستخدم التي تحاول Lighthouse قياسها. بالإضافة إلى ذلك، أجرت أداة Lighthouse بعض التعديلات على مدى تأثير كل مقياس في نتيجة الأداء الإجمالية استنادًا إلى ملاحظات المستخدمين.
أضافت أداة Lighthouse أيضًا أداة احتساب النقاط لمساعدتك في استكشاف نقاط الأداء، من خلال توفير مقارنة بين نقاط الإصدارَين 5 و6. عند إجراء تدقيق باستخدام Lighthouse 6.0، يتضمّن التقرير رابطًا يؤدي إلى الأداة مع عرض نتائجك.
وأخيرًا، أضافت Lighthouse مجموعة من عمليات التدقيق الجديدة، مع التركيز على تحليل JavaScript وأدوات تسهيل الاستخدام.
يمكنك معرفة المزيد من خلال مشاهدة جلسة الميزات الجديدة في أدوات قياس السرعة.
مزيد من المعلومات
نشكر جميع أعضاء المنتدى الذين انضموا إلينا لمناقشة الفرص والتحديات التي تواجه منصة الويب.
لخّص هذا المنشور بعض النقاط البارزة في الفعالية، ولكن كان هناك الكثير غيرها. ننصحك بالاطّلاع على جميع الجلسات والاشتراك في نشرة web.dev الإخبارية إذا أردت تلقّي المزيد من المحتوى مباشرةً في بريدك الوارد. ويمكنك زيارة قسم الفعاليات الإقليمية على web.dev/live للعثور على فعالية مجتمعية قادمة في منطقتك الزمنية.