جرت مناقشات ترحيبية كثيرة في الآونة الأخيرة حول تطبيقات الويب التقدّمية. لا يزال هذا النموذج جديدًا نسبيًا، ولكن يمكن أن تحسِّن مبادئه التطبيقات المُنشأة باستخدام JavaScript العادية أو React أو Polymer أو Angular أو أي إطار عمل آخر. في هذه المشاركة، سألخص بعض الخيارات والتطبيقات المرجعية لبدء استخدام تطبيق الويب التقدمي اليوم.
ما هو تطبيق الويب التقدّمي؟
من المهم تذكُّر أنّ تطبيقات الويب التقدّمية تعمل في كل مكان، ولكنّها تُحقّق أداءً أفضل في المتصفحات الحديثة. يشكّل التحسين التدريجي العمود الفقري للنموذج.
شبّه "آرون غوستافسون" التحسين التدريجي بحلوى M&M بالفول السوداني. الفول السوداني هو المحتوى الخاص بك، وطبقة الشوكولاتة هي طبقة العرض التقديمي، وJavaScript هو صدفة الحلوى الصلبة. يمكن أن يختلف لون هذه الطبقة ويمكن أن تختلف التجربة حسب إمكانات المتصفّح المستخدَم.
اعتبر قوقعة الحلوى كما لو كانت المكان الذي توجد به العديد من ميزات تطبيق الويب التقدمي. فهي تجارب تجمع بين أفضل ما في الويب وأفضل التطبيقات. وهي مفيدة للمستخدمين من أول زيارة في علامة تبويب المتصفح، ولا تتطلب أي عمليات تثبيت.
وعندما يتفاعل المستخدم مع هذه التطبيقات بشكل متكرّر، تصبح هذه التطبيقات أكثر رواجًا، إذ يتم تحميلها بسرعة كبيرة على اتصالات الشبكة البطيئة (بفضل خدمة worker)، كما يتم إرسال إشعارات فورية ذات صلة بها، ويكون لها رمز من الدرجة الأولى على شاشة المستخدم الرئيسية يمكنه تحميلها كتجارب تطبيق في وضع ملء الشاشة. ويمكنهم أيضًا الاستفادة من إعلانات البانر الذكية لتثبيت تطبيقات الويب.
تطبيقات الويب التقدّمية هي
- التطبيقات التقدّمية: تعمل مع كل مستخدم بغض النظر عن المتصفّح الذي يختاره، لأنّها تم إنشاؤها باستخدام التحسين التدريجي كأساس أساسي.
- التوافق مع مختلف الأجهزة: يجب أن يكون التصميم متوافقًا مع مختلف أشكال الأجهزة، سواء كانت أجهزة كمبيوتر مكتبية أو أجهزة جوّالة أو أجهزة لوحية أو أي جهاز قادم.
- التشغيل بدون اتصال بالإنترنت: تم تحسينه باستخدام مهام الخدمة للعمل بلا إنترنت أو على شبكات ذات جودة منخفضة.
- مثل التطبيقات: استخدِم نموذج واجهة التطبيق لتوفير تنقّلات وتفاعلات على غرار التطبيقات.
- التطبيقات الجديدة: تكون مُحدَّثة دائمًا بفضل عملية تعديل العملية.
- آمن: يتم عرضه عبر بروتوكول أمان طبقة النقل (TLS) لمنع التجسّس والتأكّد من عدم التلاعب بالمحتوى.
- قابلة للاكتشاف: يمكن التعرّف عليها كـ "تطبيقات" بفضل ملفات بيان W3C ونطاق تسجيل مشغّل الخدمة الذي يتيح لمحرّكات البحث العثور عليها.
- قابلة لإعادة التفاعل: يمكنك تسهيل إعادة التفاعل من خلال ميزات مثل الإشعارات الفورية.
- القابلية للتثبيت - للسماح للمستخدمين "بالاحتفاظ" بالتطبيقات التي يجدونها أكثر فائدة على الشاشة الرئيسية بدون عناء متجر التطبيقات.
- قابل للربط: يمكنك المشاركة بسهولة عبر عنوان URL بدون الحاجة إلى تثبيت عمليات تثبيت معقدة.
لا تقتصر تطبيقات الويب التقدّمية أيضًا على متصفّح Chrome لأجهزة Android. في ما يلي تطبيق الويب التقدّمي Pokedex الذي يعمل في Firefox لنظام التشغيل Android (الإصدار التجريبي) مع ميزتَي "الإضافة إلى الشاشة الرئيسية" و"التخزين المؤقت لعامل الخدمة" في مرحلة مبكرة تعملان بشكل جيد.
أحد الجوانب الرائعة للطبيعة "التقدمية" لهذا النموذج هو أنّه يمكن فتح الميزات تدريجيًا عندما يوفّر مورّدو المتصفّح دعمًا أفضل لهم. تعمل تطبيقات الويب التقدّمية، مثل Pokedex، بشكل رائع أيضًا في Opera على Android، مع بعض الاختلافات الواضحة في التنفيذ:
للتعرّف على مزيد من المعلومات عن تطبيقات الويب التقدّمية، يمكنك قراءة مشاركة المدوّنة الأصلية التي كتبها "أليكس راسل" والتي تعرّف على هذه التطبيقات. بدأ "بول كينلان" أيضًا علامة Stack Overflow مفيدة جدًا لتطبيقات الويب التقدّمية، وهي تستحق الاطّلاع عليها.
المبادئ
بيان تطبيق الويب
يتيح البيان لتطبيق الويب الخاص بك أن يحظى بحضور أقرب إلى التطبيقات الأصلية على شاشة المستخدم الرئيسية. يسمح هذا الخيار بتشغيل التطبيق في وضع ملء الشاشة (بدون ظهور شريط عنوان URL)، ويوفر التحكم في اتجاه الشاشة وفي الإصدارات الحديثة من Chrome على Android يتيح تحديد شاشة البداية ولون المظهر لشريط العناوين. ويُستخدم أيضًا لتحديد مجموعة من الأيقونات حسب الحجم والكثافة المستخدمة لشاشة البداية وأيقونة الشاشة الرئيسية المذكورة أعلاه.
يمكن العثور على نموذج لملف البيان في Web Starter Kit أو أكثر في نماذج Google Chrome. كتب "بروس لاوسون" مقالة عن أداة إنشاء ملفات البيان، كما كتب "منير لموري" مقالة عن أداة التحقّق من ملف البيان على الويب التي تستحق الاطّلاع عليها.
في مشاريعي الشخصية، أعتمد على realfavicon Builder لإنشاء الرموز ذات الحجم المناسب لكل من بيان تطبيق الويب وللاستخدام على أجهزة iOS وأجهزة الكمبيوتر المكتبي وما إلى ذلك. يمكن أيضًا أن تحقّق وحدة Node الخاصة بشارات الويب نتيجة مماثلة كجزء من عملية الإنشاء.
تتيح المتصفّحات المستندة إلى Chromium (Chrome وOpera وما إلى ذلك) استخدام ملفات بيان تطبيقات الويب حاليًا، ويطوّر Firefox هذه الميزة بشكل نشط، بينما يصنّفها Edge على أنّها قيد المراجعة. لم ينشر WebKit/Safari بعد إشارات عامة حول نية تنفيذ هذه الميزة.
لمزيد من التفاصيل، يُرجى الاطّلاع على مقالة تطبيقات الويب القابلة للتثبيت باستخدام بيان تطبيق الويب في Chrome لأجهزة Android على Web Fundamentals.
بانر "الإضافة إلى الشاشة الرئيسية"
أصبح متصفّح Chrome على نظام التشغيل Android متاحًا منذ فترة لإضافة موقعك الإلكتروني إلى الشاشة الرئيسية، إلا أنّ الإصدارات الحديثة تتيح أيضًا اقتراح المواقع الإلكترونية بشكل استباقي باستخدام إعلانات بانر لتثبيت تطبيقات الويب الأصلية.
لكي تظهر طلبات تثبيت التطبيق، يجب أن يستوفي تطبيقك الشروط التالية:
- أن يكون لديك بيان تطبيق ويب صالح
- أن يتم عرضها عبر بروتوكول HTTPS (اطّلِع على letsencrypt للحصول على شهادة مجانية)
- أن يكون لديك مشغّل خدمات صالح مسجَّل
- أن تتم زيارته مرتين، مع تخصيص 5 دقائق على الأقل بين الزيارات
يتوفّر عدد من نماذج إعلانات البانر لتثبيت التطبيقات، والتي تغطي إعلانات البانر الأساسية وحالات الاستخدام الأكثر تعقيدًا، مثل عرض التطبيقات ذات الصلة.
مشغّل الخدمات للتخزين المؤقت بلا إنترنت
مشغّل الخدمات هو نص برمجي يتم تشغيله في الخلفية، وهو منفصل عن صفحة الويب. وهو يستجيب للأحداث، بما في ذلك طلبات الشبكة التي يتم إجراؤها من الصفحات التي يعرضها. يكون لمشغّل الخدمات عمر قصير عن قصد.
ويتم تفعيله عند تلقّي حدث ولا يتم تشغيله إلا لمدة معالجته. يتيح لك مشغّل الخدمات استخدام Cache API لتخزين الموارد مؤقتًا ويمكن استخدامه لتوفير تجربة بلا إنترنت للمستخدمين.
يتميّز مشغّلو الخدمات بفعّالية في التخزين المؤقت بلا إنترنت، ولكنّهم يقدّمون أيضًا مكاسب كبيرة في الأداء من خلال التحميل الفوري للزيارات المتكرّرة إلى موقعك الإلكتروني أو تطبيق الويب. ويمكنك تخزين هيكل التطبيق في ذاكرة التخزين المؤقت كي يعمل بلا اتصال بالإنترنت وتعبئة محتواه باستخدام JavaScript.
تتوفّر مجموعة شاملة من عيّنات مهام الخدمة في عيّنات Google Chrome. ننصحك بقراءة كتاب الطبخ بلا إنترنت الذي نشره "جيك أرشيبالد"، لذا أنصحك بشدة بالاطّلاع على الإرشادات التفصيلية التي يقدّمها "بول كينلان" حول أول تطبيق ويب بلا إنترنت من إعداد "بول كينلان" إذا كنت جديدًا في مجال الخدمات.
يحافظ فريقنا أيضًا على عدد من الأدوات المساعِدة لعمال الخدمة وأدوات الإنشاء التي نرى أنّها مفيدة لتقليل الوقت الذي تستغرِقه عملية إعداد عمال الخدمة. وهي مُدرَجة في مكتبات مشغّلات الخدمات. وهما:
- sw-precache: أداة وقت الإنشاء التي تُنشئ نصًا برمجيًا لمشغّل الخدمة مفيدًا لتخزين ملف شلّ تطبيق الويب مسبقًا
- sw-toolbox: مكتبة توفّر ميزة التخزين المؤقت أثناء التشغيل للموارد التي لا يتم استخدامها بشكل متكرّر
كتب "جيف بوسنيك" دليلاً توجيهيًا سريعًا حول sw-precache بعنوان التحميل بلا إنترنت أولاً، بسرعة، باستخدام وحدة sw-precache ودورة تدريبية حول رموز برمجية حول الأداة نفسها قد تكون مفيدة لك.
وفّرت متصفّحات Chrome وOpera وFirefox وظائف خدمة عامل الخدمة، بينما أظهرت متصفّحة Edge إشارات إيجابية للجمهور بشأن الاهتمام بهذه الميزة. أشار Safari بشكل مختصر إلى الاهتمام بهذه الميزة من خلال خطة خمس سنوات اقترحها أحد المهندسين.
الإشعارات الفورية لإعادة التفاعل
يمكنك بشكل فعّال إنشاء تطبيقات ويب يمكن للمستخدمين التفاعل معها خارج علامة التبويب. ويمكن إغلاق المتصفّح ولا يحتاج المستخدمون حتى إلى استخدام تطبيق الويب بنشاط للتفاعل مع تجربتك. تتطلّب هذه الميزة كلاً من مشغّل الخدمات وبيانًا لتطبيق الويب، وتعتمدان على بعض الميزات التي تم تلخيصها في وقت سابق.
تم تنفيذ واجهة برمجة التطبيقات Push API في Chrome، وهي قيد التطوير في Firefox وقيد المراجعة في Edge. ما من إشارات علنية من Safari عن نيّة استخدامها في استخدام هذه الميزة حتى الآن.
مقالة Push notifications on the Open Web (الإشعارات الفورية) على الويب المفتوح هي مقدّمة شاملة حول طريقة إعداد "الدفع بدون تلامس الأجهزة" من "مات غاونت"، وتتوفّر أيضًا درس تطبيقي حول ترميز "الإشعارات الفورية" في "أساسيات الويب".
يقدّم "مايكل فان أووركيرك" من فريق Chrome أيضًا مقدمة مدتها 6 دقائق حول ميزة Push إذا كنت تفضّل الفيديوهات.
دمج الميزات المتقدّمة
تذكَّر أنّ تجربة المستخدم يمكن أن تكون بمستويات مختلفة من الحلاقة بناءً على المتصفح المُستخدَم لعرض تطبيق الويب، حيث يمكنك التحكّم في واجهة أوامر التطبيق.
يمكن أيضًا دمج ميزات إضافية في منصّة الويب، مثل المزامنة في الخلفية (لمزامنة البيانات مع خادم حتى عندما يكون تطبيق الويب مغلقًا) وWeb Bluetooth (للتواصل مع أجهزة Bluetooth من تطبيق الويب) في تطبيق الويب التقدّمي بهذه الطريقة.
تم تفعيل ميزة "المزامنة لمرة واحدة في الخلفية" في Chrome، وقد نشر "جاك أرشيبالد" فيديو يعرض تطبيقه Wikipedia بلا إنترنت ومقالة توضّح كيفية استخدامه. يقدّم "فرانسوا بافورت" أيضًا عددًا من عيّنات Web Bluetooth المتاحة إذا كنت مهتمًا بتجربة واجهة برمجة التطبيقات هذه.
متوافقة مع إطار العمل
لا يوجد ما يمنعك من تطبيق أيّ من المبادئ أعلاه على تطبيق أو إطار عمل حالي تستخدمه. تشمل بعض المبادئ الأخرى التي يجب وضعها في الاعتبار أثناء إنشاء تطبيق الويب التقدّمي نموذج الأداء المرتكز على المستخدم في برنامج RAIL والصور المتحركة المستندة إلى FLIP.
نأمل أن نرى خلال عام 2016 زيادة في عدد النماذج الأساسية والمشاريع النموذجية التي تتضمّن بشكلٍ تلقائي ميزات تطبيقات الويب المتقدّمة كميزة أساسية. وحتى ذلك الحين، ليست هناك عقبات كبيرة في إضافة هذه الميزات إلى تطبيقاتك، وهي تستحقّ الجهد المبذول في رأيي.
البنية
هناك مستويات مختلفة من مدى "الاستفادة الكاملة" من نموذج تطبيقات الويب التقدّمية، ولكن من بين الأساليب الشائعة المتّبعة هي تصميمها حول بنية التطبيق. وهذا ليس مطلبًا صعبًا، ولكنه له العديد من المزايا.
تشجّع بنية Application Shell على تخزين ذاكرة التخزين المؤقت لصدفة التطبيق (واجهة المستخدم) حتى تعمل بلا إنترنت وتعبئ محتواها باستخدام JavaScript. في الزيارات المتكررة، يسمح لك ذلك بالحصول على وحدات بكسل مفيدة على الشاشة بسرعة كبيرة بدون الاتصال بالشبكة، حتى إذا صدر المحتوى منها في النهاية. ويؤدي ذلك إلى تحسينات كبيرة في الأداء.
علّق جيريمي كيت مؤخرًا على أنّه في هذا النوع من النماذج، ربما لا يجب النظر إلى العرض من جهة الخادم على أنّه بديل، بل يجب النظر إلى العرض من جهة العميل على أنّه ميزة محسّنة. هذه ملاحظات عادلة.
في نموذج Application Shell، يجب استخدام العرض من جهة الخادم قدر الإمكان، ويجب استخدام العرض التدريجي من جهة العميل كتحسين بالطريقة نفسها التي "نحسّن" بها التجربة عند توفّر Service Worker. هناك العديد من الطرق التي يمكن اتّباعها في النهاية.
نصيحتي لك هي قراءة مقالتنا الكاتبة عن البنية وتقييم أفضل طريقة لتطبيق المبادئ المماثلة على التطبيق والحزمة.
النماذج الجاهزة لبدء الاستخدام
هيكل التطبيق
يحتوي مستودع app-shell على تنفيذ شبه مكتمل لبنية Application Shell. يحتوي على واجهة خلفية مكتوبة بلغة Express.js وواجهة أمامية مكتوبة بلغة ES2015.
بما أنّ ذلك يشمل أجزاءً من النموذج من جانب العميل والخادم، وأن هناك الكثير من الأمور التي تحدث، سيستغرق الأمر بعض الوقت للتعرف على قاعدة الرموز. وهي حاليًا نقطة البدء الأكثر شمولاً لتطبيقات الويب التقدّمية. سنركّز بعد ذلك على "مستندات Google" في هذا المشروع.
مجموعة المبتدئين في مجال البوليمر
تتيح نقطة البداية الرسمية لتطبيقات الويب Polymer ميزات تطبيقات الويب التقدّمية التالية:
- بيان تطبيق الويب
- شاشة البداية الخاصة بمتصفِّح Chrome لأجهزة Android
- التخزين المؤقت لعامل الخدمة بلا اتصال بالإنترنت باستخدام عناصر Platinum SW
- الإشعارات الفورية (يلزم الإعداد اليدوي) باستخدام عناصر Platinum Push
لا يتيح الإصدار الحالي من PSK بعض أنماط الأداء الأكثر تقدمًا (مثل نموذج Application Shell، والتحميل غير المتزامن) التي تجدها في بعض تطبيقات الويب التقدّمية المستندة إلى Polymer.
نهدف إلى محاولة دمج هذه الأنماط في PSK في عام 2016، ولكن يمكن العثور على التجارب المبكرة حول هذا الموضوع في تطبيق Zuperkulblog من إنشاء "روب دوسن" وحديث Polymer Perf Patterns الرائع من إنشاء "إريك بيدلمان".
Web Starter Kit
تشمل نقطة البداية التي ننصحك بها لمشاريع Vanilla الجديدة ميزات تطبيقات الويب التقدّمية التالية:
- بيان تطبيق الويب
- شاشة البداية الخاصة بمتصفِّح Chrome لأجهزة Android
- التخزين المؤقت المُسبَق لمشغّل الخدمة بفضل sw-precache
إذا كنت تفضّل العمل باستخدام JavaScript/ES2015 العادية وتعذّر عليك استخدام Polymer، قد تكون Web Starter Kit مفيدة كنقطة مرجعية يمكنك إعادة استخدام مقتطفات الرموز البرمجية منها أو سرقتها.
تطبيقات الويب التقدّمية مع إطارات العمل وبدونها
لقد أنشأ أعضاء في المنتدى عددًا من تطبيقات الويب المتقدّمة المفتوح المصدر باستخدام مكتبات JS وأطر عمل JS أو بدونها. إذا كنت تبحث عن الإلهام، فقد تكون المستودعات أدناه مفيدة كمرجع. وهي أيضًا تطبيقات رائعة.
Vanilla JavaScript
- تم إنشاء تطبيق Voice Memos من قِبل "بول لويس" باستخدام بنية مشابهة لبنية
app-shell(write-up) - Offline Wikipedia من تأليف "جاك أرشيبالد" (فيديو)
- Air Horner لبول كينلان
- Guitar Tuner من تأليف Paul Lewis (المراجعة)
Polymer
- Zuperkulblog من إعداد روب دودسون (شرائح)
React
- iFixit من تأليف "جيف بوسنيك": يستخدم
sw-precacheلتخزين ذاكرة التخزين المؤقت لصدفة التطبيق (العروض التقديمية)
نموذج العناصر الافتراضية
- Pokedex من إنشاء "نولان لوسون": تطبيق ويب تقدّمي ممتاز يطبّق أسلوب "إنجاز جميع المهام في عامل على الويب" للمساعدة في العرض التدريجي. (الملخّص)
Angular.js
- Timey.in من تأليف "كينيث أوشينبيرغ": يستخدم أيضًا
sw-precacheلتخزين الموارد مؤقتًا مسبقًا
ملاحظات ختامية
كما ذكرنا، لا تزال تطبيقات الويب التقدّمية في مراحلها الأولى، ولكنّ هذا هو الوقت المناسب للاطّلاع على المنهجيات التي تستند إليها ومعرفة مدى ملاءمتها لتطبيقات الويب الخاصة بك.
يعمل "بول كينلان" حاليًا على التخطيط لإرشادات Web Fundamentals حول التطبيقات التقدّمية على الويب. إذا كانت لديك ملاحظات حول الجوانب التي تريد أن يتم تناولها، يُرجى عدم التردد في التعليق على هذه السلسلة من الرسائل.
مراجع إضافية
- تطبيقات الويب التقدّمية: الابتعاد عن علامات التبويب بدون فقدان روحنا
- لماذا تطبيقات الويب التقدّمية هي مستقبل تطوير الويب
- تطبيقات الويب التقدّمية: جاهزة للعرض
- إنشاء تطبيق تقدّمي باستخدام ServiceWorker
- تطبيقات الويب التقدّمية هي المستقبل
- تطبيقات الويب التقدّمية: طريقة جديدة للاستفادة من الأجهزة الجوّالة
- نقدّم لك Pokedex.org: تطبيق ويب تقدّمي لعشاق ألعاب Pokémon
- ملخّص عن مؤتمر Chrome Developer Summit: تطبيقات الويب التقدّمية