تصميم الويب سريع الاستجابة وتطبيق الويب التقدمي (PWA): الاختلافات

نظرًا لكون هذين النوعين متشابهين جدًا من حيث الشكل والأداء ، يجب أن تتساءل عن سبب عدم وجود مقارنة أكثر تفصيلاً بين النهجين الشائعين لتطوير الويب: تصميم الويب سريع الاستجابة وتطبيق الويب التقدمي. حسنًا ، هذا هو . في هذه المقالة ، سنقارن تصميم الويب سريع الاستجابة مع تطبيق الويب التقدمي ، ونكتشف بالضبط أين يختلفان حقًا عن بعضهما البعض.

تصميم ويب سريع الاستجابة

ما هذا

تصميم الويب سريع الاستجابة (RWD) هو نهج لتطوير الويب تم وصفه لأول مرة بواسطة Ethan Marcotte في عام 2010 - قبل خمس سنوات من مفهوم تطبيق الويب التقدمي.

كيف تعمل

أساسًا ، فلسفة تصميم الويب سريع الاستجابة هي أن التصميم والتطوير يجب أن يتم بهدف الاستجابة لجهاز المستخدم - مما يعني الاستجابة لسلوك الجهاز المستخدم وحجمه ونظامه الأساسي وتوجهه. يتم تحقيق ذلك باستخدام الشبكات المرنة والصور المرنة واستعلامات وسائط CSS:

شبكات السوائل والصور المرنة واستعلامات الوسائط هي المكونات التقنية الثلاثة لتصميم الويب سريع الاستجابة ...

إيثان ماركوت ، تصميم الويب سريع الاستجابة

شبكات السوائل

يمكن لمواقع الويب المتجاوبة المصممة بشبكات السوائل التعامل بشكل أفضل مع أحجام الشاشات المتغيرة في السوق نظرًا لأنه ، بدلاً من تحديد الأبعاد المستندة إلى البكسل ، تتبنى الشبكة المرنة حسابًا جديدًا قائمًا على النسبة المئوية.

صور مرنة

الصور على الويب ليست سلسة بشكل طبيعي ، ولكن مع بعض التكوينات (ضبط خاصية width على 100% ، وضبط خاصية height على auto ) ، يمكن جعل أي صورة تستجيب عبر جميع الأجهزة.

استعلامات وسائط CSS

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

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

أمثلة

تعد مواقع الويب المتجاوبة أمرًا شائعًا في الوقت الحاضر ، وتقريبًا كل موقع ويب تصادفه مستجيب إلى حد ما بطبيعته.

تطبيقات الويب التقدمية

ما هذا

صاغه أليكس راسل لأول مرة في عام 2015 ، وهو التطور الطبيعي التالي للويب نظرًا لفوائده العديدة على موقع الويب المتجاوب النموذجي. يمكن تفسير الجزء " التقدمي " ، وفقًا لـ Pete LePage - محامي مطوري Google ، على أنه " نظرًا لأن المستخدم يبني علاقة مع التطبيق تدريجيًا بمرور الوقت ، فإنه يصبح أكثر قوة ".

لوضعها في شروط الشخص العادي ، فإن PWA هو موقع الويب الشبيه بالتطبيق الخاص بك مع (تقريبًا) جميع الميزات التي يمكنك توقعها من تطبيق محمول أصلي ، بما في ذلك دفع الإشعارات ، وإمكانيات وضع عدم الاتصال ، وما إلى ذلك. وبسبب هذا ، فإن التجربة بأكملها تعد خطوة للأمام من نظيرتها المتجاوبة على موقع الويب حيث يمكن لـ PWA الاحتفاظ بجميع الفوائد المفترضة التي تأتي مع نظام أساسي قائم على الويب.

 مقالة ذات صلة: ما هو تطبيق الويب التقدمي؟

كيف تعمل

من السهل جدًا في الواقع تلخيص المكونات الأساسية لـ PWA. في الأساس ، من أجل جعل جميع الميزات التقدمية المذكورة أعلاه ممكنة ، هذه هي المتطلبات:

بيان تطبيق الويب

بيان تطبيق الويب هو ملف JSON يوفر البيانات الوصفية اللازمة لعملية تثبيت PWA الخاص بك ويحدد كيفية تقديم PWA على الشاشة الرئيسية للمستخدم.

عمال الخدمة

يُنظر إليه عالميًا على أنه المكون الأساسي الذي يجعل جميع الميزات التقدمية لـ PWA ممكنة ، ويعمل عمال الخدمة بشكل مستقل عن المتصفح وعلى مؤشر ترابط مختلف لجافا سكريبت الرئيسي.

