أساسيات تطبيق الويب التقدمية

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

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

سيتحدث مؤلف المادة التي ننشرها اليوم عن مثل هذه التطبيقات ، ولماذا هناك حاجة إليها ، وكيفية إنشائها.



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


إضافة إلى زر الشاشة الرئيسية

لنتحدث الآن عن "التقدم" عند تطبيقها على تطبيقات الويب. أقترح التعرف عليهم بشكل أفضل ، ومعرفة كيف تختلف عن تطبيقات الويب العادية ، بالإضافة إلى ذلك ، أريد أن أخبرك لماذا أعتقد أن PWA أفضل من تطبيقات الهاتف المحمول التقليدية.

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

وقد صاغ مصطلح "تطبيق الويب التقدمي" من قبل أليكس راسل وفرانسيس بريمان. وفقًا لـ Alex ، تعد تطبيقات الويب التقدمية مجرد مواقع الويب التي أخذت الفيتامينات المناسبة. ما يكمن في صميم سلطة المياه الفلسطينية لا يمكن تسميته بإطار جديد أو تقنية جديدة. هذه ، في الواقع ، مجموعة من طرق التطوير المتقدمة التي تسمح لك بجعل سلوك تطبيق الويب مشابهًا تمامًا لسلوك تطبيقات سطح المكتب أو الهاتف المحمول الكلاسيكية.


أيقونة PWA على الشاشة الرئيسية

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

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

قبل معرفة سبب الحاجة إلى PWA على الإطلاق ، دعنا نتحدث عن المشاكل التي نواجهها عند تصميم تطبيقات الويب وتطبيقات الجوال العادية.

• اتصال إنترنت بطيء. ربما ، حيث تعيش ، مع الإنترنت السريع كل شيء في محله ، وبالتالي فإن هذه المشكلة لا تؤثر عليك. لكن 60٪ من سكان العالم لا يزالون يستخدمون إنترنت الجيل الثاني. حتى في الولايات المتحدة ، لا تتوفر سوى سرعات لبعض المستخدمين ، مقارنة بسرعات أجهزة المودم العادية باستخدام خطوط الهاتف البسيطة.
• موقع تحميل بطيء. إذا تم تحميل الموقع ببطء شديد ، فهل تعرف المدة التي ينتظرها المستخدم قبل النقر على زر إغلاق النافذة؟ ثلاث ثوان! يترك 53٪ من المستخدمين مواقع بطيئة جدًا.
• تعقيد تثبيت التطبيقات. لا يحرص المستخدمون على تثبيت تطبيقات الهاتف المحمول العادية. يقوم المستخدم العادي بتثبيت 0 تطبيقات شهريًا.
• إشراك المستخدمين في العمل مع التطبيق. يقضي المستخدمون معظم وقتهم في تطبيقات الجوال العادية ، ولكن الوصول إلى تطبيقات الويب للجوال يبلغ حوالي ثلاثة أضعاف ذلك. ونتيجة لذلك ، لا يشارك معظم المستخدمين بشكل خاص في العمل مع التطبيقات ، على الرغم من أن هؤلاء المستخدمين يقضون 80٪ من الوقت في تطبيقات الجوال الثلاثة التي يستخدمونها في أغلب الأحيان.

تساعد تطبيقات الويب التقدمية على حل هذه المشكلات.


سلطة المياه الفلسطينية في العمل

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

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

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

نشرت Google قائمة تحقق لتطوير تطبيقات الويب المتقدمة. ضع في اعتبارك الحد الأدنى من المتطلبات للتطبيق ، والذي يسمح لنا امتثاله بتسمية PWA.

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

بيان PWA هو ملف manifest.json مع شيء مثل هذا:

 { "name": "Trending Meme", "short_name": "Meme", "theme_color": "#2196f3", "background_color": "#2196f3", "display": "standalone", "orientation": "portrait", "Scope": "/", "start_url": "/", "icons": [   {     "src": "images/icons/icon-72x72.png",     "sizes": "72x72",     "type": "image/png"   },   {     "src": "images/icons/icon-96x96.png",     "sizes": "96x96",     "type": "image/png"   },   {     "src": "images/icons/icon-128x128.png",     "sizes": "128x128",     "type": "image/png"   },   {     "src": "images/icons/icon-144x144.png",     "sizes": "144x144",     "type": "image/png"   },   {     "src": "images/icons/icon-152x152.png",     "sizes": "152x152",     "type": "image/png"   },   {     "src": "images/icons/icon-192x192.png",     "sizes": "192x192",     "type": "image/png"   },   {     "src": "images/icons/icon-384x384.png",     "sizes": "384x384",     "type": "image/png"   },   {     "src": "images/icons/icon-512x512.png",     "sizes": "512x512",     "type": "image/png"   } ], "splash_pages": null } 

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


موقع يسهل إنشاء ملف manifest.json

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

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

هنا مثال لملف serviceworker.js .

 self.addEventListener('fetch', event => {   //           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) {   const cachedResponse = await caches.match(request);   return cachedResponse || fetch(request); } 

▍3. شارات

يتم استخدام الأيقونات لبدء التشغيل المثبت على جهاز PWA. يتيح لك الموقع المذكور أعلاه ، الذي يساعد على إنشاء ملفات البيان ، إنشاء مجموعة من رموز التطبيق تلقائيًا استنادًا إلى ملف صورة واحد بحجم 512 × 512 بكسل يتم تحميله على هذا الموقع. يتم حفظ الملفات التي تم .png بتنسيق .png .

▍4. الأمان

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

الملخص

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

أعزائي القراء! ما هو شعورك تجاه تطبيقات الويب التقدمية؟