مقدمة إلى تطبيقات الويب التقدمية

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

ولكن ، ما هو بالضبط الفرق بين نموذجي و تدريجي التطبيق على شبكة الإنترنت?

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

في هذا الدليل ، سأغطي أساسيات تطبيقات الويب التقدمية, بعض الميزات الأساسية ، وكيف يمكنك البدء في بناء الميزات الخاصة بك.

ما هي تطبيقات الويب التقدمية?

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

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

هناك عدد غير قليل من المتطلبات لندعو شيئا PWA ولكن هذه هي أهمها:

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

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

دعنا نتعمق في أساسيات تطبيقات الويب التقدمية ونتعرف على ما يجعلها علامة.

عمال الخدمة

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

بعبارات بسيطة ، عامل الخدمة يعمل كملف جافا سكريبت ويعمل في خلفية تطبيق الويب الخاص بك. كلما المستخدم يؤدي حدث, يطلق عليه النصي عامل الخدمة إما لسحب البيانات أو حفظ البيانات أو كليهما!

باستخدام خدمة عامل API هو أساسى لتشغيل PWA غير متصل بدعم. هذه هي الطريقة لك نقل البيانات بين وجهات النظر وكيف يمكنك ذلك طلب بيانات من قاعدة بيانات محلية. ولكن ، هذه في الغالب من العناصر المتقدمة التي تتعلمها من خلال العمل في مشروع PWA.

نلقي نظرة خاطفة على كتاب الخدمة للعمال إلى عن على قصاصات أساسية و العروض الحية. هذه طريقة رائعة للتعلم من خلال دراسة ما قام به الآخرون و استنساخ ذلك في التطبيقات الخاصة بك.

إذا كنت ترغب في إنشاء تطبيق ويب تقدمي ابدأ بـ API Worker Service. مجرد العبث بها وإعداد عرض بسيط محليا. هذا سيضع الأساس لوقت لاحق بناء ميزات تطبيق مخصص والصفحات أن كل تشغيل من خلال العاملين في الخدمة.

إلى عن على أدلة المبتدئين و مقتطفات كود مفصلة, أوصي على وجه التحديد بهذه الموارد:

• الشروع في العمل مع عمال الخدمة
• الشروع في العمل مع عمال الخدمة
• نموذج عامل الخدمة: نموذج مخصص للصفحة دون اتصال

قذيفة التطبيق

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

هذا يبقى مع نفسه “التطبيق الأصلي” شعور حيث واجهة دائما مرئية لكن ال محتوى / وظيفة الأحمال بشكل مختلف كل مرة. راجع هذه الصفحة على موقع Google Developers لمعرفة المزيد حول نموذج قذيفة التطبيق.

معظم التطبيقات لديها قذيفة التطبيق بسيط جدا ويجب عليك تصميم الهندسة المعمارية الخاصة بك مع البساطة في الاعتبار.

عادةً ، يحتوي التطبيق shell هذه العناصر الرئيسية:

• أعلى شريط التنقل الروابط.
• زر التحديث (اختياري).
• حاوية خلفية الصفحة.

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

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

الدعم عبر الإنترنت وغير متصل

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

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

إذا كنت تستخدم واجهة برمجة تطبيقات Worker Worker ، فألق نظرة سريعة على ذاكرة التخزين المؤقت API الذي جزء من نفس الإطار. انها عموما أفضل طريقة ل تخزين البيانات محليا و الوصول إليها من عمال الخدمة في وقت لاحق.

بامكانك ايضا اختبار أي تطبيق ويب استخدام منارة, أداة مجانية للتحقق من توافق الميزة ودعم تقنيات PWA.

PWAs دائما تتطلب الدعم حاليا من خلال API Worker Service ، حتى يتمكنوا من ذلك العمل في حالات الاتصال المنخفضة. المنارة هي أفضل طريقة لاختبار الدعم في وضع عدم الاتصال مع مجموعة من الميزات الأخرى.

أمثلة حية

تعتبر دراسة PWAs المباشرة ورؤية كيفية عملها طريقة رائعة للتعلم. ومع ذلك ، فإن السوق التقدمي تطبيق الويب هو لا يزال الناشئة, الكثير من أفضل منها المنتشرة في مختلف أركان الإنترنت.

ولكن ، بفضل PWA الصخور معرض, لقد قمت برعاية بعض الأمثلة المذهلة لإظهار ما يمكن أن تفعله PWAs حقًا.

1. تحويل العملات

هذا بسيط إلى حد ما محول العملات يأخذ أسعار الصرف ويحسب الحالي الاختلافات بين طن من العملات في جميع أنحاء العالم.

ستلاحظ أن تطبيق الويب هذا هو استجابة كاملة, يدعم اللمس, و لصناعة السيارات في التحديثات دون أي تحديث الصفحة.

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

2. لهجات الإنجليزية

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

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

تشغيل الداخلية الرد / مسترجع مع Firebase و اتصال API لخرائط جوجل. بالتأكيد مثال رائع على شيء بسيط إلى حد ما للمبتدئين للدراسة والتعلم.

3. Pokedex.org

آخر PWA بسيط إلى حد ما هو هذا تطبيق Pokedex التي أنشأتها نولان لوسون. كما نشر هذا الرمز بحرية على جيثب, لذلك نحن بعد مشروع آخر هذا يستحق التطفل حولها والدراسة.

نظرًا لأن هذه البيانات يمكن أن تظل ثابتة ، فهي كذلك التعامل معها من خلال محرك محلي مسمي PouchDB. جميع البيانات تأتي من PokeAPI ثم يحفظ جافا سكريبت عادي. هذا يعني أنك تستطيع احفظه محليًا على هاتفك مثل تطبيق أصلي حقيقي وسيتم تشغيله مع أو بدون الوصول إلى الإنترنت. رائع جدا ، أليس كذلك?

كل شيء هو مدعوم من جافا سكريبت, لذلك هي شهادة على مقدار ما يمكنك القيام به مع رمز الواجهة الأمامية. ويستخدم الكثير من التخزين المؤقت مع API Worker Service ، لذلك إنه سريع الجنون وسهل الاستخدام.

4. فليبكارت

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

انها استجابة كاملة و تحميل الصفحات بشكل حيوي. يتم إلحاق عناوين URL للصفحات في المتصفح ، بحيث يمكنك نسخ / لصق ومشاركتها مثل موقع ويب نموذجي.

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

وبينما لم أتمكن من العثور على ريبو لكود مصدر Flipkart بأكمله ، هناك صفحة فليبكارت على جيثب مع مقتطفات كود أصغر من فريق مطورهم.

تعلم المزيد

تقدم تطبيقات الويب هي شعبية بشكل لا يصدق وسوف تكتسب بالتأكيد البخار مع تحول المزيد من المطورين من التطبيقات الأصلية / المختلطة.

هناك قمة سنوية تسمى التقدمي قمة تطبيقات الويب ويقومون بنشر مقاطع فيديو على YouTube يمكنك مشاهدتها مجانًا. هذه هي طريقة رائعة ل التقاط بعض المعرفة الموالية دون دفع ثمن التذكرة.

ولكن ، إذا كنت تبحث عن أكثر تفصيلا أدلة الترميز PWA بالتأكيد تحقق من هذه الدروس:

• دليل المبتدئين لتطبيقات الويب التقدمية
• قم بإنشاء أول تطبيق ويب تقدمي باستخدام React
• بناء تطبيق الويب التقدمي مع البوليمر