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

اختر بين تطبيق الويب التقدمي والتطبيق الأصلي باختبار القدرات الأساسية على الأجهزة التي يستخدمها عملاؤك، ثم قارن التوزيع والعمل دون اتصال والتكاملات وتكلفة تشغيل المنتج لسنوات.

في هذا المقال

فيديو صامت بنص على الشاشة. يكرر النص المكتوب أدناه كلمات كل مشهد ويصف ما يعرضه.

  1. 0:00–0:05

    PWA أم تطبيق أصلي؛ رسم توضيحي؛ TecnoStack؛ 1 2 3 4 5 6؛ دليل القرار؛ قرّر بأدلة الأجهزة؛ اختبر القدرات الأساسية؛ المنتج؛ تطبيق ويب تقدمي؛ تطبيق أصلي

    مخطط متفرّع: المنتج، تطبيق ويب تقدمي، تطبيق أصلي. الروابط: من «المنتج» إلى «تطبيق ويب تقدمي»؛ من «المنتج» إلى «تطبيق أصلي». التركيز على: تطبيق ويب تقدمي، تطبيق أصلي.

  2. 0:05–0:10

    PWA أم تطبيق أصلي؛ رسم توضيحي؛ TecnoStack؛ 1 2 3 4 5 6؛ 01؛ اكتب القدرات الأساسية؛ افصل الضروري عن الإضافي؛ دون اتصال؛ الإشعارات؛ ميزات الجهاز؛ عمل الخلفية

    مقارنة دون درجات: دون اتصال، الإشعارات، ميزات الجهاز، عمل الخلفية. التركيز على: ميزات الجهاز.

  3. 0:10–0:15

    PWA أم تطبيق أصلي؛ رسم توضيحي؛ TecnoStack؛ 1 2 3 4 5 6؛ 02؛ اختبر على أجهزة العملاء؛ باللغتين ومع التقنيات المساعدة؛ قدرة أساسية؛ نموذج أولي؛ مصفوفة أجهزة؛ الأدلة

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

  4. 0:15–0:20

    PWA أم تطبيق أصلي؛ رسم توضيحي؛ TecnoStack؛ 1 2 3 4 5 6؛ 03؛ اختر التوزيع بعناية؛ بحسب كيفية وصول المستخدمين؛ المستخدمون؛ روابط الويب؛ متاجر التطبيقات؛ أجهزة مُدارة

    شبكة علاقات: المستخدمون، روابط الويب، متاجر التطبيقات، أجهزة مُدارة. الروابط: من «المستخدمون» إلى «روابط الويب»؛ من «المستخدمون» إلى «متاجر التطبيقات»؛ من «المستخدمون» إلى «أجهزة مُدارة». التركيز على: المستخدمون.

  5. 0:20–0:25

    PWA أم تطبيق أصلي؛ رسم توضيحي؛ TecnoStack؛ 1 2 3 4 5 6؛ 04؛ قدّر تكلفة دورة الحياة؛ اختبر كل منصة تدعمها؛ البناء؛ التكاملات؛ تغيّرات المنصات؛ الاختبار

    مقارنة دون درجات: البناء، التكاملات، تغيّرات المنصات، الاختبار. التركيز على: تغيّرات المنصات.

  6. 0:25–0:30

    PWA أم تطبيق أصلي؛ رسم توضيحي؛ TecnoStack؛ 1 2 3 4 5 6؛ تكنوستاك؛ تدرّج حيث يناسب؛ ابدأ بالأصلي إن تطلّب المنتج؛ ويب متاح؛ ميزات PWA؛ مراجعة المحفزات؛ أصلي عند الحاجة؛ tecnostack.com

    تسلسل خطوات: ويب متاح، ميزات PWA، مراجعة المحفزات، أصلي عند الحاجة. الروابط: من «ويب متاح» إلى «ميزات PWA»؛ من «ميزات PWA» إلى «مراجعة المحفزات»؛ من «مراجعة المحفزات» إلى «أصلي عند الحاجة». التركيز على: مراجعة المحفزات.

