الدليل الكامل لتطبيقات الويب التقدمية

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

مقدمة

تطبيقات الويب التقدمية (PWA) هي أحدث اتجاهاتتطوير تطبيقات الهاتف المحمولباستخدام تقنيات الويب ، في وقت كتابة هذا التقرير (مارس 2018) تعمل على أجهزة Android و iOS التي تعمل بنظام iOS 11.3 أو أعلى ، و macOS 10.13.4 أو أعلى.

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

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

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

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

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

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

تطبيق الويب التقدمي هو موقع ويب تم تطويره باستخدام تقنيات معينة تجعل تجربة الهاتف المحمول أكثر متعة من موقع الويب العادي المحسن للجوال ، لدرجة أنه يعمل تقريبًا مثل تطبيق محلي ، حيث يوفر الميزات التالية:

  • دعم غير متصل
  • تحميل سريع
  • هو آمن
  • قادر على إرسال إشعارات الدفع
  • يتمتع بتجربة مستخدم غامرة بملء الشاشة بدون شريط URL

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

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

بدائل تطبيقات الويب التقدمية

كيف يقف PWA مقارنة بالبدائل عندما يتعلق الأمر ببناء تجربة الهاتف المحمول؟

دعنا نركز على إيجابيات وسلبيات كل منها ، ودعنا نرى أين تناسب PWAs بشكل جيد.

تطبيقات الجوال الأصلية

تعد تطبيقات الأجهزة المحمولة الأصلية هي الطريقة الأكثر وضوحًا لإنشاء تطبيق جوال. Objective-C أو Swift على iOS و Java / Kotlin على Android و C # على Windows Phone.

تحتوي كل منصة على اصطلاحات UI و UX الخاصة بها ، وتوفر عناصر واجهة المستخدم الأصلية التجربة التي يتوقعها المستخدم. يمكن نشرها وتوزيعها من خلال منصة App Store.

تتمثل نقطة الألم الرئيسية في التطبيقات الأصلية في أن التطوير عبر الأنظمة الأساسية يتطلب التعلم وإتقان ومواكبة العديد من المنهجيات وأفضل الممارسات المختلفة ، لذلك على سبيل المثال ، إذا كان لديك فريق صغير أو حتى كنت مطورًا منفردًا تبني تطبيق على 3 منصات ، تحتاج إلى قضاء الكثير من الوقت في تعلم التكنولوجيا وكذلك البيئة ، وإدارة المكتبات المختلفة ، واستخدام مسارات عمل مختلفة (على سبيل المثال ، يعمل iCloud فقط على أجهزة iOS ، ولا يوجد إصدار Android).

تطبيقات هجينة

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

أكثر الأنظمة الأساسية شيوعًا هي Phonegap و Xamarin و Ionic Framework والعديد من الأنظمة الأخرى ، وعادة ما يكون ما تراه على الصفحة عبارة عن WebView يقوم بتحميل موقع ويب محلي بشكل أساسي.

الجانب الرئيسي للتطبيقات الهجينة هواكتب مرة واحدة ، اركض في أي مكانالمفهوم ، يتم إنشاء رمز النظام الأساسي المختلف في وقت الإنشاء ، وأنت تقوم بإنشاء تطبيقات باستخدامJavaScript، HTML و CSS ، وهو أمر مذهل ، ويتم عرض إمكانيات الجهاز (ميكروفون ، كاميرا ، شبكة ، نظام تحديد المواقع ...) من خلال واجهات برمجة تطبيقات JavaScript.

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

أيضًا ، قد يتأثر أداء طرق العرض المعقدة.

التطبيقات التي تم إنشاؤها باستخدام React Native

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

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

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

ميزات تطبيقات الويب التقدمية

في القسم الأخير رأيت الصفحة الرئيسيةالمنافسينمن تطبيقات الويب التقدمية. إذن كيف تقف PWAs مقارنة بها ، وما هي ميزاتها الرئيسية؟

Remember, currently Progressive Web Apps are Android-only IOS support was added in March 2019

سمات

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

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

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

