كان UX نقطة محورية لتطوير الويب الحديث لبعض الوقت الآن. يتأثر هذا بالعديد من العوامل ، بما في ذلك سرعة تحميل الصفحات ، وقابلية القراءة ، وسهولة الاستخدام ، والتصميم. ولكن الآن بعد أن المزيد من المستخدمين تفضل تصفح الويب المحمول على استخدام أجهزة سطح المكتب ، يجب أن يبدأ أي موقع ويب - سواء أكان مدوّنة أو متجرًا للتجارة الإلكترونية - في تحديد أولويات استخدام الأجهزة الجوّالة .
في الوقت الحاضر ، من السهل تطبيق سمة تستجيب للجوّال واستخدام أدوات مثل أدوات Google اختبار التناسب للجوّال لتلقي توصيات إضافية حول كيفية تحسين موقعك. ولكن إذا كنت ترغب في نقل الأشياء إلى المستوى التالي ، يمكنك تطوير تطبيق الويب التقدمي (PWA) لتقديم تجارب جديدة لا تنسى لمستخدمي الهاتف المحمول.
تعزز PWA تقنيات الويب الحديثة لتمكين ميزات تشبه التطبيقات. على عكس مواقع المحمول التقليدية ، ليس من الضروري أن يقوم PWA بتحديث الصفحة بأكملها عند تحميل محتوى جديد — ولا يحتاج إلى اتصال بالإنترنت حتى يمكن الوصول إليه. كما أنها قابلة للتثبيت ، مما يعني أنه يمكن للمستخدمين إعادة استخدامها بسهولة عن طريق إضافة اختصار الشاشة الرئيسية.
من المحتمل أن تكون تطبيقات الويب التقدمية هي الشيء الكبير التالي للويب المحمول. تم اقتراح هذا في الأصل من قبل Google منذ عامين فقط في عام 2015. ولكن ، في غضون فترة زمنية قصيرة ، جذبت الكثير من الاهتمام نظرًا لأنه من السهل نسبيًا تطويره ولتقديم تجربة استخدام التطبيق.
—Rahul Varshneya ، أحد مؤسسي شركة تطوير التطبيقات Arkenea .
يُعد PWA مشروعًا كبيرًا قد يقود اتجاه وجود شبكة الجوال في المستقبل. ولكن إذا كنت جديدًا تمامًا على PWAs ، فإليك 7 أدوات وموارد تضعك على المسار الصحيح:
عندما يتعلق الأمر بتطوير PWA ، يجب أن يكون لديك فهم أعمق لما هو قادر عليه.
لرؤية PWAs في العمل ، يمكنك الرجوع إليها PWA.rocks للحصول على أمثلة تحت عدة فئات ، بما في ذلك الأعمال التجارية والألعاب والتسوق ، والاجتماعية. سيساعدك ذلك على تصور ما يمكن أن تبدو عليه ملفات PWA المستقبلية. يمكنك أيضًا استعارة الإلهام من الأمثلة المتوفرة عند وضع تصور لما ستقدمه PWA لمستخدمي الهاتف المحمول.
ضرب هي أداة مجانية مفتوحة المصدر يمكنها مساعدتك في استخدام نموذج عرض نموذج أو روابط MVVM. يتيح لك هذا تبسيط عملية تشفير واجهات برمجة تطبيقات جافا سكريبت عن طريق السماح لك بتعريف طرق العرض والوصلات التعريفية التي تتحكم فيها خصائص viewmodel .
يعمل النظام الأساسي على JavaScript تمامًا ، والذي يعمل مع جميع المتصفحات الرئيسية وأي إطار عمل على الويب. يمكن أيضًا دمج مكتبة Knockout بسهولة مع المواقع الحالية بدون إعادة كتابة شاملة.
أسرع طريقة لإنشاء PWA هي استخدام PWABuilder وبسرعة بناء عامل خدمة للوظائف دون اتصال ، والتي تعمل عن طريق سحب وتقديم "offline.html" من خادم الويب الخاص بك عندما يفقد المستخدمون الاتصال بالإنترنت. يمكنك أيضًا إرسال PWA إلى متجر التطبيقات لأجهزة Android و iOS.
لاستخدام PWABuilder ، كل ما عليك فعله هو إدخال عنوان URL لموقعك الإلكتروني ثم ملء التفاصيل الإضافية مثل اسمك ووصف الموقع والرمز المفضل. يمكنك أيضًا تعديل خصائص معينة بسهولة مثل اتجاه الشاشة واللغة ولون الخلفية الخاص بـ PWA. ستقوم المنصة بعد ذلك تلقائيًا بإنشاء بيان استنادًا إلى المعلومات التي تقدمها.
جافا سكريبت عادة ما تكون اللغة التمهيدية التي تعلمها الطلاب الذين يرغبون في تعلم تطوير الويب. إذا كنت من مطوري جافا أو دوت نت ذوي الخبرة ، فعندئذ AngularJS هي واحدة من أفضل أطياف جافا سكريبت التي يمكنك استخدامها لتطبيقات الويب. ومع ذلك ، فإن موقع الويب الخاص بهم يقدم الكثير من الأدلة والدروس والموارد التي من شأنها مساعدتك على تعلم طريقك حول النظام الأساسي.
يوفر الإصدار الأحدث ، Angular v4.0 ، نفس البيئة سواء كنت تقوم بالتطوير للهاتف المحمول أو سطح المكتب. إذا كنت تعتقد أن Angular معقدًا جدًا لاحتياجاتك ، فيمكنك اختيار ذلك بدلاً منه تتفاعل - مكتبة جافا سكريبت مصممة خصيصًا لتطوير واجهة المستخدم. بديل آخر هو البوليمر ، والتي يمكن أن توفر لك نماذج ومكونات أخرى قابلة لإعادة الاستخدام يمكنها تسريع عملية تطوير PWA.
A PWA ليس بالضبط مشروع DIY للمدونين الذاتي الصنع أو المسوقين ، ولكن لا يزال من الممكن القيام به مع الموارد المناسبة. إذا كان لديك بالفعل خبرة في أنظمة إدارة المحتوى ولكنك لا تعرف شيئًا عن تطوير تطبيقات الويب ، فيمكنك عندئذٍ الوصول إلى الأساسيات Google Developers ، مكتبة من الموارد التي يمكن أن تساعدك على تعلم كيفية رمز.
لدى مطوري Google برنامجًا تعليميًا شاملاً حول كيفية عمل PWAs ، وكيفية إنشاء واحد ، وكيفية جعله يعمل بشكل صحيح. كما يغطي أيضًا أساسيات أخرى مثل تمكين "إضافة إلى الشعار على الشاشة الرئيسية" واستخدام HTTPS.
Webpack أداة مفيدة للغاية لتجميع موارد تطبيقات جافا سكريبت ، بما في ذلك الأصول غير البرمجية مثل الخطوط والصور. سيتم التعامل معها على أنها كائنات JavaScript ، والتي بدورها تسمح بتحميلها بشكل أسرع. كما يجعل النظام الأساسي من إدارة التبعيات أسهل بكثير.
فقط تذكر أن Webpack يحتوي على منحنى تعلم حاد ، مما يعني أنك قد تبحث في ساعات من التصفح للبرامج التعليمية والأدلة. ومع ذلك ، فإن الموارد التعليمية والوثائق المتاحة على موقع الويب ليست صديقة للمبتدئين. والخبر السار هو ، يتم تغطية Webpack على نطاق واسع في مواقع أخرى ، بما في ذلك قسم الوثائق Angular 4.0.
أخيرا، جيثب هو موقع ويب يعتمد على المجتمع ويحافظ على مستودعات للمشاريع. ويغطي مجموعة واسعة من المواضيع المتعلقة بالبرمجة ، بما في ذلك العاملين في خدمة جافا سكريبت و PWA. في الواقع ، يمكنك العثور على مستودعات PWA.rocks و Webpack داخل النظام الأساسي. سيساعدك هذا على تعميق فهمك أو حتى المساهمة في تطويره.
اليوم ، هناك عدد قليل من المستودعات التي تشمل PWAs على GitHub. يمكنك التعلم من هذه المشاريع أو بدء المستودع الخاص بك أثناء تجربة أول PWA الخاص بك. يتمتع GitHub الآن أيضًا بميزات إدارة المشروع ، مما يتيح لك التعاون مع مطورين آخرين عن بُعد بسهولة.
تطبيقات الويب التقدمية هي مستقبل تجارب الويب للجوّال ، ولكن ليس هناك الكثير من العلامات التجارية التي تستخدمها حاليًا. باستخدام الأدوات المذكورة أعلاه ، أنت الآن قادر تمامًا على إنشاء واجهة PWA وقائمة موثوقة. ما عليك سوى ملاحظة أن أدوات وموارد وممارسات سلطة المياه الفلسطينية تتطور مع التقنيات المتطورة باستمرار للمتصفحات الرئيسية على الإنترنت.