دورة تفصّل كل جانب من جوانب تطوير تطبيقات الويب التقدّمية الحديثة.
تتناول هذه الدورة أساسيات تطوير تطبيقات الويب التقدّمية في أجزاء سهلة الفهم. في الوحدات التالية، ستتعرّف على تطبيق الويب التقدّمي، وكيفية إنشاء تطبيق أو ترقية محتوى الويب الحالي، وكيفية إضافة كل الأقسام إلى تطبيق قابل للتثبيت بلا اتصال بالإنترنت. استخدِم لوحة القائمة للتنقل بين الوحدات. (القائمة في اليسار على سطح المكتب أو خلف قائمة الهامبرغر على الهاتف المحمول).
ستتعلّم أساسيات تطبيق الويب التقدّمي (PWA)، مثل بيان تطبيق الويب، ومشغّلي الخدمات، وكيفية التصميم مع وضع تطبيق في الاعتبار، وكيفية استخدام أدوات أخرى لاختبار تطبيق الويب التقدّمي (PWA) وتصحيح الأخطاء فيه. بعد هذه الأساسيات، ستتعرّف على التكامل مع النظام الأساسي ونظام التشغيل، وكيفية تحسين تجربة تثبيت تطبيق الويب التقدّمي (PWA) واستخدامه، وكيفية تقديم تجربة بلا إنترنت.
تتضمن كل وحدة عروضًا توضيحية تفاعلية وتقييمات ذاتية لاختبار معلوماتك. ستكون قادرًا على اختبار العروض التوضيحية وتجربتها على هاتفك الجوّال أو جهازك اللوحي أو الكمبيوتر المحمول أثناء اللعب بالرموز البرمجية لفهم المبادئ الأساسية التي تساهم في إنشاء تطبيق ويب تقدّمي.
هذه الدورة مخصصة لمطوّري البرامج على الويب المبتدئين والمتقدمين على حد سواء. يمكنك تصفُّح السلسلة من البداية إلى النهاية للحصول على فهم عام لتطبيق الويب التقدّمي (PWA) من الأعلى إلى الأسفل، أو يمكنك استخدامه كمرجع لمواضيع محدّدة. وبالنسبة إلى المبتدئين في مجال تطوير الويب، ستحتاج إلى أساس HTML وCSS وJavaScript للمتابعة. اطّلع على تعلم CSS ودورات HTML وJavaScript حول MDN.
إليك ما ستتعلمه:
البدء
إذا كنت ترغب في إنشاء تطبيق ويب تقدّمي، قد تتساءل من أين تبدأ، أو إذا كان من الممكن ترقية موقع إلكتروني إلى تطبيق ويب تقدّمي (PWA) بدون البدء من نقطة الصفر، أو كيفية الانتقال من تطبيق خاص بمنصة إلى تطبيق PWA. ستساعدك هذه المقالة في الإجابة عن هذه الأسئلة.
الأساسيات
جميع تطبيقات الويب التقدّمية هي في الأساس مواقع إلكترونية حديثة، لذا من المهم أن يكون لموقعك الإلكتروني أساس متين في مجال التصميم السريع الاستجابة والجوّال وكل شيء في المقام الأول، والتصميم الأساسي وأداء الويب.
تصميم التطبيق
تتمثل إحدى الاختلافات الرئيسية بين تطبيقات الويب التقدّمية والمواقع الإلكترونية الكلاسيكية وتطبيقات الويب في قابلية التثبيت. يوفّر ذلك تجربة مستقلة أكثر اندماجًا في النظام الأساسي ونظام التشغيل. حيث يوفر التثبيت مرونة جديدة ومسؤولية جديدة، إذ لن تكون لدينا واجهة مستخدم في المتصفح تتعلق بالمحتوى.
مواد العرض والبيانات
تطبيق الويب التقدّمي هو موقع إلكتروني، وجميع مواد العرض الخاصة به هي نفسها المتوفّرة على الويب، ولكن مع أدوات جديدة لتسهيل تحميل مواد العرض هذه بسرعة سواء عند الاتصال بالإنترنت أو عدم اتّصاله بالإنترنت.
مشغِّلو الخدمات
يُعد عاملو الخدمة جزءًا أساسيًا من تطبيق الويب التقدّمي (PWA). وتتيح هذه الوظائف التحميل السريع (بغض النظر عن الشبكة) والوصول بلا اتصال بالإنترنت والإشعارات الفورية وغيرها من الإمكانيات.
جارٍ التخزين في ذاكرة التخزين المؤقت
يمكنك استخدام Cache Storage API لتنزيل مواد العرض أو تخزينها أو حذفها أو تحديثها على الجهاز. وبعد ذلك، يمكن عرض مواد العرض هذه على الجهاز بدون الحاجة إلى طلب الشبكة.
العرض
باستخدام حدث استرجاع مشغّل الخدمة، يمكنك اعتراض طلبات الشبكة وتقديم استجابة باستخدام أساليب مختلفة.
مربّع العمل
Workbox هي مجموعة من الوحدات التي تبسّط التفاعلات الشائعة مع مشغّلي الخدمات، مثل التوجيه والتخزين المؤقت. تتناول كل وحدة جانبًا محددًا من جوانب تطوير مشغّلي الخدمات. يهدف Workbox إلى تسهيل استخدام مشغّلي الخدمات قدر الإمكان مع السماح بالمرونة في تلبية متطلبات التطبيق المعقدة عند الحاجة.
البيانات بلا اتصال بالإنترنت
للحصول على تجربة قوية بلا اتصال بالإنترنت، عليك تنفيذ إدارة مساحة التخزين. ويمكن أن تساعدك أدوات مثل IndexedDB وذاكرة التخزين المؤقت وأداة إدارة مساحة التخزين والتخزين الدائم وفهرسة المحتوى.
التركيب
التطبيقات المثبّتة سهلة الوصول إليها ويمكنها الاستفادة من بعض عمليات التكامل الأكثر عمقًا مع نظام التشغيل. تعرَّف على كيفية تثبيت تطبيق الويب التقدّمي (PWA) والاستفادة من هذه المزايا.
بيان تطبيق الويب
بيان تطبيق الويب هو ملف JSON يحدّد كيفية التعامل مع تطبيق الويب التقدّمي (PWA) كتطبيق مثبَّت، بما في ذلك الشكل والأسلوب والسلوك الأساسي في نظام التشغيل.
طلب التثبيت
بالنسبة إلى المواقع الإلكترونية التي تجتاز معايير تثبيت تطبيق الويب التقدّمي (PWA)، يشغّل المتصفّح حدثًا ليطلب من المستخدم تثبيته. يسرنا إخبارك بأنّه يمكنك استخدام هذا الحدث لتخصيص طلبك ودعوة المستخدمين لتثبيت تطبيقك.
تعديل
من المحتمل أن يكون تطبيق الويب التقدّمي (PWA) بحاجة إلى التحديث. يوفّر لك هذا الفصل الأدوات اللازمة لتعديل أجزاء مختلفة من تطبيق الويب التقدّمي (PWA)، بدءًا من مواد العرض ووصولاً إلى البيانات الوصفية.
التحسينات
يتوقع المستخدم تجربة جيدة. في هذا الفصل، ستتعرّف على كيفية تحسين تطبيق الويب التقدّمي (PWA) باستخدام شاشات البداية واختصارات التطبيقات وطريقة عمل الجلسات.
الرصد
يكون تحديد كيفية تفاعل المستخدمين مع تطبيقك مفيدًا في تخصيص تجربة المستخدم وتحسينها. على سبيل المثال، يمكنك التحقّق مما إذا كان تطبيقك مثبّتًا مسبقًا على جهاز المستخدم وتنفيذ ميزات مثل نقل التنقّل من المتصفّح إلى التطبيق المستقل.
التكامل مع نظام التشغيل
يعمل تطبيق الويب التقدّمي (PWA) الآن خارج المتصفِّح. يتناول هذا الفصل كيفية الدمج بشكل أكبر مع نظام التشغيل بعد تثبيت المستخدمين لتطبيقك.
إدارة النوافذ
يدير تطبيق الويب التقدّمي (PWA) خارج المتصفّح نافذته الخاصة. سوف نفهم في هذا الفصل واجهات برمجة التطبيقات والإمكانيات اللازمة لإدارة نافذة ضمن نظام التشغيل.
الميزات التجريبية
هناك إمكانات تطبيق الويب التقدّمي (PWA) لا تزال قيد الإنشاء ويمكنك أن تكون جزءًا من تطويرها. ستتعرّف في هذا الفصل على مشروع Fugu وكيفية الاشتراك في مرحلة التجربة والتقييم وكيفية استخدام واجهات برمجة التطبيقات التجريبية.
الأدوات وتصحيح الأخطاء
سنستكشف الأدوات المتاحة لتطوير تطبيقات الويب التقدّمية وتصحيح أخطائها واختبارها.
البنية
يمكنك اتخاذ بعض القرارات عند تطوير تطبيق ويب تقدّمي (PWA)، مثل إنشاء تطبيق من صفحة واحدة أو تطبيق متعدّد الصفحات، وما إذا كنت ستستضيفه في جذر نطاقك أو ضمن مجلد.
إدارة التعقيد
قد يكون الحفاظ على بساطة تطبيق الويب معقدًا بشكل مدهش. في هذه الوحدة، ستتعلّم طريقة عمل واجهات برمجة تطبيقات الويب مع سلاسل المحادثات وكيف يمكنك استخدام هذه الواجهة مع أنماط تطبيق الويب التقدّمية (PWA) الشائعة مثل إدارة الحالة.
الإمكانات
لا ترتبط تطبيقات الويب التقدّمية (PWA) بالشاشة فقط. يتناول هذا الفصل إمكانات تطبيق الويب التقدّمي (PWA) حاليًا من حيث الأجهزة وأدوات الاستشعار واستخدام النظام الأساسي.
الخاتمة
الخطوات التالية والمراجع
إذًا، هل أنت مستعد لتعلُّم تنسيق PWA؟