تطبيقات الويب التقدمية 101: ماذا ولماذا وكيف

ما هو تطبيق الويب التقدمي؟ لماذا نحتاج واحد؟ كيف يمكننا بناء واحد؟

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

ما لديك الآن هو تطبيق جوال تم تنزيله من تطبيق ويب. كل هذا ، حتى دون الحاجة إلى رؤية وجه متجر التطبيقات.

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

ما صادفته هو تطبيق ويب تقدمي (PWA). يتيح لك PWA تثبيت التطبيق من نافذة المتصفح نفسها ، وهو متاح على هاتفك مثل التطبيق الأصلي ، ويعمل في وضع عدم الاتصال ، تمامًا مثل التطبيق الأصلي.

ولكن ماذا يعني حقًا أن يكون تطبيق الويب تقدميًا؟ دعنا نلقي نظرة أعمق على ماهية تطبيقات الويب التقدمية ، ولماذا أعتقد أنها أفضل من التطبيقات المحلية ، وما الذي يجعلها مختلفة عن تطبيقات الويب التقليدية.

ما هو تطبيق الويب التقدمي (PWA)؟

مصطلح تطبيق الويب التقدمي ابتكره أليكس راسل وفرانسيس بيريمان. وبكلمات أليكس:

تطبيقات الويب التقدمية هي مجرد مواقع الويب التي تناولت جميع الفيتامينات الصحيحة.

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

تقدم تطبيقات الويب التقدمية تجارب المستخدم من خلال التحسين التدريجي. هذا يعني بشكل أساسي أن PWA سيؤدي نفس الوظائف على iPhone 8 الجديد كما لو كان على الجيل الأقدم من iPhone. بالتأكيد ، قد لا تتوفر بعض الميزات ، لكن التطبيق يستمر في العمل والأداء كما ينبغي.

لماذا نحتاج إلى تطبيق ويب تقدمي؟

قبل أن نفهم سبب حاجتنا إلى تطبيق ويب تقدمي ، لنتحدث عن بعض التحديات التي نواجهها اليوم مع التطبيقات المحلية وتطبيقات الويب.

سرعة الإنترنت : قد لا تدرك ذلك اعتمادًا على المكان الذي تعيش فيه ، لكن 60٪ من سكان العالم لا يزالون يستخدمون الإنترنت 2G. حتى في الولايات المتحدة ، يتعين على بعض الأشخاص استخدام الاتصال الهاتفي للوصول إلى الإنترنت.

تحميل بطيء لموقع الويب: هل تعرف كم من الوقت ينتظر المستخدم للنقر فوق الزر "إغلاق X" إذا كان موقع الويب بطيئًا جدًا؟ ثلاث ثوان! يتخلى 53٪ من المستخدمين عن موقع الويب إذا كان بطيئًا جدًا.

احتكاك كبير: لا يرغب الأشخاص في تثبيت تطبيقات أصلية. يقوم المستخدم العادي بتثبيت 0 تطبيقات في الشهر.

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

تساعد PWAs في حل هذه المشاكل. هناك عدة أسباب لاستخدام تطبيق ويب تقدمي ، ولكن إليك بعض أفضل الإمكانات التي يوفرها:

  1. F ast: توفر PWAs تجارب سريعة باستمرار. من اللحظة التي يقوم فيها المستخدم بتنزيل التطبيق إلى اللحظة التي يبدأ فيها التفاعل معه ، يحدث كل شيء بسرعة كبيرة. نظرًا لأنه يمكنك تخزين البيانات مؤقتًا ، فمن السهل جدًا بدء تشغيل التطبيق مرة أخرى حتى بدون الوصول إلى الشبكة.
  2. لقد دمجت تجربة المستخدم: يشعر PWAs ويتصرف مثل التطبيقات المحلية. يجلسون في الشاشة الرئيسية للمستخدم ، ويرسلون إشعارات مثل التطبيقات الأصلية ، ويمكنهم الوصول إلى وظائف الجهاز مثل التطبيقات الأصلية. تبدو التجربة سلسة ومتكاملة.
  3. R تجربة eliable: مع مساعدة من العاملين في مجال الخدمات، ونحن يمكن ان يعول عليه رسم صورة على شاشة المستخدم حتى عند فشل الشبكة.
  4. E ngaging: نظرًا لأنه يمكننا إرسال إشعارات إلى مستخدم ، يمكننا حقًا زيادة التفاعل عن طريق إبقاء المستخدم على علم بالتطبيق والتفاعل معه.

باختصار ، إنها حريق.

كيفية إنشاء تطبيق ويب تقدمي

نشرت Google قائمة تحقق من العناصر لتطبيقات الويب التقدمية. سوف أتجاوز أربعة متطلبات كحد أدنى لتطبيق ما ليكون PWA:

1. بيان تطبيق الويب

هذا مجرد jsonملف يوفر معلومات وصفية حول تطبيق الويب. يحتوي على معلومات مثل رمز التطبيق (الذي يراه المستخدم بعد تثبيته في درج التطبيق الخاص به) ، ولون خلفية التطبيق ، واسم التطبيق ، والاسم المختصر ، وما إلى ذلك. يمكننا كتابة ملف البيان هذا بأنفسنا أو يمكننا استخدام الأدوات لإنشاء ملف لنا.

2. عمال الخدمة

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

هنا عينة serviceworker.js

self.addEventListener('fetch', event => { //caching for offline viewing const {request} = event; const url = new URL(request.url); if(url.origin === location.origin) { event.respondWith(cacheData(request)); } else { event.respondWith(networkFirst(request)); } }); async function cacheData(request) 

3. أيقونة

يستخدم هذا لتوفير رمز التطبيق عندما يقوم المستخدم بتثبيت PWA في درج التطبيق الخاص به. ستكون صورة jpeg جيدة. تساعد أداة البيان التي أبرزتها أعلاه في إنشاء رموز لتنسيقات متعددة ، ووجدتها مفيدة جدًا.

4. خدم عبر HTTPS

لكي يكون تطبيق الويب PWA ، يجب تقديم تطبيق الويب عبر شبكة آمنة. مع خدمات مثل Cloudfare و LetsEncrypt ، من السهل حقًا الحصول على شهادة SSL. لا يعد كونك موقعًا آمنًا من أفضل الممارسات فحسب ، بل إنه ينشئ أيضًا تطبيق الويب الخاص بك كموقع موثوق به للمستخدمين الذين يظهرون الثقة والموثوقية ، ويتجنبون هجمات الوسيط.

ملاحظة: هذا جزء 1 من 2 جزء سلسلة. في الجزء التالي ، سننشئ تطبيق ويب تقدميًا من البداية باستخدام skeleton index.html. تحقق من الجزء 2 هنا.

لم تتعلم شيئا جديدا؟ هل لديك تعليقات؟ تعرف DevJoke؟ تويت لي @ shrutikapoor08

لماذا يتم الخلط بين المبرمجين بين عيد الهالوين وعيد الميلاد؟

لأن أكتوبر 31 = 25 ديسمبر #DevJokes #WorkChat

- شروتي كابور (@ shrutikapoor08) ٢٢ يونيو ٢٠١٨