👩🏻‍🔧 🏯 👨🏿‍💼 تطبيقات الويب التقدمية. دليل العمل 🏂🏼 🤲 🍌

مرحبا يا هابر! نحن نستكشف إمكانية نشر كتاب على PWA (تطبيقات الويب التقدمية). هناك بالفعل الكثير من المنشورات حول حبري حول هذا الموضوع ، المواد من مدونة شركة RUVDS ذات أهمية خاصة ، والتي سنقتبس منها تعريف سلطة المياه الفلسطينية:

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

السؤال الذي يطرح نفسه في بعض الأحيان: كيف ترتبط تطبيقات الويب التقدمية بالتطبيقات الأصلية؟ هل يستحق تطوير PWA إذا كان لديك بالفعل مواطن؟ بادئ ذي بدء ، يتم الرد على هذا السؤال ، بالإضافة إلى العديد من الأسئلة الأخرى ، من خلال مقالة Jason Grigsby من موقع "A List Apart" ، الذي قمنا بترجمته لك اليوم. المقالة مقتطف من كتاب 2018. من فضلك لا تنسى التصويت.

لتحديد ما إذا كانت مؤسستك حكيمة في تطوير تطبيق الويب التقدمي الخاص بها (PWA) ، اسأل نفسك سؤالين:

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

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

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

ومع ذلك ، إذا قمت بتشغيل موقع يوفر ربحًا لمؤسستك بأي شكل من الأشكال ، فيجب عليك تحويله إلى تطبيق ويب تقدمي وتخطيط كيفية القيام بذلك الآن. تتلقى الشركات التي نشرت تطبيقات ويب متقدمة تحويلات متزايدة ومشاركة المستخدمين وزيادة المبيعات وإيرادات الإعلانات. على سبيل المثال ، Pinterest نتيجة لإدخال PWA ، زاد الجمهور الرئيسي بنسبة 60 في المائة ، ونمت إيرادات الإعلانات التي أنشأها المستخدمون بنسبة 44 في المائة. بدأ مستخدمو West Elm في قضاء حوالي 15 وقتًا إضافيًا على الموقع ، وزادت الإيرادات من زيارة واحدة بنسبة 9 بالمائة .

رسم: كتب Eddie Osmani ، Google ، دراسة حالة حول تطبيق الويب التقدمي لـ Pinterest ، مقارنته بكل من موقعه القديم للجوّال وتطبيقه الأصلي.

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

الشكل : يحتوي PWAstats.com على إحصائيات وقصص تشهد على فعالية تطبيقات الويب التقدمية.

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

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

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

يمكن أن تتعايش التطبيقات الأصلية و PWA

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

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

ملحق الجمهور المخصص

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

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

على الرغم مما تضمنه لك المدونات التقنية ، فإن الويب للجوال ينمو بشكل أسرع من التطبيقات الأصلية. قارن موقع comScore أفضل 1000 تطبيق للجوّال بأفضل 1000 موقع تم وضعه في مكانه وخلص إلى أن "يبلغ جمهور الويب على الجوّال ثلاثة أضعاف تقريبًا من تطبيقات الجوال وينمو بمعدل ضعف السرعة ".

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

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

إذا كنت محظوظًا بما يكفي وبدأ شخص ما في تثبيت تطبيقك ، فستظهر العقبة التالية: تحتاج إلى إقناع الأشخاص بعدم التوقف عن استخدام التطبيق. عندما قام أخصائي ، أندرو تشين ، بتحليل البيانات المتعلقة باحتفاظ المستخدم بمادة 125 مليون هاتف محمول ، وجد أن التطبيق العادي يفقد 77٪ من DAU (المستخدمون النشطون يوميًا) بعد 3 أيام من التثبيت . في 30 يومًا ، يتم فقد 90 ٪ من DAUs. على مدار 90 يومًا ، يتم فقدان أكثر من 95 ٪ من DAUs.

رسم: يظل ولاء مستخدمي الجوّال قصيرًا جدًا. يفقد التطبيق العادي 95 ٪ من مستخدميه النشطين في 90 يومًا.

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

