PWA مقابل SPA: متشابه ولكن مختلف

بدأت جاذبية مواقع الويب القياسية تفقد سحرها ، وأخذت مكانها لتطبيقات الويب. مع مرور كل يوم ، تزداد شعبية تطبيقات الويب بسبب تجربتها الجذابة والسريعة بشكل مذهل.

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

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

كيف يعملون؟

تطبيقات الصفحة الواحدة (واس)

SPA (تطبيق الصفحة الواحدة) هو موقع ويب يتم تحديث صفحته الحالية ديناميكيًا بدلاً من تنزيلها بالكامل من خادم. بمعنى آخر ، يجب تحميل جميع أكواد التطبيق الضرورية لتطبيق الويب الخاص بك (HTML ، CSS ، JavaScript) مرة واحدة فقط. أثناء تنقل المستخدم عبر تطبيق الويب ، يتم جلب جميع المحتويات والعناصر التي تحتاج إلى التحديث وإعادة عرضها دون مطالبة المستخدم بإعادة تحميل المتصفح.

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

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

فيما يلي بعض من أبرز المنتجعات الصحية التي ربما تستخدمها بانتظام:

• فيسبوك
• بريد جوجل
• ينكدين
• نيتفليكس
• خرائط جوجل

تطبيقات الويب التقدمية (PWAs)

على عكس SPA ، يشبه تطبيق الويب التقدمي (PWA) مجموعة من الإرشادات وقوائم المراجعة أكثر من كونه بنية محددة. تُعرف PWAs وتنحرف عن SPA بعدة خصائص مثل:

• عمال الخدمة: يوفر عمال الخدمة الأساس التقني للعديد من الميزات البارزة لـ PWA ، وهي التوافر دون اتصال بالإنترنت والإشعارات الفورية.
• بيان تطبيق الويب: ملف JSON يحتوي على البيانات الوصفية الضرورية لـ PWA. يمكن إنشاء بيانات تطبيق الويب تلقائيًا باستخدام منشئ بيان PWA.
• HTTPS: يتم تقديم تطبيقات الويب التقدمية (PWA) دائمًا من مصدر آمن.

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

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

لقد كتبنا دليلًا تفصيليًا حول ماهية تطبيق الويب التقدمي. لذلك لا يمكنك تفويتها!

كيف هم على حد سواء؟

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

ماهو الفرق؟

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

PWA هو ، ببساطة ، موقع ويب يحتوي على أفضل الصفات التي يقدمها الويب. إنه موثوق وسريع وجذاب.

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

من الواضح أن الاختلافات بين هذين الأمرين ليست مجرد ذلك ، فهناك الكثير لتشريحه:

من حيث السرعة

فيما يتعلق بالسرعة ، فإن هاتين البنيتين متشابهتان إلى حد كبير نظرًا لأنهما تقنية متطورة. ومع ذلك ، قد تذهب اليد العليا إلى PWA هنا.

والسبب في ذلك هو أنه بينما يستخدم كل من SPAs و PWAs JavaScript لتطويراتهم ، فإن PWA قادرة على الاستفادة من عمال الخدمة لتقديم بعض الأعمال. بمعنى آخر ، يمكن بدلاً من ذلك تفويض الكثير من عبء JavaScript الزائد الذي تضيفه SPAs إلى تطبيقات الويب الخاصة بك إلى عمال الخدمة ، مما يقلل بشكل كبير من بصمة JavaScript.

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

من حيث التكلفة

هنا حيث يخسر PWA على SPA. تمتلك PWA أحدث التقنيات ، وبالتالي تأتي بتكلفة إضافية. ناهيك عن أن تطوير PWA غالبًا ما يستمر لأسابيع أو حتى أشهر في كل مرة لأنه ليس عملية مبسطة مقارنة بـ SPA.

PWAs : 2000 دولار - 20.000 دولار

واس : 1500 دولار - 12.000 دولار

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

 يوصى بالقراءة: كم يكلف بناء Magento PWA؟

من حيث تجربة المستخدم / واجهة المستخدم

في حين أن SPAs كان لها مكانها في الماضي ، بدأ الناس في التحويل إلى PWAs لأنها تقدم تجربة مستخدم أفضل (UX).

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

وهو ليس تويتر فقط. من المتوقع أن تكون حركة PWA هنا لتبقى ؛ بالإضافة إلى المشاركة الأخيرة لـ Spotify ، لا يبدو أن الحركة تظهر أي علامة على التباطؤ قريبًا.

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

من حيث الأمن

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

تثار مخاوف أقل بكثير بشأن الأمان في PWA نظرًا لأنه من طبيعة تطبيق الويب التقدمي أن تمر جميع الاتصالات عبر مصدر HTTPS آمن. مثل PWAs ، HTTPS ، أيضًا ، هو مستقبل الشبكات ، والتي من خلالها يمكن الوصول إلى الميزات المتطورة مثل عمال الخدمة وإمكانية الوصول إليها.

من حيث إمكانية الوصول

مقارنةً بـ SPAs ، يمكن الوصول إلى PWA بشكل عام ، لا سيما مع دعم Chrome الأخير لـ Desktop PWA. يمكن للمستخدمين الذين يتفاعلون مع PWAs أن يكون لديهم خيار إضافة اختصار للتطبيق الذي يستخدمونه إلى الشاشة الرئيسية الخاصة بهم أو إلى سطح المكتب الخاص بهم.

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

تغليف

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

مع SimiCart ، نقدم أفضل حل PWA لتجار Magento.