إذا كنت مسئولاً تقنيًا أو محلل تسويق رقمي ومهتم بتوفير تجربة ويب حديثة لتطبيق الويب في Adobe Experience Manager (AEM) وكنت تبحث عن خياراتك في ذلك، فقد وصلت إلى المقالة الصحيحة. سيتناول هذا شرحًا عن تطبيقات الويب التقدّمية (PWA) والإجراءات المطلوبة لإنشاء تطبيق ويب تقدّمي (PWA) في AEM بالاستفادة من مكتبة WorkBox من خلال الإعدادات بدون ترميز.
مزايا تطبيق الويب التقدّمي (PWA)
تستفيد تطبيقات الويب التقدّمية من ميزات الويب الحديثة. يمكن تثبيت هذه التطبيقات على جهازك ويتم تحميلها بسرعة، كما يتم تحميل الزيارات اللاحقة على الفور. يستجيبون للمدخلات بسرعة. وتعمل هذه الميزة بشكل جيد في حال الاتصال بالإنترنت غير الموثوق به أو في حال عدم الاتصال بالإنترنت. تستخدم تطبيقات الويب التقدّمية (PWA) واجهات برمجة تطبيقات حديثة لتوفير تجربة تفاعلية شبيهة بالتطبيقات مع واجهة مستخدم اختيارية بملء الشاشة وإمكانية تحديث الخلفية والوصول إلى البيانات بلا إنترنت.
لتحسين أحد تطبيقات الويب وتحويله إلى تطبيق ويب تقدّمي، يجب إضافة عنصرين:
- بيان تطبيق الويب: ملف إعداد JSON يحدِّد عنوان URL لنقطة دخول التطبيق، ورمزه المستخدَم لتمثيل تطبيق الويب التقدّمي (PWA) والإعدادات الأخرى التي تصف شكل التطبيق وأدائه.
- مشغّل خدمات: نص برمجي يوفّر خدمات في الخلفية تثري تطبيق الويب التقدّمي (PWA) من خلال تحديد الموارد التي يستخدمها تطبيق الويب التقدّمي (PWA) واستراتيجيات الوصول إليها.
ما المقصود بعامل الخدمات؟
عامل الخدمات في الأساس هو مجرد نص برمجي يُشغِّله المتصفّح بشكل مستقل أثناء تفاعلك مع تطبيق الويب. يوفّر مشغّل الخدمات النشط خدمات مثل التخزين المؤقت الذكي باستخدام Cache API، وتعديل البيانات محدَّثة باستخدام Background Sync API، والدمج مع الإشعارات الفورية. يعمل مشغّل الخدمات الذي يتّبع استراتيجية التخزين المؤقت المناسبة على توفير تجارب مستقرة وموثوقة للمستخدمين لسيناريوهات مختلفة، من خلال عرض الموارد المخزّنة مسبقًا بشكل فوري وتخزين البيانات في ذاكرة التخزين المؤقت وتحديث الموارد عند الاتصال بالويب.
قد يكون من الصعب على عاملي الخدمة الكتابة من الصفر. تم إنشاء "إطار العمل" لتسهيل الأمر. 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. عند استخدام "مواقع AEM" مع "مدير تجربة Adobe" كخدمة سحابية، تسهّل "مواقع AEM" تحويل أي موقع إلكتروني حالي خاص بـ AEM أو تطبيق صفحة واحدة إلى تطبيق ويب تقدّمي قابل للتثبيت ويمكن تفعيله بلا اتصال بالإنترنت، وذلك باستخدام الإعدادات فقط وبدون ترميز. وهو يستخدم Workbox لتقديم أفضل الممارسات لتطبيقات الويب التقدّمية ويزيل تعقيدات كتابة البيانات النموذجية وعاملي الخدمات.
يدعم AEM أقلمة المحتوى، ما يعني أنّه يمكنك استخدام علامات تجارية مختلفة وحتى محتوى بلا إنترنت لمختلف اللغات. ولإجراء ذلك، أنشئ إعدادات PWA مختلفة لكل خبير لغة.
بدء إعداد تطبيق الويب التقدّمي (PWA) على AEM
سجِّل الدخول إلى Adobe Experience Manager كخدمة سحابية واختَر أي صفحة من "مواقع إدارة تجربة Adobe" أو صفحة رئيسية للغة وانقر على الخصائص. من المفترض أن تظهر لك علامة تبويب باسم "تطبيق الويب التقدّمي". (ملاحظة: إذا لم تظهر علامة التبويب هذه، يُرجى التواصل مع Adobe لتفعيل هذه الميزة). يمكنك ضبط تثبيت تطبيقات الويب التقدّمية ومظهرها ومظهرها ببضع نقرات فقط.
إذا كنت قد أكملت البرامج التعليمية لمواقع AEM، فمن المحتمل أنّك اطّلعت على موقع WKND من قبل. تستخدم هذه المقالة العرض التوضيحي WKND كنقطة بداية. عند الانتهاء، سيتم تحديث WKND من تطبيق ويب إلى تطبيق ويب تقدّمي (PWA) باستخدام WorkBox.
ضبط البيان
بيان تطبيق الويب هو ملف JSON يحتوي على خصائص تصف مظهر تطبيق الويب التقدّمي (PWA) وسلوكه. توفّر "مواقع إدارة تجربة Adobe" واجهة مستخدم سهلة لإعداد المواقع.
عنوان 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، يمكنك توجيه المستخدمين مباشرةً إلى تجربة التطبيق بدلاً من الصفحة التلقائية التي سيتم فيها عرض مستخدم جديد أو لم تتم مصادقته. يوفّر ذلك لمستخدمي تطبيق الويب التقدّمي (PWA) تجربة أكثر سلاسةً وتشبه التطبيقات.
تدرك إدارة AEM أنّ اللغات المختلفة قد يكون لها مظهر وطابع مختلف. يمكنك ضبط خصائص وألوان ورموز مختلفة للغات أو لغات مختلفة، ثم مزامنة الإعدادات مع الصفحات المرتبطة.
بعد الوصول إلى تطبيق الويب التقدّمي (PWA) على المتصفّح، يمكنك النقر بزر الماوس الأيمن وفحص البيانات لإظهار "أدوات مطوّري البرامج" وعرض البيان ضمن لوحة "التطبيقات".
إعداد مشغّل الخدمات
يمكنك ضبط المحتوى على ذاكرة التخزين المؤقت واستراتيجية التخزين المؤقت لاستخدامه.
إذا كنت تستعين بمشغِّلي الخدمات، قد تكون على دراية باستراتيجيات التخزين المؤقت. تحدد استراتيجيات التخزين المؤقت الموارد التي سيتم تخزينها مؤقتًا وما إذا كان يجب البحث عن هذه الموارد في ذاكرة التخزين المؤقت أولاً أم الشبكة أولاً أم في ذاكرة التخزين المؤقت باستخدام احتياطي للشبكة. يمكنك بعد ذلك اختيار الموارد لتخزينها مؤقتًا عندما يكون عامل الخدمات مثبّتًا. ينفِّذ العاملون في خدمة تطبيقات AEM استراتيجية ذاكرة التخزين المؤقت العملية، ما يعني أنّ تجربة المستخدم لن تتأثر حتى في حال تحديد مسار مفقود أو معطّل.
في AEM، يشير مصطلح "clientlibs" إلى المكتبات من جهة العميل، أي مجموعة من موارد JavaScript وCSS والموارد الثابتة ذات الصلة التي تمت إضافتها إلى مشروعك والتي يتم عرضها واستخدامها من خلال متصفح الويب الخاص بالعميل. يمكنك بسهولة ضبط المكتبات من جهة العميل لاستخدامها بلا اتصال بالإنترنت من خلال تحديد هذه المكتبات في واجهة المستخدم.
يمكنك أيضًا تضمين موارد تابعة لجهات خارجية، مثل الخطوط. توفِّر إعدادات ذاكرة التخزين المؤقت بلا إنترنت معلومات الإعداد لمشغِّل الخدمات الذي يتم إنشاؤه لتطبيقك الذي يستخدم مربّع العمل داخليًا. هذا كل ما في الأمر تقريبًا لجعل تطبيقك قابلاً للتثبيت. بعد تثبيت التطبيق، سيظهر رمزه على الشاشة الرئيسية لجهازك الجوّال تمامًا مثل تطبيق النظام الأساسي. يؤدي النقر على الرمز إلى الوصول إلى موقع wknd.
تجدر الإشارة إلى أنّه يمكنك تغيير المحتوى أو هذه الإعدادات في أي وقت. عند نشر التغييرات، سيعدّل المتصفّح مشغّل الخدمات لدى العميل وستظهر رسالة للمستخدم تفيد بتوفّر إصدار أحدث من تطبيق الويب التقدّمي (PWA). ويمكن للمستخدم النقر على الرسالة لإعادة تحميل التطبيق والحصول على آخر التحديثات. يمكنك فتح لوحة أدوات وتطبيقات المطوّرين في المتصفّح للاطّلاع على تفاصيل مشغّل الخدمات.
يمكنك توسيع مساحة تخزين ذاكرة التخزين المؤقت لعرض المحتوى الذي تم تخزينه مؤقتًا محليًا:
النتائج
حان الوقت لإلقاء نظرة على نتائج عملك الجاد. يمكنك تحسين موقعك الإلكتروني الذي يستخدم AEM ليصبح تطبيق ويب تقدّميًا، وذلك من خلال الإعدادات فقط وبدون ترميز.
توفِّر أدوات المطوّرين في Chrome تدقيق المنارة الذي يتيح لك التحقّق من مدى امتثال تطبيق الويب والضبط لمعايير تطبيقات الويب التقدّمية.
الخلاصة
توفّر تطبيقات الويب التقدّمية تجربة مشابهة للتطبيق على موقعك الإلكتروني، وتستخدم النظام الأساسي المتكامل والطبيعة المفتوحة للويب بتكلفة أقل للتطوير والصيانة مع التحكّم في التوزيع. يعزّز ذلك معدّل التفاعل والحفاظ على المستخدمين، والأهم من ذلك، يؤدي إلى زيادة معدلات الإحالات الناجحة. يسهّل AEM جنبًا إلى جنب مع Workbox تحسين موقعك الإلكتروني الحالي ليصبح تطبيق ويب تقدّمي (PWA) من خلال الإعدادات فقط وبدون ترميز.
المراجع
- دليل WKND التعليمي
- مشغِّلو الخدمات
- واجهة برمجة تطبيقات ذاكرة التخزين المؤقت
- بيان تطبيق الويب
- إتاحة الرموز التكيُّفية في تطبيقات الويب التقدّمية (PWA) مع رموز قابلة للإخفاء
- مزيد من المعلومات حول مواقع Adobe Experience Manager
- مزيد من المعلومات عن Workbox:
- استراتيجيات التخزين المؤقت لمربعات العمل:
- مزيد من المعلومات حول تطبيقات الويب التقدّمية