قرّر بين تطبيق الويب التقدمي (PWA) والتطبيق الأصلي بأدلة من هواتف مستخدميك. اكتب القدرات التي يحتاجها منتجك، واختبرها على الأجهزة والمتصفحات التي يستخدمها عملاؤك، ثم قارن الخيارين في التوزيع، والعمل دون اتصال، والتكامل مع ميزات الجهاز وأنظمتك الأخرى، وتكلفة تشغيل المنتج لسنوات. وكثيرًا ما يكفي PWA لتطبيقات المحتوى والتجارة والأدوات الداخلية، ويستحق التطبيق الأصلي كلفته حين تتعذر على الويب قدرةٌ أساسية أو متطلبُ توزيع.

تصف MDN تطبيقات الويب التقدمية بأنها تطبيقات مبنية بتقنيات منصة الويب، مثل HTML وCSS وJavaScript، ويمكنها تقديم تجربة قريبة من تطبيقات المنصات. وتنبّه أيضًا إلى أن القدرات، ومنها إمكانية التثبيت وطريقته وما يستطيع التطبيق فعله في الخلفية، تختلف حسب المنصة والمتصفح. ويمكن لتطبيق PWA مشاركة كود ويب واحد عبر المنصات. وتنشر إصدارًا جديدًا بعملية نشر واحدة، لكن الملفات المخزنة مؤقتًا وتفعيل Service Worker والأجهزة غير المتصلة تؤثر في موعد وصوله إلى كل مستخدم.

أما التطبيق الأصلي فتبنيه لمنصة التطبيقات في كل نظام تشغيل، وتوزّعه عادةً عبر متاجر التطبيقات. ولا يعني «أصلي» بالضرورة قاعدتي كود منفصلتين، فإطار متعدد المنصات مثل React Native أو Flutter يتيح لفريق واحد مشاركة جزء كبير من الكود بين iOS وAndroid.

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

اكتب ما يجب أن يفعله المنتج، وصنّف كل بند أساسيًا أو إضافيًا:

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

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

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

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

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

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

شكل 1: اختبر على أجهزة العملاء. باللغتين ومع التقنيات المساعدة.

ابدأ من مصدر مستخدميك:

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

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

لا يعمل أيٌّ من الخيارين دون اتصال تلقائيًا. فبحسب MDN، يتطلب عمل PWA دون اتصال تنفيذًا مقصودًا، عادةً عبر Service Worker يخزّن ما يحتاجه التطبيق. والتطبيق الأصلي يحتاج جهدًا مماثلًا في التخزين المحلي والمزامنة. والجزء الصعب في الحالتين هو التصميم: أي البيانات تتيحها دون اتصال، وكيف تزامن التغييرات التي جرت دون اتصال، وماذا يحدث حين يتعارض تغييران. قلّل البيانات الشخصية المخزنة على الجهاز، وحدّد متى تنتهي صلاحيتها وما الذي يُمسح عند تسجيل الخروج، وأعد التحقق من صلاحيات عمليات الكتابة المؤجلة على الخادم بعد عودة الاتصال. فالجهاز غير المتصل لا يرى سحب الصلاحيات من الخادم حتى يتصل من جديد.

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

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

  • تحديثات أنظمة التشغيل والمتصفحات التي تغيّر السلوك؛
  • مراجعات المتاجر وتغييرات السياسات وتجديد الشهادات في الإصدارات الأصلية؛
  • عدد قواعد الكود والمهارات التي يتطلبها كلٌّ منها؛
  • أعمال نظام التصميم حتى تبقى واجهات الويب والتطبيق متسقة باللغتين؛
  • اختبارات إمكانية الوصول والأداء في كل إصدار، ومنها أداء الويب الميداني الذي يتناوله دليلنا عن مؤشرات أداء الويب الأساسية.

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

عناصر للمراجعة: البناء، التكاملات، تغيّرات المنصات، الاختبار؛ دون درجات أو نتائج مقاسة.

شكل 2: قدّر تكلفة دورة الحياة. اختبر كل منصة تدعمها.

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

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

  • MDN Web Docs. Progressive web apps: تعريف تطبيقات الويب التقدمية، واختلاف القدرات وإمكانية التثبيت حسب المنصة والمتصفح، والعمل دون اتصال.
  • W3C. WCAG 2.2 quick reference: معايير نجاح إمكانية الوصول، ومنها الوصول بلوحة المفاتيح والبدائل النصية والتركيز والتباين.

تتغير قدرات المنصات وسياسات المتاجر باستمرار، فراجع الوثائق الحالية لكل منصة مستهدفة. والتوصيات الواردة هنا إرشادات من تكنوستاك، لا متطلبات من مزوّدي المتصفحات أو المنصات.