مواد العرض والبيانات

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

مكوّنات التطبيق

يتضمن تطوير تطبيق عادةً العديد من الأصول والموارد، بدءًا من المنطق والتعليمات البرمجية (مجمّعة أم لا) إلى عناصر واجهة المستخدم مثل تصميمات الشاشة والصور والشعارات والخطوط.

تطبيق الويب التقدّمي هو موقع إلكتروني، وبالتالي فإنّ جميع مواد العرض الخاصة به هي نفسها الموجودة على الويب:

رمز HTML للمحتوى والعرض الأولي للصفحة.
JavaScript للمنطق، بما في ذلك القدرة على تشغيل وحدات WebAssembly (رمز مجمّع) وعرض رسومات محسَّنة للأجهزة ثنائية وثلاثية الأبعاد.
CSS للتخطيط والنمط والرسوم المتحركة.
الصور بتنسيقات الويب، مثل PNG وJPEG وWebP وSVG
فيديوهات بتنسيقات ويب، مثل MPEG-4 وWebM
خطوط الويب:
البيانات بتنسيق JSON أو تنسيقات أخرى

تنزّل المواقع الإلكترونية تلقائيًا الأصول عبر الشبكة، بدءًا من HTML وتستمر في تنزيل باقي الموارد.

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

مقارنة بين التطبيقات الخاصة بالنظام الأساسي وتطبيقات الويب التقدّمية

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

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

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

ذاكرة التخزين المؤقت ومساحة التخزين

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

لا تحتاج تطبيقات الويب التقدّمية (PWA) إلى الاعتماد على هذه السياسات وحدها في المحتوى الخاص بها. وبدلاً من ذلك، تتوفّر لدينا حلول تتيح لك التحكّم بشكل أفضل في وقت وكيفية تخزين الموارد في ذاكرة التخزين المؤقت ووقت وكيفية تسليمها محليًا: Cache Storage API. تتوفر على الويب بعض حلول التخزين من جهة العميل المتاحة:

مساحة تخزين الويب: تتضمّن localStorage وsessionStorage. تخزِّن واجهات برمجة التطبيقات هذه أزواج سلاسل المفاتيح/القيم البسيطة. مساحة تخزين الويب محدودة ولها واجهة برمجة تطبيقات متزامنة، لذلك يجب تجنُّبها كلما أمكن ذلك.
IndexedDB: قاعدة بيانات مستندة إلى كائنات (No-SQL) مع واجهة برمجة تطبيقات غير متزامنة تكون جيدة لأداء الويب. يمكن لقاعدة البيانات المفهرسة تخزين البيانات المنظَّمة والثنائية من جهة العميل. وهو عادةً ما ستستخدمه لتخزين البيانات، مثل البيانات التي تحصل عليها أو ترسلها كطلب من واجهة برمجة التطبيقات. من المفيد أيضًا حفظ البيانات محليًا على الفور ثم مزامنتها مع الخادم لاحقًا. يتم استخدام IndexedDB API للتفاعل مع قاعدة البيانات.
مساحة التخزين في ذاكرة التخزين المؤقت: مجموعة من أزواج طلبات HTTP والاستجابة يمكنك استخدامها لتخزين الموارد واستردادها باستخدام عناوين HTTP، تمامًا كما يتم تسليمها من الخادم. تسمح لك Cache Storage API بتخزين طلبات الشبكة واستردادها وتعديلها وحذفها، مثل مواد العرض، حتى عندما تكون غير متصلة بالإنترنت.

الحاجة إلى عمال الخدمة

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

وباستخدام مشغّل الخدمات، يمكنك تقديم مواد العرض بدون الحاجة إلى الاتصال بالشبكة، وإرسال إشعارات إلى أحد المستخدمين، وإضافة شارة إلى رمز تطبيق الويب التقدّمي (PWA)، وتعديل المحتوى في الخلفية، وحتى تشغيل تطبيق الويب التقدّمي (PWA) بالكامل بلا اتصال بالإنترنت. يمكنك الاطّلاع على مزيد من المعلومات حول مشغِّلي الخدمات في الفصل التالي.

جاهز للاستخدام بلا إنترنت

يتوقّع المستخدمون من تطبيقك أن يمنحك تجربة سريعة وجاهزة دائمًا. وهذا يعني أن تطبيقك يجب أن يعمل بلا اتصال بالإنترنت.

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

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

مناهج ذاكرة التخزين المؤقت الشائعة الاستخدام

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

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

جارٍ تعديل مواد العرض

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

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

الحجم والعمر

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

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

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