السلام عليكم ورحمة الله وبركاته
في عصر الويب الحديث، تعتبر تطبيقات الويب التقدمية (PWA) مفتاحًا لتوفير تجارب مستخدم متميزة. لتحقيق هذا الهدف، يعتمد المطورون على الأدوات والتقنيات المناسبة مثل CSS و JavaScript بطريقة متكاملة. يهدف هذا المقال إلى استكشاف كيفية تحسين تجربة المستخدم في تطبيقات PWA من خلال تكامل CSS و JavaScript.
الجزء الأول: تكامل CSS:
<style>/*<![CDATA[*/
/*! Custom PWA install button by Fineshop Design */
.pwa-button{position:fixed;z-index:999;left:23px;bottom:125px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:50%;background:var(--linkC);visibility:visible;opacity:1;transition:visibility .5s,opacity .5s}
.pwa-button[hidden]{display:flex;visibility:hidden;opacity:0}
.pwa-button:not([disabled])::before{content:'';position:absolute;z-index:-1;inset:0;background:inherit;border-radius:inherit;animation:1s cubic-bezier(0,0,.2,1) infinite pwa-button-ping}
.pwa-button svg.flash{width:22px;height:22px;fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.4}
@keyframes pwa-button-ping{75%,to{transform:scale(1.6);opacity:0}}
/*]]>*/</style>
ورقة الأنماط السي اس اس (CSS) هي أحد أساسيات تصميم واجهة المستخدم في أي تطبيق ويب. يتم تضمين شفرة CSS داخل علامة <style> في الجزء العلوي من علامة <head> في صفحة HTML، حيث يمكن للمطورين تخصيص مظهر التطبيق بشكل شامل. تحتوي الشفرة المقدمة على عناصر CSS التالية:
- .pwa-button: تعريف نمط زر التثبيت في تطبيق PWA.
- @keyframes pwa-button-ping: تعريف حركة الزر لإضافة تأثير بصري جذاب عند الضغط.
استخدام CSS بشكل فعال يساهم في تحسين تجربة المستخدم من خلال تخصيص مظهر عناصر التطبيق، مما يعزز الاندماج والتفاعل مع المحتوى بشكل أفضل.
الشرح التفصيلي للشفرة CSS:
/*<![CDATA[*/
/*! Custom PWA install button by Fineshop Design */
هذا تعليق يستخدم للوصول إلى محتوى CSS داخل علامة <style>.
.pwa-button {
position: fixed;
z-index: 999;
left: 23px;
bottom: 125px;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: var(--linkC);
visibility: visible;
opacity: 1;
transition: visibility .5s, opacity .5s;
}
هذا الجزء يعرف مظهر زر التثبيت لتطبيق PWA. يتم تحديد مواصفات الزر بواسطة الخصائص المختلفة مثل الموضع (position) والأبعاد والشكل (border-radius) ولون الخلفية (background) والرؤية (visibility) والشفافية (opacity). كما يحتوي على تأثير انتقالي (transition) لتحسين تجربة التصفح.
- عنصر z-index: 999; يمكنك من تحديد الطبقة التي سيتموضع بها الزر.
- عنصر left: 23px; يمكنك من تخصيص موقع عرض الزر و هامش الحواف يمكنك تخصيصه بما يتناسب مع موقع افتراضيا الزر سيظهر على اليسار نسبة الابتعاد عن الحواف مناسبة و لكن يمكنك تخصيصها بما يناسبك.
اذا كنت ترغب بعرض الزر على جهة اليمين يكفيك تغيير القيمة left الى right و تخصص الهامش بما يناسبك.
- عنصر background: var(--linkC); يمكنك تغيير القيمة هنا باللون المناسب لموقعك.
باقي القيم القابلة لتخصيص متاحة في كل عنصر بما يناسب احتياجتك ولكن انصحك بتركها كما هي و اكتفي بتعديل ما اشرت له بلون ازرق في صندوق الاكواد.
.pwa-button[hidden] {
display: flex;
visibility: hidden;
opacity: 0;
}
هذا الجزء يحدد خصائص الزر عندما يكون مخفيًا. يتم إخفاء الزر وتغيير رؤيته وشفافيته..pwa-button:not([disabled])::before {
content: '';
position: absolute;
z-index: -1;
inset: 0;
background: inherit;
border-radius: inherit;
animation: 1s cubic-bezier(0,0,.2,1) infinite pwa-button-ping;
}
هذا الجزء يضيف تأثيراً لزر التثبيت، حيث يتم إنشاء عنصر تماثلي (::before) وتعيين خصائصه لإضافة تأثير بصري يتم تطبيقه على الزر..pwa-button svg.flash {
width: 22px;
height: 22px;
fill: none;
stroke: #fff;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.4;
}
هذا الجزء يحدد مظهر الرمز الرسومي المستخدم داخل الزر.طريقة تركيب الشيفرة
- قم بتسجيل الدخول إلى حسابك في بلوجر وانتقل إلى لوحة التحكم الخاصة بالمدونة التي ترغب في تركيب الشيفرة فيها.
- انتقل إلى قالب المدونة الخاص بك عن طريق النقر على "المظهر".
- اضغط على الرمز السهم بجانب تخصيص اختر "تحرير HTML" للوصول إلى محرر القالب.
- ابحث عن
</head>في الكود، وهذه العلامة تظهر في نهاية قسم<head>. - قم بلصق الشيفرة CSS التي تريد تركيبها مباشرة قبل علامة
</head>. - انقر على رمز لحفظ التغييرات التي قمت بها في القالب.
- قم بتحديث مدونتك لتطبيق التغييرات.
</head> اذا حاولة معاينة فحص مصدر موقعك.الجزء الثاني: تكامل JavaScript:
<script type='module'>/*<![CDATA[*/
/*! Custom PWA install button by Fineshop Design */
(({button:t,onInstall:n})=>{let i=null;var e=()=>{i&&(t.disabled=!0,i.prompt().then(e=>{"accepted"===e.outcome&&o()}).finally(()=>{t.disabled=!1}),i=null)},l=e=>{e.preventDefault(),i=e,t.hidden=!1};const o=()=>{t.hidden=!0,t.removeEventListener("click",e),window.removeEventListener("beforeinstallprompt",l)};t instanceof HTMLElement&&(t.hidden=!0,t.addEventListener("click",e),window.addEventListener("beforeinstallprompt",l));const d=e=>{t instanceof HTMLElement&&o(),"function"==typeof n&&n(e),window.removeEventListener("appinstalled",d)};window.addEventListener("appinstalled",d)})({
button: document.getElementById("app_install_button")||Object.assign(document.body.appendChild(document.createElement("button")),{hidden:!0,type:"button",className:"pwa-button",innerHTML:"<svg class='flash' viewBox='0 0 24 24'><path d='M6.08998 13.28H9.17998V20.48C9.17998 22.16 10.09 22.5 11.2 21.24L18.77 12.64C19.7 11.59 19.31 10.72 17.9 10.72H14.81V3.52002C14.81 1.84002 13.9 1.50002 12.79 2.76002L5.21998 11.36C4.29998 12.42 4.68998 13.28 6.08998 13.28Z' stroke-miterlimit='10'></path></svg>"}),
onInstall(){
/**
* Do something on app installed
* i.e. Display a Thank You message in UI
*/
setTimeout(() => toastNotif("شكرا لك على تثبيت التطبيق!"), 2000);
}
});
/*]]>*/</script>
الجافا سكريبت يسهم في تحسين تفاعل المستخدم مع تطبيقات PWA. يتم تضمين شفرة JavaScript في الجزء السفلي من الصفحة داخل علامة </body> لضمان تحميل الصفحة بشكل كامل قبل تنفيذ السكريبت. يشمل الكود الخاص بالجافا سكريبت:
- دالة e التي تفتح نافذة التثبيت عند النقر على زر التثبيت.
- دالة l التي تستمع لحدث beforeinstallprompt لعرض زر التثبيت عند تمكينه.
- دالة o التي تخفي زر التثبيت بعد تثبيت التطبيق.
- دالة d التي تستمع لحدث appinstalled وتنفذ إجراءً معينًا بمجرد تثبيت التطبيق.
تضمين الجافا سكريبت بطريقة صحيحة يمكن أن يضيف وظائف تفاعلية أساسية مثل فتح نوافذ جديدة وإخفاء العناصر، مما يعزز تجربة المستخدم ويجعل التطبيق أكثر فاعلية.
شرح للشفرة JavaScript:
البداية والتعليقات:
/*<![CDATA[*/
/*! Custom PWA install button by Fineshop Design */
هذه التعليقات هي عبارة عن علامات لبدء ونهاية محتوى البرنامج التابع للتوسيعات (CDATA). تستخدم للإشارة إلى أن المحتوى الوارد بينهما ليس جزءًا من الكود HTML، ولكن يجب تفسيره بشكل معين.الدالة الرئيسية:
(({button:t,onInstall:n})=>{
هذه الدالة تستقبل كائن يحتوي على خصائص button و onInstall كمعلمات.تعريف الدوال:
let i=null;
var e=()=>{ ... };
const o=()=>{ ... };
const d=e=>{ ... };
تعريف الدوال المستخدمة في البرنامج، مثل دالة الضغط (e) ودالة الإخفاء (o) ودالة d التي تقوم بتنفيذ إجراء معين بعد تثبيت التطبيق.تحديد زر التثبيت:
t instanceof HTMLElement&&(t.hidden=!0,t.addEventListener("click",e),window.addEventListener("beforeinstallprompt",l));
هذا الجزء يقوم بتحديد زر التثبيت وإضافة استماع لحدث النقر عليه.إضافة الرمز الرسومي للزر:
Object.assign(document.body.appendChild(document.createElement("button")),{hidden:!0,type:"button",className:"pwa-button",innerHTML:"<svg class='flash' viewBox='0 0 24 24'><path d='M6.08998 13.28H9.17998V20.48C9.17998 22.16 10.09 22.5 11.2 21.24L18.77 12.64C19.7 11.59 19.31 10.72 17.9 10.72H14.81V3.52002C14.81 1.84002 13.9 1.50002 12.79 2.76002L5.21998 11.36C4.29998 12.42 4.68998 13.28 6.08998 13.28Z' stroke-miterlimit='10'></path></svg>"})
هذا الجزء يضيف عنصر HTML <button> للصفحة ويحدد له الخصائص المختلفة مثل النوع والفئة والرمز الداخلي.دالة onInstall:
onInstall(){
setTimeout(() => toastNotif("شكرا لك على تثبيت التطبيق!"), 2000);
}
دالة تُستدعى عند تثبيت التطبيق، حيث تُظهر إشعارًا يُشكر المستخدم على التثبيت.تركيب شيفرة Javascript:
- في نفس صفحة محرر القالب.
- ابحث عن
</body>في الكود، وهذه العلامة تظهر في نهاية الصفحة قبل إغلاق الجسم (</body>). - قم بلصق الشيفرة JavaScript التي تريد تركيبها مباشرة قبل علامة
</body>. - انقر على رمز لحفظ التغييرات التي قمت بها في القالب.
- قم بتحديث مدونتك لتطبيق التغييرات.
</body>.تحسين تجربة المستخدم في تطبيقات الويب التقدمية يتطلب الاستفادة الكاملة من قوة CSS لتخصيص التصميم والجافا سكريبت لإضافة وظائف تفاعلية، مما يجعل التطبيقات أكثر جاذبية وسهولة استخدامًا للمستخدمين.جمال الحزازي
تنبيه مهم
عند إضافة الشفرات إلى قالب موقعك أو مدونتك، من الحكمة أخذ نسخة احتياطية وتوثيق الشفرات لضمان عدم فقدان أو تلف البيانات. إليك بعض النصائح لذلك:
- أخذ نسخة احتياطية:
قبل تعديل أي شيء في قالب موقعك أو مدونتك، تأكد من أخذ نسخة احتياطية للقالب الحالي. يمكنك فعل ذلك عن طريق الانتقال إلى قسم القالب في لوحة التحكم واختيار خيار "نسخ القالب" أو "حفظ نسخة احتياطية"، أو يمكنك ببساطة نسخ الكود وحفظه في ملف نصي على جهاز الكمبيوتر الخاص بك. - توثيق الشفرات:
قبل إضافة أي شيفرة جديدة، قم بتوثيق الشفرة الحالية بشكل جيد. يمكنك ذلك عن طريق إنشاء تعليقات في الشفرة توضح وظيفة كل جزء منها وكيفية عمله. هذا يسهل علىك فهم الشفرة في المستقبل والتعديل عليها بشكل أفضل مثلا فتح و غلق التوثيق<!--[ open adds code]-->و<!--[ close adds code]-->. - الاختبار الشامل:
بعد إضافة الشفرات الجديدة، قم بإجراء اختبار شامل لموقعك أو مدونتك للتأكد من عمل الشفرات بشكل صحيح وعدم وجود أي مشاكل. قم بفحص صفحات متعددة من الموقع للتأكد من تأثير الشفرات على جميع الصفحات. - التوثيق المستقبلي:
بمجرد إضافة الشفرات بنجاح والتأكد من عملها بشكل صحيح، قم بتوثيقها في ملف مستقل يحتوي على جميع الشفرات المستخدمة في الموقع مع شرح وظيفة كل منها. هذا يساعدك في المراجعة المستقبلية وإجراء التعديلات عند الحاجة.
تطبيقات الويب التقدمية تمثل مستقبل التطبيقات عبر الويب، وتحسين تكامل CSS و JavaScript يعد جزءًا أساسيًا من تطوير تجارب المستخدم الناجحة والجذابة.
سؤال: ما هي أهمية تطبيقات الويب التقدمية (PWA)؟
- جواب: تطبيقات الويب التقدمية توفر تجربة مستخدم مميزة تشبه تطبيقات الهواتف الذكية، مما يتيح للمستخدمين الوصول إلى المحتوى بسهولة وسلاسة دون الحاجة إلى التثبيت.
سؤال: كيف يمكن تحسين تجربة المستخدم في تطبيقات PWA باستخدام CSS؟
- جواب: يمكن تحسين تجربة المستخدم باستخدام CSS لتخصيص مظهر عناصر التطبيق مثل زر التثبيت وإضافة تأثيرات بصرية لجذب الانتباه.
سؤال: ما دور الجافا سكريبت في تطبيقات PWA؟
- جواب: الجافا سكريبت يساعد في تحسين تفاعل المستخدم مع التطبيقات PWA، ويضيف وظائف تفاعلية مثل فتح نوافذ جديدة وإخفاء العناصر بناءً على تفاعل المستخدم.
سؤال: كيف يمكن ضمان استدعاء الشفرة الخاصة بالجافا سكريبت في الوقت المناسب في تطبيقات PWA؟
- جواب: يمكن ذلك من خلال وضع شفرة الجافا سكريبت في الجزء السفلي من الصفحة داخل علامة </body> لضمان تحميل الصفحة بشكل كامل قبل تنفيذ السكريبت.
الختام:
يمثل تكامل CSS و JavaScript جزءًا أساسيًا من تطوير تطبيقات PWA الناجحة. من خلال استخدامهما بشكل متكامل، يمكن للمطورين تحسين تجربة المستخدم وجعل التطبيقات أكثر جاذبية وفعالية.
المشاركات ذات الصلة
شكرًا لمساعدة ChatGPT في إعداد هذا المقال
مصدرة الشيفرة:
Fineshop Design©
المصادر:
SiwaneXYZ©
https://www.siwane.xyz/2024/05/custom-pwa-install-button.html
