إنّ تصميم تطبيقك للاستفادة إلى أقصى حد من التكنولوجيا التي تجعل تطبيقات الويب التقدّمية (PWA) موثوقة وقابلة للتثبيت وفعّالة يبدأ بفهم التطبيق والقيود المفروضة عليه واختيار البنية المناسبة لكليهما.
SPA مقابل موافقة جهات متعددة
اليوم، هناك نمطان معماريان أساسيان في تطوير الويب: تطبيقات الصفحة الواحدة أو التطبيقات المتعددة الصفحات والتطبيقات المتعددة الصفحات أو MPA.
يتم تحديد تطبيقات الصفحة الواحدة من خلال التحكّم في JavaScript من جهة العميل في معظم أو كل عرض HTML للصفحة استنادًا إلى البيانات التي يتم استردادها من خلال التطبيق أو مقدَّمة إليه. يلغي التطبيق ميزة التنقّل المضمّنة في المتصفّح ويستبدلها بوظيفة التوجيه ومعالجة العرض.
تشتمل التطبيقات المتعددة الصفحات عادةً على رموز HTML معروضة مسبقًا يتم إرسالها مباشرةً إلى المتصفح، وغالبًا ما يتم تحسينها باستخدام JavaScript من جهة العميل بعد انتهاء المتصفح من تحميل رمز HTML، والاعتماد على آليات التنقل المضمّنة في المتصفح لعرض طرق العرض اللاحقة.
يمكن استخدام كلتا البنيتين لإنشاء تطبيقات الويب التقدّمية (PWA).
ولكل منها مزايا وعيوب، واختيار الشكل المناسب لحالة الاستخدام والسياق هو المفتاح لتوفير تجربة سريعة وموثوقة للمستخدمين.
تطبيقات الصفحة الواحدة
- يتضمّن معظمها تعديلات في الصفحة تتضمّن أجزاءً صغيرة.
- التبعيات من جهة العميل التي يتم تحميلها عند بدء التشغيل.
- وتكون عمليات التحميل اللاحقة سريعة بسبب استخدام ذاكرة التخزين المؤقت.
- ارتفاع تكلفة التحميل المبدئي
- يعتمد الأداء على معدّات الجهاز والاتصال بالشبكة.
- يجب توفُّر المزيد من التعقيد في التطبيق.
تكون التطبيقات المكوّنة من صفحة واحدة مناسبة من الناحية المعمارية الجيدة في الحالات التالية:
- يتمحور تفاعل المستخدمين بشكل أساسي حول التحديثات الجزئية للبيانات المرتبطة المعروضة على الصفحة نفسها، على سبيل المثال، لوحة بيانات في الوقت الفعلي أو تطبيق لتعديل الفيديوهات.
- يحتوي تطبيقك على تبعيات للإعداد من جهة العميل فقط، مثل موفِّر مصادقة تابع لجهة خارجية بتكلفة بدء تشغيل مرتفعة للغاية.
- تعتمد البيانات المطلوبة لتحميل طريقة العرض على سياق محدد من جهة العميل فقط، على سبيل المثال، عرض عناصر التحكم لجزء من الأجهزة المتصلة.
- التطبيق صغير وبسيط بما يكفي لدرجة أنّ حجمه وتعقيده لا يؤثران في السلبيات المذكورة أعلاه.
قد لا تكون خدمات المنتجع الصحي اختيارًا جيدًا للهندسة في الحالات التالية:
- يُعدّ أداء التحميل الأولي ضروريًا. تحتاج عادةً التطبيقات الترويجية إلى تحميل المزيد من محتوى JavaScript لتحديد المحتوى الذي سيتم تحميله وطريقة عرضه. يكون وقت تحليل محتوى JavaScript وتنفيذه، بالإضافة إلى استرداد المحتوى، أبطأ من إرسال HTML المعروض.
- يعمل تطبيقك غالبًا على الأجهزة التي تعمل بالطاقة المنخفضة إلى المتوسطة. وبما أنّ تطبيقات الخدمة (SPA) تعتمد على لغة JavaScript للعرض، فإن تجربة المستخدم تعتمد بشكل كبير على قوة جهازهم المحدَّد أكثر من تلك المتاحة في تنسيق "MPA".
نظرًا إلى أنّ SPA تحتاج إلى استبدال التنقّل المضمّن في المتصفّح بتوجيهها، تتطلّب هذه التطبيقات مستوًى أدنى من التعقيد في تعديل طريقة العرض الحالية وإدارة تغييرات التنقّل بشكل فعّال وإزالة طرق العرض السابقة التي سيتعامل معها المتصفِّح بخلاف ذلك، ما يزيد من صعوبة صيانتها بوجهٍ عام وزيادة الضرائب المفروضة على جهاز المستخدِم.
تطبيقات متعددة الصفحات
- تعديلات في الغالب بملء الصفحة
- تُعدّ سرعة العرض الأولية بالغة الأهمية.
- يمكن أن تكون البرمجة النصية من جهة العميل بمثابة تحسين.
- تتطلب طرق العرض الثانوية استدعاء خادم آخر.
- لا ينتقل السياق بين طرق العرض.
- تتطلّب هذه الميزة خادمًا أو ميزة العرض المسبق.
تكون التطبيقات المتعددة الصفحات خيارًا معماريًا جيدًا في الحالات التالية:
- يتمحور تفاعل المستخدم بشكل أساسي حول طرق عرض جزء واحد من البيانات مع بيانات اختيارية تستند إلى السياق، على سبيل المثال، تطبيق أخبار أو تجارة إلكترونية.
- تُعدّ سرعة العرض الأوّلية بالغة الأهمية، لأنّ إرسال رمز HTML المعروض إلى المتصفّح أسرع من تجميعه من طلب بيانات بعد التحميل والتحليل وتنفيذه باستخدام بديل مستند إلى JavaScript.
- يمكن تضمين التفاعل أو السياق من جهة العميل كتحسين بعد التحميل الأولي، مثل وضع ملف شخصي على صفحة معروضة أو إضافة مكوّنات ثانوية تعتمد على السياق من جهة العميل.
قد لا تكون MPA اختيارًا جيدًا للهندسة في الحالات التالية:
- تعتبر إعادة تنزيل JavaScript أو CSS وإعادة تحليلها وإعادة تنفيذها مكلفة للغاية. ويتم التخفيف من تأثير هذا الخطأ في تطبيقات الويب التقدّمية (PWA) مع عاملي الخدمة.
- إنّ السياق من جهة العميل، مثل الموقع الجغرافي للمستخدم، لا ينتقل بسلاسة بين المشاهدات، وقد يكون الحصول على هذا السياق مرّة أخرى مكلفًا. ويجب تسجيله واسترجاعه أو طلب إعادة النظر فيه من جديد إلى آخر.
نظرًا لأن طرق العرض الفردية يجب أن يتم عرضها ديناميكيًا بواسطة الخادم أو عرضها مسبقًا قبل الوصول، قد يحد ذلك من استضافة البيانات أو زيادة تعقيدها.
أيها تختار؟
حتى مع هذه الإيجابيات والسلبيات، تعد كلتا البِنى الأساسية صالحة لإنشاء تطبيق الويب التقدّمي الخاص بك. يمكنك أيضًا مزجها لأجزاء مختلفة من تطبيقك، حسب احتياجاته، على سبيل المثال، جعل بطاقات بيانات المتجر تتبع بنية MPA وتتّبع عملية الدفع بنية SPA.
بغض النظر عن الاختيار، فإن الخطوة التالية هي فهم أفضل طريقة لاستخدام عمال الخدمة لتقديم أفضل تجربة.
قوة عاملي الخدمات
يمتلك مشغّل الخدمات قدرًا كبيرًا من الطاقة تتجاوز التوجيه الأساسي واستجابات الشبكة المخزّنة مؤقتًا واستجابات الشبكة. يمكننا إنشاء خوارزميات معقدة يمكنها تحسين تجربة المستخدم وأدائه.
يشمل مشغّل الخدمات (SWI)
يشمل مشغّل الخدمات (SWI) نمطًا ناشئًا لاستخدام مشغلي الخدمات كجزء لا يتجزأ من بنية الموقع الإلكتروني.
تقسّم ميزة SWI إلى مواد العرض الفردية، التي تكون عادةً صفحة HTML، إلى أجزاء استنادًا إلى احتياجات التخزين المؤقت، ثم تعيد ربطها معًا في مشغّل الخدمات لتحسين الاتّساق والأداء والموثوقية، مع تقليل حجم ذاكرة التخزين المؤقت.
هذه الصورة هي نموذج لصفحة ويب. وتضم خمسة أقسام مختلفة تقسم الصفحة إلى:
- التنسيق العام.
- عنوان عام (الشريط الداكن العلوي).
- منطقة المحتوى (الخطوط والصور الأوسطة على اليسار)
- الشريط الجانبي (شريط طويل داكن بدرجة متوسطة في منتصف اليمين).
- التذييل (الشريط السفلي الداكن).
التخطيط العام
من غير المحتمل أن يتغير التخطيط العام كثيرًا ولا يكون له تبعيات. وهي مرشح جيد للعمل المسبق.
الرأس والتذييل
يحتوي الرأس والتذييل العامان على عناصر مثل القائمة العلوية وتذييل الموقع، ويمثلان تحديًا معينًا: إذا سيتم تخزين الصفحة في ذاكرة التخزين المؤقت ككل، فقد تتغير هذه الأشياء بين عمليات تحميل الصفحات، بناءً على الوقت الذي تم فيه تخزين الصفحة المحددة مؤقتًا.
ويمكنك ضمان حصول المستخدمين دائمًا على النسخة نفسها بغض النظر عن وقت تخزينها مؤقتًا، وذلك من خلال فصلها وتخزينها مؤقتًا بشكل مستقل عن المحتوى. ونظرًا لأنه يتم تحديث هذه العناصر نادرًا، فهي أيضًا مرشحة جيدة للاستعداد المسبق. ولكنّهما يعتمدان على المحتوى، أي CSS وJavaScript الخاصَّين بالموقع الإلكتروني.
CSS وJavaScript
من المفترض أن يتم تخزين محتوى CSS وJavaScript الخاص بالموقع الإلكتروني مؤقتًا بطريقة قديمة، مع إعادة التحقّق من الاستراتيجية للسماح بالتحديثات التزايدية بدون الحاجة إلى تحديث مشغّل الخدمة، كما هو الحال مع مواد العرض المخزّنة مسبقًا. ومع ذلك، يجب أيضًا الاحتفاظ بها عند إصدار الحد الأدنى عندما يحدِّث عامل الخدمة رأسًا أو تذييلاً عموميًا جديدًا. ولهذا السبب، يجب أيضًا تعديل ذاكرة التخزين المؤقت الخاصة بهم باستخدام أحدث إصدار من مواد العرض عند تثبيت مشغّل الخدمات.
منطقة المحتوى
التالي هو مجال المحتوى. استنادًا إلى معدّل تكرار التحديثات، من الأفضل استخدام الشبكة أولاً أو تلك القديمة بينما تتم إعادة التحقق من الصحة. يجب تخزين الصور مؤقتًا باستخدام استراتيجية ذاكرة التخزين المؤقت أولاً، كما تمت مناقشتها سابقًا.
شريط جانبي
وأخيرًا، بافتراض أن محتوى الشريط الجانبي يحتوي على محتوى ثانوي مثل العلامات والعناصر ذات الصلة، فليس من الضروري الخروج من الشبكة. ويمكنك استخدام استراتيجية قديمة أثناء إعادة التحقّق من أجل تحقيق ذلك.
وبعد إجراء كل ذلك، قد تفكر في أنه يمكنك فقط إجراء هذا النوع من التخزين المؤقت لكل قسم لتطبيقات الصفحة الواحدة. ومع ذلك، من خلال اعتماد أنماط مستوحاة من تضمينات جانبية الجانب أو تضمينات جانب الخادم في مشغّل الخدمات، مع بعض الميزات المتقدمة لمشغّل الخدمات، يمكنك إجراء ذلك لأيّ من البنية الأساسية.
جربه بنفسك
يمكنك تجربة تضمين عامل الخدمة في الدرس التطبيقي التالي حول الترميز:
عرض الردود تدريجيًا
يمكن إنشاء الصفحة السابقة باستخدام نموذج هيكل التطبيق في عالم SPA، حيث يتم تخزين هيكل التطبيق مؤقتًا، ثم يتم عرضه، ويتم تحميل المحتوى من جهة العميل. مع طرح Streams API ومدى توفُّره على نطاق واسع، يمكن دمج كل من هيكل التطبيق والمحتوى في مشغّل الخدمات وبثّه إلى المتصفح، ما يمنحك مرونة التخزين المؤقت لواجهة برمجة التطبيقات مع سرعة واجهات برمجة التطبيقات (MPA).
ويحدث ذلك للأسباب التالية:
- يمكن إنشاء ساحات المشاركات بشكل غير متزامن، ما يسمح لأجزاء مختلفة من البث بمصادر أخرى.
- يمكن لمقدم الطلب لمجموعة البث بدء العمل على الاستجابة فور توفُّر الجزء الأول من البيانات، بدلاً من انتظار اكتمال العنصر بأكمله.
- ويمكن للتحليلات اللغوية المحسّنة للبث، بما في ذلك المتصفح، عرض محتوى البث تدريجيًا قبل اكتماله، ما يؤدي إلى تسريع الأداء الملحوظ للاستجابة.
بفضل هذه الخصائص الثلاث لساحات المشاركات، تُحقّق عادةً البُنى الأساسية التي يتم إنشاؤها حول البث أداءً أسرع من ذي قبل.
قد يكون استخدام Streams API صعباً لأنّه معقد ومنخفض التكلفة. لحسن الحظ، هناك وحدة إطار عمل يمكن أن تساعد في إعداد الردود المباشرة للعاملين في الخدمة.
النطاقات والمصادر ونطاق تطبيق الويب التقدّمي (PWA)
يخضع مشغّلو الويب، بما في ذلك مشغّلو الخدمات ومساحة التخزين وحتى نوافذ تطبيق الويب التقدّمي (PWA) المثبَّتة، لإحدى أهم آليات الأمان على الويب، وهي سياسة المصدر نفسه. ضمن المصدر نفسه، يتم منح الأذونات ومشاركة البيانات ويمكن لمشغِّل الخدمات التواصل مع عملاء مختلفين. خارج المصدر نفسه، لا يتم منح الأذونات تلقائيًا ويتم عزل البيانات ولا يمكن الوصول إليها من بين مصادر مختلفة.
سياسة المصدر نفسه
يتم تعريف عنوانَي URL على أنّهما يتضمّنان المصدر الدقيق إذا كان البروتوكول والمنفذ والمضيف متطابقَين.
على سبيل المثال: https://squoosh.app وhttps://squoosh.app/v2 لهما المصدر نفسه، ولكن http://squoosh.app وhttps://squoosh.com وhttps://app.squoosh.app وhttps://squoosh.app:8080 من أصل مختلف. يُرجى الاطّلاع على مرجع MDN لسياسة المصدر نفسه للحصول على مزيد من المعلومات والأمثلة.
إنّ تغيير النطاقات الفرعية ليس الطريقة الوحيدة التي يمكن للمضيف تغييرها. ويتكون كل مضيف من نطاق المستوى الأعلى (TLD) ونطاق المستوى الثانوي (SLD) وصفر أو أكثر من التصنيفات (يُسمّى أحيانًا النطاقات الفرعية)، ويتم الفصل بينها بنقاط في ما بينها وتتم قراءتها من اليمين إلى اليسار في عنوان URL. ينتج عن التغيير في أي من العناصر مضيف مختلف.
في وحدة إدارة النوافذ، رأينا في السابق شكل المتصفِّح داخل التطبيق عندما ينتقل المستخدم إلى مصدر مختلف عن تطبيق ويب تقدّمي مثبّت.
سيظهر ذلك المتصفّح داخل التطبيق حتى إذا كانت المواقع الإلكترونية تتضمّن نطاق المستوى الأعلى (TLD) وبروتوكول SLD (نطاق الوصول المحدود) نفسه، ولكن بتصنيفات مختلفة، لأنّهما تُعتبران من مصادر مختلفة.
يتمثّل أحد الجوانب الرئيسية للأصل في سياق تصفح الويب في طريقة عمل التخزين والأذونات. يتشارك مصدر واحد العديد من الميزات بين كل المحتوى وتطبيقات الويب التقدّمية فيه، بما في ذلك:
- حصة التخزين والبيانات (قاعدة البيانات المفهرَسة وملفات تعريف الارتباط وتخزين الويب ومساحة التخزين في ذاكرة التخزين المؤقت).
- تسجيلات عاملي الخدمات.
- الأذونات التي يتم منحها أو رفضها (مثل الإشعارات الفورية على الويب أو رصد الموقع الجغرافي أو أدوات الاستشعار)
- عمليات التسجيل الفورية على الويب
عند الانتقال من مصدر إلى آخر، يتم إبطال كل أذونات الوصول السابقة، وبالتالي يجب منح الأذونات مرة أخرى، ولا يمكن لتطبيق الويب التقدّمي الوصول إلى جميع البيانات المحفوظة في مساحة التخزين.