سياقات آمنة

كمعيار جديد للويب ، يجب قطع PWA عبر بروتوكول آمن - HTTPS. يضمن ذلك الاتصال الآمن بين كل من المستخدم والخادم وفي المقابل ، مما يضمن تجربة خالية من المخاطر.

أمثلة

نظرًا لأن PWAs لا تتصرف بشكل مختلف عن تطبيقات الهاتف المحمول الأصلية ، فربما تكون قد زرت موقع PWA من قبل دون معرفة ذلك. فكر في المواقع الكبيرة الشبيهة بالتطبيقات مثل Instagram و Pinterest - كلها مدعومة من PWA.

 يوصى بالقراءة: أفضل 12 نموذجًا لتطبيقات الويب التقدمية في عام 2020

حيث تتداخل

تجربة مماثلة مع الميزات الحديثة

إذا كان كل شيء منطقيًا بالنسبة لك حتى الآن ، فيجب أن ترى أن تصميم الويب سريع الاستجابة (RWD) و PWA يتداخلان كثيرًا عندما يتعلق الأمر بتجربة المستخدم. من الناحية الفنية ، يكون PWA سريع الاستجابة - حيث تم تصميم النهج ليكون مناسبًا للعرض على جميع الأجهزة ، مع القليل من اللمسة الحديثة لتمكين المزيد من الميزات المشابهة للتطبيقات.

وبما أنهما طريقتان لتطوير الويب ، فإنهما يشتركان في جميع الفوائد نفسها تقريبًا من الويب والتي تشمل:

• عنوان URL واحد ، قاعدة بيانات واحدة لجميع الأنظمة الأساسية
• أمان محسّن مع HTTPS
• قابلية اكتشاف أفضل ومحدّثة دائمًا

حيث يختلفون

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

من حيث الميزات

يأتي PWA ، بحكم التعريف ، مليئًا بالميزات أكثر من موقع الويب المتجاوب النموذجي الخاص بك. من خلال الاستفادة من التطورات الحديثة في تقنيات الويب ، مثل العاملين في الخدمة وبيان تطبيق الويب ، يمكن لـ PWA تقديم ميزات كانت في السابق حصرية لتطبيقات الأجهزة المحمولة الأصلية مثل:

أضف إلى الشاشة الرئيسية

مع عمال الخدمة المسجلين وبيان تطبيق الويب ، يمكن تثبيت PWA على كل جهاز يحتوي على متصفح داعم.

>> اعرف المزيد: قم بإنشاء PWA الأول الخاص بك

دفع الإخطارات

من خلال العاملين في الخدمة ، يمكنك إرسال الإشعارات وعرضها على أجهزة المستخدم تمامًا كما يفعل التطبيق الأصلي. هذه ميزة حديثة نسبيًا للويب تستفيد من Push API و Notifications API و Web Push Protocol ؛ وفي المستقبل القريب ، تتحسن هذه الميزة بفضل ظهور Notifications Triggers و Badging API.

قدرات دون اتصال

بفضل مساعدة وكيل الشبكة القابل للبرمجة داخل المتصفح أي العاملين في الخدمة ، يمكن لـ PWA التخزين المؤقت وتقديم المحتوى غير المتصل بشكل استباقي دون الحاجة إلى الاعتماد على آليات التخزين المؤقت القديمة مثل ذاكرة التخزين المؤقت لـ HTTP.

ملاحظات : لا يزال بإمكان مواقع الويب المستجيبة الاستفادة من جميع واجهات برمجة التطبيقات الحالية من الويب لتقديم تجربة مستخدم مثالية أيضًا - لن تحصل على جميع الميزات التي تعتمد على العاملين في الخدمة.

 يوصى بالقراءة: تطبيق الويب التقدمي (PWA) والوصول إلى الأجهزة

من حيث الأداء

نظرًا لأن مواقع الويب المتجاوبة لا تزال موقع الويب النموذجي الخاص بك ممنوعًا بسبب جميع العيوب المرتبطة بآلية التخزين المؤقت HTTP الحالية ، فمن المعقول توقع أداء أفضل من PWA لأنها تستخدم آلية تخزين مؤقت أحدث وأكثر تركيزًا على الأداء تسمى عمال الخدمة.

آلية تخزين مؤقت أسرع

مع تسجيل عمال الخدمة ، يمكنك التحكم في ما يتم تخزينه مؤقتًا بالضبط ، والحصول على تجارب أفضل للزوار العائدين نتيجة لذلك.