كما كتب أليكس راسل في مقاله عن Medium في عام 2017:

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

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

حماية موقعك

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

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

يمكن أيضًا ترقية مواقع HTTPS إلى إصدار جديد من HTTP يسمى HTTP / 2. الميزة الرئيسية لـ HTTP / 2 هي أنه أسرع بكثير من HTTP / 1. ينص العديد من موفري الاستضافة وشبكات توصيل المحتوى (CDNs) على أنه عند التبديل إلى HTTPS فأنت متصل بـ HTTP / 2 دون أي إجراء إضافي من جانبك.

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

كمتصفح HTTPS gingerbread ، بدأت المتصفحات تتطلب قدرات HTTPS من الموقع كإلزامية. إذا كنت ترغب في استخدام أحدث وأكبر تقنيات الويب ، فلا يمكنك الاستغناء عن HTTPS . في الواقع ، تعتبر بعض الميزات التي كانت تعمل على HTTP غير الآمن تؤثر على البيانات الحساسة. هذا ، على سبيل المثال ، هو تحديد الموقع الجغرافي. في HTTPS ، فهي محدودة. بعد بعض التفكير ، يبدو أن هذا أيضًا سوط صغير. سوط الزنجبيل؟

نظرًا لكل هذا ، يُنصح بتزويد المستخدمين بموقع آمن. لذلك يتم استبعاد التحذيرات الرهيبة التي لا معنى لها على الفور. يمكنك الوصول إلى قدرات المتصفح الجديدة. احصل على مكاسب السرعة التي يوفرها HTTP / 2. وأيضًا: قم بتمهيد الطريق لتطبيق ويب تقدمي.
من أجل استخدام عمال الخدمة ، وهي تقنية رئيسية تتعلق بتطبيقات الويب التقدمية ، تحتاج إلى تجهيز HTTPS على الموقع. لذلك ، إذا كنت ترغب في الاستمتاع بجميع سلع سلطة المياه الفلسطينية في وقت واحد ، فأنت بحاجة أولاً إلى القيام ببعض الأعمال التحضيرية الجادة.

زيادة الأرباح

هناك العديد من الدراسات التي تثبت وجود علاقة بين سرعة الموقع ومقدار الوقت والمال الذي يرغب الناس في إنفاقه عليه. وفقًا لـ DoubleClick ، " توقف 53٪ من زيارات مواقع الويب للجوّال التي بدأها المستخدم إذا كانت صفحة التنزيل تستغرق أكثر من 3 ثوانٍ ". وقد وجدت شركة Walmart أن كل 100 مللي ثانية لتحسين سرعة تحميل الصفحة تنخفض إلى 1٪ من الإيرادات الإضافية .

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

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

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

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

يمكن أن يكون لتطبيقات الويب التقدمية تأثير كبير على الأداء. على سبيل المثال ، تمكن Tinder من تقليل وقت تحميل الصفحة من 11.91 ثانية إلى 4.69 ثانية من خلال تطوير تطبيق ويب تقدمي ، علاوة على ذلك ، فهو أصغر بنسبة 90٪ من تطبيق Android الأصلي. أطلقت سلسلة الفنادق الشجرية تطبيق الويب التقدمي الخاص بها وحصلت على زيادة أربعة أضعاف في التحويل على مدار العام؛ تضاعفت معدلات التحويل للمستخدمين العائدين ثلاث مرات ، وانخفض متوسط وقت تفاعل المستخدم مع موقع للجوال إلى 1.5 ثانية.

ضمان موثوقية الشبكة

لا تعمل شبكات الهاتف المحمول بسلاسة. لديك للتو اتصال LTE عالي السرعة ، والآن أنت تزحف بالفعل بسرعة 2G أو تكون غير متصل بالإنترنت بشكل عام. لقد وجدنا أنفسنا جميعًا في مثل هذه المواقف. لكن معظم المواقع لا تزال قيد التنفيذ مع توقع أن يتم العمل معها على شبكة موثوقة.

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

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

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

لا تترك المستخدمين

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

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

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

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

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