إذا كنت قائدًا تقنيًا أو محلل تسويق رقمي وتهتم بتوفير تجربة عصرية على الإنترنت لتطبيق الويب Adobe Experience Manager (AEM) وكنت تبحث عن الخيارات المتاحة لك لإجراء ذلك، يمكنك الاطّلاع على المقالة المناسبة. سيتناول هذا القسم ماهية تطبيقات الويب التقدّمية (PWA) وما تحتاج إليه لإنشاء تطبيق ويب تقدّمي (PWA) في AEM للاستفادة من مكتبة WorkBox من خلال الإعدادات بدون ترميز.
مزايا استخدام الويب التقدّمي (PWA)؟
تستفيد تطبيقات الويب التقدمية مما يمكن أن تفعله شبكة الويب الحديثة. وهي قابلة للتثبيت على جهازك، كما يتم تحميلها بسرعة، مع تحميل الزيارات اللاحقة على الفور. يستجيبون للمدخلات بسرعة. تعمل بشكل جيد إذا كان الجهاز غير موثوق أو عندما تكون غير متصل بالإنترنت. تستخدم تطبيقات الويب التقدّمية (PWA) واجهات برمجة تطبيقات حديثة لتوفير تجربة تفاعلية تشبه التطبيق مع واجهة مستخدم اختيارية بملء الشاشة، وتحديث في الخلفية، وإمكانية الوصول إلى البيانات بلا إنترنت.
لتحسين تطبيق ويب ليصبح تطبيق ويب تقدّميًا، يجب إضافة عنصرَين:
- بيان تطبيق الويب: ملف إعداد JSON يحدّد عنوان URL لنقطة دخول التطبيق، والرمز المستخدَم لتمثيل تطبيق الويب التقدّمي (PWA) وإعدادات أخرى تصف مظهر التطبيق وسلوكه.
- مشغّل الخدمات: نص برمجي يقدّم خدمات في الخلفية تُثري تطبيق الويب التقدّمي (PWA) من خلال تحديد الموارد التي يستخدمها تطبيق الويب التقدّمي واستراتيجيات الوصول إليها.
ما هو مشغّل الخدمات؟
عامل الخدمة هو في جوهره نص برمجي يعمل المتصفح بشكل مستقل أثناء تفاعلك مع تطبيق الويب. يقدّم مشغّل الخدمات النشط خدمات مثل التخزين المؤقت الذكي باستخدام واجهة برمجة تطبيقات ذاكرة التخزين المؤقت، والحفاظ على تحديث البيانات باستخدام واجهة برمجة التطبيقات لمزامنة الخلفية، والدمج مع الإشعارات الفورية. يوفّر مشغّل الخدمات الذي يتّبع استراتيجية التخزين المؤقت المناسبة تجارب مستخدم مستقرة وموثوقة لسيناريوهات مختلفة، ويعرض الموارد المخزّنة مؤقتًا بشكل فوري، وتخزين البيانات في ذاكرة التخزين المؤقت، وتحديث الموارد عند الاتصال بالويب.
قد يكون من الصعب على موظفي الخدمة الكتابة من البداية. تم إنشاء Workbox لتسهيل العملية. Workbox هو مجموعة من المكتبات لمساعدتك في كتابة وإدارة عاملي الخدمات والتخزين المؤقت باستخدام Cache Storage API. عند استخدام مشغّلي الخدمات وواجهة برمجة التطبيقات Cache Storage API معًا، يتحكّمون في كيفية طلب مواد العرض (HTML وCSS وJS والصور وغيرها) من الشبكة أو ذاكرة التخزين المؤقت، ما يسمح لك بعرض المحتوى المخزَّن مؤقتًا بلا إنترنت. باستخدام Workbox، يمكنك إعداد كليهما وإدارتهما بسرعة وغير ذلك باستخدام رمز جاهز للإصدار العلني.
ترقية موقع إلكتروني AEM إلى تطبيق ويب تقدّمي (PWA)
Adobe Experience Manager (AEM) هو حلّ شامل لإدارة المحتوى لإنشاء المواقع الإلكترونية والتطبيقات المتوافقة مع الأجهزة الجوّالة والنماذج واللافتات الرقمية. وتسهِّل عليك إدارة المحتوى التسويقي ومواد العرض.
على الرغم من أنّ AEM يوفّر مكتبة واسعة لإنشاء تطبيقات الويب، كان من الصعب حتى الآن إنشاء تطبيق ويب تقدّمي (PWA) من خلال إضافة مشغّل خدمات وبيان.
مواقع Adobe Experience Manager هي أداة إنشاء واجهة المستخدم وهي جزء من Adobe Experience Manager. عند استخدام Adobe Experience Manager كخدمة سحابة إلكترونية، تسهّل "مواقع AEM" تحويل أي موقع إلكتروني حالي أو تطبيق من صفحة واحدة إلى "تطبيق ويب تقدّمي" يمكن تثبيته بلا اتصال بالإنترنت وبدون ترميز. فهو يستخدم Workbox لتقديم أفضل الممارسات لتطبيقات الويب التقدّمية ويزيل التعقيدات المرتبطة بكتابة البيانات النموذجية وعاملي الخدمات.
يدعم AEM أقلمة المحتوى، مما يعني أنه يمكنك الحصول على علامة تجارية مختلفة ومحتوى مختلف في وضع عدم الاتصال لمختلف اللغات. ولإجراء ذلك، أنشئ إعدادات تطبيق ويب تقدّمي (PWA) مختلفة لكل خبير لغة.
بدء إعداد تطبيق الويب التقدّمي (PWA) على AEM
سجِّل الدخول إلى Adobe Experience Manager كخدمة السحابة الإلكترونية واختَر أيًا من صفحات "مواقع Adobe Experience Manager" أو صفحة رئيسية اللغة ثم انقر على الخصائص. من المفترض أن تظهر لك علامة تبويب باسم "تطبيق الويب التقدّمي". (ملاحظة: إذا لم تظهر لك علامة التبويب هذه، يُرجى التواصل مع Adobe لتفعيل هذه الميزة). يمكنك ضبط إعدادات تطبيقات الويب التقدّمية وطريقة تثبيتها ببضع نقرات فقط.
إذا أكملت البرامج التعليمية لمواقع AEM، فمن المحتمل أن تكون قد شاهدت موقع WKND من قبل. تستخدم هذه المقالة العرض التوضيحي WKND كنقطة بداية. عند الانتهاء، سيتم تحديث WKND من تطبيق ويب إلى تطبيق ويب تقدّمي (PWA) باستخدام WorkBox.
إعداد البيان
بيان تطبيق الويب هو ملف JSON يتضمّن سمات تصف شكل تطبيق الويب التقدّمي (PWA) وسلوكه. توفّر مواقع Adobe Experience Manager الإلكترونية واجهة مستخدم سهلة لضبط المواقع الإلكترونية.
عنوان URL للبدء هو نقطة دخول تطبيق الويب التقدّمي (PWA). عندما ينقر المستخدم على رمز تطبيق الويب التقدّمي (PWA) على هاتفه، سيتمكّن من الوصول إلى عنوان URL لبدء التشغيل. يحدِّد وضع العرض ما إذا كان التطبيق يعرض تجربة في نافذة أو ملء الشاشة. ويمكنك أيضًا تحديد اتجاه شاشة التطبيق. لون المظهر هو لون النافذة وشريط الأدوات، بينما يكون لون الخلفية هو لون شاشة البداية عند تشغيل التطبيق. هذا الرمز هو الصورة التي تظهر على الشاشة الرئيسية للأجهزة أو درج التطبيقات عند تثبيت التطبيق على الجهاز. تعمل الإعدادات الموضحة في الصورة على إنشاء ملف البيان بتنسيق JSON الموضح أدناه.
{
"name": "WKND Adventures and Travel",
"short_name": "WKND Adventures and Travel",
"start_url": "/content/wknd/us/en.html",
"display": "standalone",
"theme_color": "#FFDC00",
"background_color": "#FF851B",
"orientation": "any",
"icons": [
{
"src": "/content/dam/wknd/pwa-logo.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any maskable"
}
]
}
يمكن أن يكون عنوان URL للبدء مختلفًا عن الصفحة المقصودة التلقائية لنطاقك. من خلال تغيير مَعلمة start_url، يمكنك توجيه المستخدمين مباشرةً إلى تجربة التطبيق بدلاً من الصفحة التلقائية التي سيتم عرض مستخدم جديد فيها أو لم تتم مصادقتها. ويوفّر ذلك لمستخدمي تطبيق الويب التقدّمي تجربة أكثر سلاسة شبيهة بالتطبيقات.
تدرك AEM أن اللغات المختلفة يمكن أن تتفاوت في الشكل والأسلوب. ويمكنك تكوين خصائص وألوان ورموز مختلفة للغات أو اللغات المختلفة، ثم مزامنة التهيئة مع الصفحات المرتبطة.
بعد الوصول إلى تطبيق الويب التقدّمي (PWA) في المتصفّح، يمكنك النقر بزر الماوس الأيمن وفحص "أدوات مطوري البرامج" وعرض البيان ضمن لوحة "التطبيقات".
إعداد مشغّل الخدمات
يمكنك ضبط المحتوى على التخزين المؤقت واستراتيجية التخزين المؤقت المطلوب استخدامها.
إذا كنت تستخدم عاملي الخدمات، قد تكون على دراية باستراتيجيات التخزين المؤقت. تحدد استراتيجيات التخزين المؤقت الموارد التي يتم تخزينها مؤقتًا وما إذا كان عليك البحث عن هذه الموارد في ذاكرة التخزين المؤقت أولاً، أو البحث عنها في الشبكة أولاً، أو في ذاكرة التخزين المؤقت باستخدام احتياطي للشبكة. يمكنك بعد ذلك اختيار الموارد المراد تخزينها مؤقتًا بشكل مسبق عند تثبيت عامل الخدمة. ينفذ عاملو خدمة تطبيق AEM استراتيجية ذاكرة التخزين المؤقت لإعادة التشغيل، ما يعني أن تجربة المستخدم لن تتعطل حتى إذا حددت مسارًا مفقودًا أو معطّلاً.
في AEM، يشير مصطلح "العملاء" يشير إلى المكتبات من جانب العميل: مجموعة من موارد جافا سكريبت وCSS والموارد الثابتة ذات الصلة التي تمت إضافتها إلى مشروعك والتي يتم عرضها والاستفادة منها في متصفح الويب للعميل. يمكنك بسهولة ضبط المكتبات من جهة العميل لاستخدامها بلا اتصال بالإنترنت عن طريق تحديد هذه المكتبات في واجهة المستخدم.
يمكنك أيضًا تضمين موارد خارجية مثل الخطوط. إنّ إعدادات ذاكرة التخزين المؤقت بلا إنترنت هذه توفّر معلومات الإعداد لعامل الخدمة الذي يتم إنشاؤه لتطبيقك الذي يستخدم صندوق العمل داخليًا. كل ذلك تقريبًا يجعل تطبيقك قابلاً للتثبيت. بعد التثبيت، سيظهر رمز التطبيق على الشاشة الرئيسية لجهازك الجوّال مثل تطبيق نظام أساسي. سيؤدي النقر على هذا الرمز إلى الوصول إلى موقع wknd.
يُرجى العِلم أنّه يمكنك تغيير المحتوى الخاص بك أو هذه الإعدادات في أي وقت. وعند نشر التغييرات، سيحدّث المتصفّح عامل الخدمة لدى العميل، وستظهر رسالة للمستخدم تفيد بتوفّر إصدار أحدث من تطبيق الويب التقدّمي (PWA). يمكن للمستخدم النقر على الرسالة لإعادة تحميل التطبيق والحصول على آخر التحديثات. يمكنك فتح أدوات المطوّرين ولوحة التطبيقات في المتصفّح للاطّلاع على تفاصيل مشغّل الخدمات.
يمكنك توسيع مساحة تخزين ذاكرة التخزين المؤقت لعرض المحتوى الذي تم تخزينه مؤقتًا محليًا:
النتائج
حان الوقت لإلقاء نظرة على نتائج عملك الشاق. من خلال الإعدادات فقط وبدون ترميز، تمكّنت من تحسين موقع AEM الخاص بك ليصبح تطبيق ويب تقدّميًا.
توفّر أدوات مطوّري برامج Chrome تدقيقًا للمنارة يتيح لك معرفة مدى امتثال تطبيق الويب وإعداداته لمعايير تطبيق الويب التقدّمي.
الخاتمة
توفر تطبيقات الويب التقدمية لموقعك على الويب تجربة شبيهة بالتطبيق تستخدم النظام الأساسي والطبيعة المفتوحة للويب بتكلفة أقل للتطوير والصيانة مع توفير إمكانية التحكم في التوزيع. ويؤدي ذلك إلى تحسين التفاعل والحفاظ على المستخدمين، والأهم من ذلك أنّه يؤدي إلى زيادة معدلات الإحالات الناجحة. تسهّل AEM جنبًا إلى جنب مع Workbox إمكانية تحسين موقعك الحالي إلى تطبيق ويب تقدّمي (PWA) من خلال الإعداد فقط وبدون ترميز.
المراجع
- دليل WKND التعليمي
- مشغِّلو الخدمات
- واجهة برمجة تطبيقات ذاكرة التخزين المؤقت
- بيان تطبيق الويب
- إتاحة الرموز التكيُّفية في تطبيقات الويب التقدّمية (PWA) مع رموز قابلة للإخفاء
- مزيد من المعلومات حول المواقع الإلكترونية لـ Adobe Experience Manager
- مزيد من المعلومات حول Workbox:
- استراتيجيات التخزين المؤقت في Workspace:
- مزيد من المعلومات حول تطبيقات الويب التقدّمية