إن تأثير أداء العاملين في الخدمة في العالم الحقيقي ليس شيئًا لم تتم ملاحظته بعناية أيضًا. من خلال استخدام الوقت للطلاء أولاً كمقياس لقياس تجربة المستخدم الأولى مع موقع ويب ، أجرت Google نفسها دراسة تراقب أداء تطبيق Google I / O على الويب مع مجموعة خاضعة للرقابة (حيث يتحكم عامل الخدمة في تطبيق الويب) و مجموعة مدعومة (حيث يتم دعم أعمال الخدمة بواسطة المستعرض المستخدم ولكنها لا تتحكم في تطبيق الويب بعد).

كانت النتائج مثيرة للإعجاب بشكل خاص على سطح المكتب ، حيث يمكننا هنا أن نرى عمال الخدمة قاموا firstpaint الأصلي الأول (912 مللي ثانية) إلى 583 مللي ثانية فقط. هذا أقرب ما يكون إلى تجربة فورية.

ومع ذلك ، فإن الأمور أقل إثارة للإعجاب على الأجهزة المحمولة:

هنا يمكننا أن نرى أن الطرف الخلفي للمجموعة الخاضعة للرقابة لا يزال يشبه إلى حد ما المجموعة المدعومة. يرجع هذا إلى حد كبير إلى حقيقة أن سلاسل رسائل عمال الخدمة على الأجهزة المحمولة ليست مُحسَّنة وتحتاج إلى مزيد من الوقت للبدء مقارنة بسطح المكتب.

بشكل عام ، فإن زيادة الأداء التي تحققت مع عمال الخدمة - أو بعبارة أخرى ، مع PWA - لا تقل عن كونها استثنائية. وبالطبع ، لا يزال هناك بعض العمل الذي يتعين القيام به فيما يتعلق بعمال الخدمة المتنقلة ؛ لكننا نشعر أنه بشكل عام ، لا يزال هذا يمثل خطوة هامشية إلى ما كان عليه الويب في السابق ، وخطوة في الاتجاه الصحيح في ذلك.

من حيث الأمن

HTTPS — الخط الفاصل

على الرغم من أن موقع الويب المتجاوب النموذجي يمكن أن يكون مؤمنًا تمامًا مثل PWA ، إلا أنه ليس مطلوبًا من مواقع الويب المستجيبة استخدام بروتوكولات الاتصال الآمن. هذه هي الحالة المعاكسة مع مواقع الويب التي تدعم PWA ، حيث تتطلب Google ، مؤسس PWA ، تشفير جميع الاتصالات بين الخادم والعميل في PWA من خلال استخدام HTTPS.

تتوفر معظم الميزات المتعلقة بـ PWA مثل تحديد الموقع الجغرافي وحتى عمال الخدمة فقط بمجرد تحميل التطبيق باستخدام HTTPS.

مستندات الويب MDN ، تطبيقات الويب التقدمية (PWAs)

 مقالة ذات صلة: هل تحتاج HTTPS؟

استنتاج

إن الارتقاء بالأداء المذكور أعلاه الذي تحقق مع عمال الخدمة ، جنبًا إلى جنب مع ميزات إضافية شبيهة بالتطبيقات مثل إشعارات الدفع ، والإضافة إلى الشاشة الرئيسية (وفي المستقبل القريب ، تحديد الموقع الجغرافي والمزامنة الدورية) ، كلها تثبت أنها تجعل PWA المرشح المناسب ليكون المرشح التالي تطور الويب. اعتبارًا من الآن ، تم بالفعل تشجيع حركة PWA على نطاق واسع من قبل جميع اللاعبين الكبار تقريبًا ، بما في ذلك Microsoft مع دفعهم لاعتماد PWA في Windows 10. لن يمر وقت طويل الآن قبل أن نرى مستقبلًا مليئًا بتطبيقات الويب التقدمية - مثل الشيء الذي تصوره ستيف جوبز:

محرك Safari الكامل موجود داخل iPhone. وهكذا ، يمكنك كتابة تطبيقات Web 2.0 و Ajax المذهلة التي تبدو تمامًا وتتصرف تمامًا مثل التطبيقات الموجودة على iPhone. ويمكن أن تتكامل هذه التطبيقات تمامًا مع خدمات iPhone. يمكنهم إجراء مكالمة وإرسال بريد إلكتروني والبحث عن موقع على خرائط Google.

ستيف جوبز ، 2007