عدم التواجد في متجر التطبيقات يعنيلست بحاجة إلى موافقة Apple أو Googleلتكون في جيوب المستخدمين ، ويمكنك إصدار التحديثات عندما تريد ، دون الحاجة إلى المرور بعملية الموافقة القياسية التي هي نموذجية لتطبيقات iOS.

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

تطبيقات الويب التقدميةتشغيل في وضع عدم الاتصال.

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

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

فوائد

فلماذا يهتم المستخدمون والمطورون بتطبيقات الويب التقدمية؟

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

المفاهيم الأساسية

  • متجاوب: تتكيف واجهة المستخدم مع حجم شاشة الجهاز
  • إحساس يشبه التطبيق: لا يبدو أنه موقع ويب ، بل يبدو أنه تطبيق بقدر الإمكان
  • دعم غير متصل: سيستخدم تخزين الجهاز لتوفير تجربة غير متصلة بالإنترنت
  • قابل للتثبيت: متصفح الجهاز يطالب المستخدم بتثبيت تطبيقك
  • إعادة الانخراط: دفع الإخطارات يساعد المستخدمين على إعادة اكتشاف تطبيقك بمجرد تثبيته
  • قابل للاكتشاف: يمكن أن توفر محركات البحث وتحسين محركات البحث SEO عددًا أكبر بكثير من المستخدمين مقارنة بمتجر التطبيقات
  • طازج: يقوم التطبيق بتحديث نفسه والمحتوى مرة واحدة عبر الإنترنت
  • آمن: يستخدم HTTPS
  • تدريجي: سيعمل على أي جهاز ، حتى إذا كان أقدم ، حتى لو كان به ميزات أقل (على سبيل المثال كموقع ويب ، غير قابل للتثبيت)
  • قابل للربط: من السهل الإشارة إليه باستخدام عناوين URL

عمال الخدمة

جزء من تعريف تطبيق الويب التقدمي هو أنه يجب أن يعمل دون اتصال.

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

نرىhttp://caniuse.com/#feat=serviceworkersللحصول على بيانات محدثة على دعم المتصفحات.

نصيحة: لا تخلط بين عمال الخدمة وعمال الويب. هم شيء مختلف تماما.

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

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

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

تفحص الالدليل الكامل لعمال الخدمة

بيان التطبيق

بيان التطبيق هو ملف JSON يمكنك استخدامه لتوفير معلومات الجهاز حول تطبيق الويب التقدمي الخاص بك.

قمت بإضافة ارتباط إلى البيان فيالكلرأس صفحات موقع الويب الخاص بك:

<link rel="manifest" href="/manifest.webmanifest">

سيخبر هذا الملف الجهاز بكيفية ضبط:

  • الاسم والاسم المختصر للتطبيق
  • مواقع الأيقونات بأحجام مختلفة
  • عنوان URL للبدء ، المتعلق بالمجال
  • الاتجاه الافتراضي
  • شاشة البداية

مثال

{
  "name": "The Weather App",
  "short_name": "Weather",
  "description": "Progressive Web App Example",
  "icons": [{
    "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-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }],
  "start_url": "/index.html?utm_source=app_manifest",
  "orientation": "portrait",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}

بيان التطبيق هو مسودة عمل W3C ، ويمكن الوصول إليه علىhttps://www.w3.org/TR/appmanifest/

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

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

هذا يعادل اقتراحات Apple HIG (إرشادات الواجهة البشرية) لاستخدام شاشة البداية التي تشبه واجهة المستخدم ، لإعطاء تلميح نفسي وجد أنه يقلل من إدراك التطبيق الذي يستغرق وقتًا طويلاً للتحميل.

التخزين المؤقت

يتم تخزين App Shell مؤقتًا بشكل منفصل عن المحتويات ، ويتم إعداده بحيث يستغرق استرداد الكتل البرمجية الإنشائية من ذاكرة التخزين المؤقت القليل جدًا من الوقت.

اكتشف المزيد على App Shell علىhttps://developers.google.com/web/updates/2015/11/app-shell


المزيد من دروس المتصفح: