اجعل تطبيق الويب التقدّمي لديك ليس كأنه موقع إلكتروني، بل كتطبيق "حقيقي"
عند تشغيل لعبة "البنغو" الطنانة في تطبيق الويب التقدّمي، يمكنك اختيار "تطبيقات الويب التقدّمية (PWA)" كمواقع إلكترونية فقط. توافق مستندات PWA من Microsoft، نقول على هذا الموقع الإلكتروني تحديدًا، وحتى مرشّحي PWA، "فرانسيس بيريمان" و"أليكس راسل"، اكتبا ذلك أيضًا. نعم، تطبيقات الويب التقدّمية (PWA) هي مجرد مواقع إلكترونية، ولكنها أيضًا أكثر من ذلك بكثير. إذا تم إجراء ذلك بشكل صحيح، لن يبدو تطبيق الويب التقدّمي (PWA) كموقع إلكتروني، بل كتطبيق "حقيقي". ماذا يعني الآن أن تشعر وكأنّه تطبيق حقيقي؟
للإجابة عن هذا السؤال، يجب السماح لي باستخدام تطبيق بودكاست من Apple كمثال. وتتوفّر هذه الميزة على أجهزة الكمبيوتر المكتبي وأجهزة iOS (وiPadOS على التوالي) على الأجهزة الجوّالة. البودكاست هو تطبيق وسائط، لكنّ الأفكار الأساسية التي أوضّحها بمساعدته تنطبق أيضًا على فئات تطبيقات أخرى.
إمكانية التشغيل بلا إنترنت
إذا رجعت خطوة إلى الوراء وفكرت في التطبيقات الخاصة بنظام التشغيل التي لديك على هاتفك المحمول أو كمبيوتر سطح المكتب، يبرز شيء واحد بوضوح وهو: لن تحصل أبدًا على أي شيء. هناك دائمًا شيء ما في تطبيق "Google بودكاست"، حتى عندما لا تكون متصلاً بالإنترنت. في حال عدم توفّر اتصال بالشبكة، يستمر فتح التطبيق بشكل طبيعي. لا يعرض قسم أهم المخططات أي محتوى، ولكنه يعود إلى رسالة يتعذّر الاتصال الآن مقترنة بالزر إعادة المحاولة. قد لا تكون هذه تجربة ترحيبية، ولكني أحصل على شيء ما.
يتبع تطبيق "Google بودكاست" نموذج هيكل التطبيق المسمى. يتم تخزين كل المحتوى الثابت اللازم لعرض التطبيق الأساسي محليًا، بما في ذلك الصور المزخرفة مثل رموز القائمة اليمنى ورموز واجهة مستخدم المشغّل الأساسية. يتم تحميل المحتوى الديناميكي، مثل بيانات أهم المخططات، عند الطلب فقط، ويكون المحتوى الاحتياطي المُخزَّن مؤقتًا محليًا في حال تعذّر التحميل. اقرأ المقالة نموذج App Shell للتعرّف على كيفية تطبيق هذا النموذج المعماري على تطبيق الويب.
يتوفّر محتوى بلا إنترنت ووسائط يمكن تشغيلها
أثناء عدم الاتصال بالإنترنت، ومن خلال الدرج الأيمن، يمكنني الانتقال إلى القسم تم تنزيله والاستمتاع بحلقات البودكاست التي تم تنزيلها والجاهزة للتشغيل، ويتم عرضها مع كل البيانات الوصفية، مثل الأعمال الفنية والأوصاف.
ويمكن عرض محتوى الوسائط الذي تم تنزيله سابقًا من ذاكرة التخزين المؤقت، على سبيل المثال، باستخدام وصفة عرض الصوت والفيديو المخزَّنة مؤقتًا من مكتبة Workbox. ويمكن دائمًا تخزين المحتوى الآخر في ذاكرة التخزين المؤقت أو في IndexedDB. يمكنك الاطّلاع على مقالة مساحة التخزين على الويب للتعرّف على جميع التفاصيل ومعرفة الوقت المناسب لاستخدام تقنية التخزين. إذا كانت لديك بيانات يجب تخزينها باستمرار بدون المخاطرة بحذفها نهائيًا عند انخفاض مساحة الذاكرة المتاحة، يمكنك استخدام واجهة برمجة تطبيقات التخزين الدائم.
التنزيل الاستباقي في الخلفية
عندما أعيد الاتصال بالإنترنت، يمكنني بالطبع البحث عن محتوى باستخدام طلب بحث مثل http 203، وعندما قرَّر الاشتراك في نتيجة البحث، بودكاست HTTP 203، حيث يتم تنزيل أحدث حلقة من السلسلة على الفور بدون طرح أي أسئلة.
من المحتمل أن تستغرق عملية تنزيل حلقة بودكاست وقتًا أطول. تتيح لك Background Fetch API تفويض التنزيلات إلى المتصفح، وتعتني بها في الخلفية. وعلى نظام التشغيل Android، يمكن للمتصفح بدوره تفويض عمليات التنزيل هذه على نظام التشغيل، بحيث لا يحتاج المتصفح إلى التشغيل بشكلٍ مستمر. بعد اكتمال التنزيل، يتم تنشيط مشغّل الخدمات في تطبيقك ويمكنك تحديد ما يجب فعله بالاستجابة.
المشاركة مع التطبيقات الأخرى والتفاعل معها
يتكامل تطبيق "Google بودكاست" بشكل طبيعي مع تطبيقات أخرى. على سبيل المثال، عندما أنقر بزر الماوس الأيمن على حلقة أعجبتني، يمكنني مشاركتها مع تطبيقات أخرى على جهازي، مثل تطبيق "الرسائل". وتتكامل هذه الحلقة بشكل طبيعي مع حافظة النظام. يمكنني النقر بزر الماوس الأيمن على أي حلقة ونسخ رابط إليها.
تتيح واجهة برمجة التطبيقات Web Share API وWeb Share API لتطبيقك مشاركة النصوص والملفات والروابط وتلقّيها من التطبيقات الأخرى على الجهاز. بالرغم من أنه ليس من الممكن لتطبيق الويب بعد إضافة عناصر قائمة إلى قائمة النقر بزر الماوس الأيمن المضمّنة في نظام التشغيل، إلا أن هناك العديد من الطرق الأخرى للربط بتطبيقات أخرى ومنها على الجهاز. باستخدام Async Clipboard API، يمكنك قراءة بيانات النصوص والصور (صور PNG) وكتابتها آليًا في حافظة النظام. على جهاز Android، يمكنك استخدام واجهة برمجة تطبيقات Contact Picker لتحديد الإدخالات من مدير جهات الاتصال على الجهاز. إذا كنت توفّر تطبيقًا خاصًا بالنظام الأساسي وتطبيقًا تقدّميًا (PWA)، يمكنك استخدام واجهة برمجة التطبيقات الخاصة بالتطبيقات ذات الصلة للتثبيت للتحقّق مما إذا كان التطبيق الخاص بالنظام الأساسي مثبّتًا. وفي هذه الحالة، لن تحتاج إلى تشجيع المستخدم على تثبيت تطبيق الويب التقدّمي (PWA) أو قبول الإشعارات الفورية على الويب.
جارٍ تحديث التطبيقات في الخلفية
في إعدادات تطبيق "Google بودكاست"، يمكنني ضبط إعدادات التطبيق لتنزيل الحلقات الجديدة تلقائيًا. بهذه الطريقة، لست مضطرًا إلى التفكير في ذلك، فالمحتوى الجديد سيبقى متوفّرًا دائمًا. سحر.
إنّ واجهة برمجة التطبيقات التي تستخدم ميزة "مزامنة الخلفية الدورية" تسمح لتطبيقك بتحديث المحتوى الخاص به بانتظام في الخلفية بدون الحاجة إلى تشغيله. وهذا يعني أنّه يمكن توفير محتوى جديد بشكل استباقي كي يتمكّن المستخدمون من الاطّلاع عليه على الفور متى قرّروا ذلك.
حالة متزامنة عبر السحابة
في الوقت نفسه، تتم مزامنة اشتراكاتي على جميع الأجهزة التي أملكها. في عالم سلس، لا داعي للقلق بشأن مزامنة اشتراكات البودكاست يدويًا. وبالمثل، لا أخشى أن تتم مشاهدة الحلقات التي استمعتُ إليها على الكمبيوتر المكتبي إلى ذاكرة الجهاز الجوّال. وتتم مزامنة حالة التشغيل باستمرار، ويتم تلقائيًا حذف الحلقات التي يتم الاستماع إليها.
مزامنة بيانات حالة التطبيق هي مهمة يمكنك تفويضها إلى Background Sync API. لا يجب أن تحدث عملية المزامنة نفسها على الفور، بل فقط في النهاية، وربما حتى عند إغلاق المستخدم للتطبيق مرة أخرى.
عناصر التحكّم في مفتاح وسائط الجهاز
عندما أكون مشغولاً بتطبيق آخر، مثلاً قراءة صفحة أخبار في متصفّح Chrome، سيظل بإمكاني التحكّم في تطبيق "Google بودكاست" باستخدام مفاتيح الوسائط على الكمبيوتر المحمول. وليست هناك حاجة للتبديل إلى التطبيق لمجرد الانتقال للأمام أو للخلف.
تتوافق مفاتيح الوسائط مع واجهة برمجة التطبيقات لجلسات الوسائط. وبهذه الطريقة، يمكن للمستخدمين الاستفادة من مفاتيح الوسائط على لوحات المفاتيح الخارجية أو سماعات الرأس أو حتى التحكّم في تطبيق الويب من خلال مفاتيح وسائط البرامج على ساعاتهم الذكية. هناك فكرة إضافية لتسهيل عمليات التقديم أو الترجيع وهي إرسال نمط اهتزاز عندما يتنقّل المستخدم في جزء كبير من المحتوى، على سبيل المثال، تمرير الأرصدة الافتتاحية أو حدود الفصل.
تعدد المهام واختصار التطبيقات
بالطبع، يمكنني دائمًا إعادة مهام متعددة إلى تطبيق "Google بودكاست" من أي مكان. يتضمّن التطبيق رمزًا مميّزًا يمكنني أيضًا وضعه على جهاز الكمبيوتر المكتبي أو قاعدة إرساء التطبيقات كي تتمكّن من تشغيل "Google بودكاست" على الفور عندما أشعر بذلك.
يمكن تثبيت تطبيقات الويب التقدّمية على كلّ من أجهزة الكمبيوتر المكتبي والأجهزة الجوّالة على الشاشة الرئيسية أو قائمة "ابدأ" أو قاعدة الإرساء للتطبيقات. يمكن أن يتم التثبيت بناءً على طلب استباقي أو يمكن أن يتحكّم فيه مطوِّر التطبيق بالكامل. تتناول المقالة ما هي المتطلبات اللازمة للتثبيت؟ تتضمّن كل ما تحتاج إلى معرفته. عند تنفيذ مهام متعددة، تظهر تطبيقات الويب التقدّمية (PWA) بشكل مستقل عن المتصفّح.
الإجراءات السريعة في قائمة السياق
تتوفر إجراءات التطبيق الأكثر شيوعًا، وهي البحث عن محتوى جديد والبحث عن حلقات جديدة، مباشرةً من قائمة السياق للتطبيق في Dock. من خلال قائمة الخيارات، يمكنني أيضًا اختيار فتح التطبيق عند تسجيل الدخول.
من خلال تحديد اختصارات رموز التطبيق في بيان تطبيق الويب التقدّمي PWA، يمكنك تسجيل مسارات سريعة للمهام الشائعة التي يمكن للمستخدمين الوصول إليها مباشرةً من رمز التطبيق. على أنظمة التشغيل مثل macOS، يمكن للمستخدمين أيضًا النقر بزر الماوس الأيمن على رمز التطبيق وضبط التطبيق لتشغيله في وقت تسجيل الدخول. يتم العمل حاليًا على اقتراح التشغيل عند تسجيل الدخول.
العمل كتطبيق تلقائي
يمكن دمج تطبيقات iOS الأخرى وكذلك المواقع الإلكترونية أو الرسائل الإلكترونية مع تطبيق "Google بودكاست" من خلال الاستفادة من مخطط عنوان URL الخاص بـ podcasts://. عند النقر على رابط مثل podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903 في المتصفّح، يتم توجيهي مباشرةً إلى تطبيق "Google بودكاست" ويمكنني الاشتراك في البودكاست أو الاستماع إليه.
لا تتوفّر إلى الآن معالجة مخططات عناوين URL المخصّصة بالكامل، ولكن لا يزال هناك عمل قيد التنفيذ بشأن اقتراح التعامل مع بروتوكول عناوين URL لتطبيقات الويب التقدّمية (PWA). في الوقت الحالي، تُعد registerProtocolHandler() التي تبدأ ببادئة web+ هي أفضل بديل.
دمج نظام الملفات المحلي
قد لا تفكر في ذلك على الفور، لكن تطبيق "Google بودكاست" يندمج بشكل طبيعي مع نظام الملفات المحلي. عندما أنزّل حلقة بودكاست، يتم تخزينها في "~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache" على الكمبيوتر المحمول. وعلى عكس ~/Documents، فإن هذا الدليل ليس الغرض منه الوصول إليه مباشرةً من قِبل المستخدمين العاديين، ولكنه متاح.
تتم الإشارة إلى آليات التخزين الأخرى غير الملفات في قسم المحتوى المتوفر بلا إنترنت.
تتيح واجهة برمجة التطبيقات File System Access API للمطوّرين إمكانية الوصول إلى نظام الملفات المحلي على الجهاز. يمكنك استخدام هذا الرابط مباشرةً أو من خلال مكتبة الدعم browser-fs-access التي توفّر بشكل شفاف عنصرًا احتياطيًا للمتصفّحات التي لا تتوافق مع واجهة برمجة التطبيقات. لأسباب تتعلق بالأمان، لا يمكن الوصول إلى أدلة النظام من خلال الإنترنت.
شكل ومضمون المنصة
في ما يخص تطبيقات iOS مثل "ملفات البودكاست"، تظهر تفاصيل أكثر دقة: لا يمكن اختيار أي من تصنيفات النصوص، كما يتم مزج النص بأكمله مع خط النظام في الجهاز. إضافةً إلى ذلك، يتم احترام اختياري لمظهر لون النظام (الوضع الداكن).
من خلال الاستفادة من سمة user-select في CSS مع القيمة none، يمكنك حماية عناصر واجهة المستخدم من أن يتم اختيارها عن طريق الخطأ.
ومع ذلك، يُرجى الحرص على عدم إساءة استخدام هذه السمة لعدم إمكانية اختيار محتوى التطبيق.
يجب استخدامها فقط لعناصر واجهة المستخدم مثل نصوص الأزرار وما إلى ذلك.
تسمح لك قيمة system-ui
لسمة CSS font-family بتحديد الخط التلقائي لواجهة المستخدم الخاصة بالنظام والمستخدَم لتطبيقك.
أخيرًا، يمكن أن يلتزم تطبيقك بخيار الألوان المفضّل لدى المستخدم من خلال احترام اختيار prefers-color-scheme، مع إيقاف اختياري للوضع الداكن لإلغاء هذا الخط.
هناك شيء آخر يجب اتّخاذه، وهو ما يجب أن يفعله المتصفّح عند الوصول إلى حدود منطقة التمرير، على سبيل المثال، لتنفيذ سحب مخصّصة لإعادة التحميل.
ويمكنك إجراء ذلك باستخدام سمة CSS overscroll-behavior.
شريط العناوين المخصص
عندما تنظر إلى نافذة تطبيق "Google بودكاست"، تلاحظ أنّ التطبيق لا يحتوي على شريط عناوين وشريط أدوات كلاسيكيَين مدمجَين، مثل نافذة متصفّح Safari، ولكنّهما تجربة مخصّصة تشبه شريطًا جانبيًا تم إرساؤه في نافذة المشغّل الرئيسي.
إنّ تخصيص شريط العناوين لا يزال غير ممكن في الوقت الحالي.
يمكنك (وينبغي) تحديد السمتَين display وtheme-color لبيان تطبيق الويب، وذلك لتحديد شكل ومظهر نافذة التطبيق ولتحديد عناصر التحكّم التلقائية في المتصفّح التي يُحتمَل ألا يتم عرض أي منها.
صور متحركة سريعة
تظهر الصور المتحركة داخل التطبيق بسرعة وسلاسة في "Google بودكاست". على سبيل المثال، عندما أفتح درج ملاحظات الحلقة على يسار الصفحة، ينزلق بسلاسة. عندما أُزيل حلقة واحدة من قائمة الحلقات التي تم تنزيلها، تطفو الحلقات المتبقية وتستهلك مساحة الشاشة التي تم إخلاء جزء منها من خلال الحلقة المحذوفة.
يمكنك بالتأكيد تنفيذ الصور المتحركة على الويب إذا ما أخذت في الاعتبار عددًا من أفضل الممارسات الموضّحة في مقالة الصور المتحركة والأداء. يمكن تحسين حركات التمرير كما هو شائع في المحتوى المقسّم على صفحات أو لوحات عرض دوّارة للوسائط إلى حد كبير، وذلك باستخدام ميزة محاذاة التمرير في CSS. للتحكّم بشكل كامل، يمكنك استخدام Web Animations API.
المحتوى المعروض خارج التطبيق
يمكن لتطبيق "Google بودكاست" على نظام التشغيل iOS عرض المحتوى في مواقع أخرى غير التطبيق الفعلي، على سبيل المثال، في عرض "التطبيقات المصغّرة" للنظام، أو في شكل اقتراحات Siri. يمكن أن يؤدي استخدام عبارات استباقية مستندة إلى الاستخدام تحث المستخدم على اتخاذ إجراء ولا يتطلب سوى النقر للتفاعل معها إلى زيادة كبيرة في نسبة إعادة جذب مستخدمي تطبيق مثل "Google بودكاست".
تتيح Content Index API لتطبيقك إمكانية تحديد محتوى تطبيق الويب التقدّمي (PWA) المتاح بلا إنترنت. ويسمح هذا للمتصفح بعرض هذا المحتوى خارج التطبيق الرئيسي. من خلال ترميز المحتوى المثير للاهتمام في تطبيقك بأنه مناسب لتشغيل الصوت speakable وباستخدام الترميز المنظَّم بشكل عام، يمكنك مساعدة محركات البحث والمساعدات الافتراضية مثل "مساعد Google" في تقديم عروضك في صورة مثالية.
تطبيق مصغّر للتحكّم في الوسائط على شاشة القفل
أثناء تشغيل حلقة بودكاست، يعرض تطبيق "Google بودكاست" أداة تحكُّم رائعة على شاشة القفل تعرض بيانات وصفية، مثل العمل الفني للحلقة وعنوانها واسم البودكاست.
تتيح لك Media Session API تحديد بيانات وصفية، مثل الأعمال الفنية وعناوين المقاطع الصوتية وما إلى ذلك، ويتم عرضها بعد ذلك على شاشة القفل أو الساعات الذكية أو أدوات الوسائط الأخرى في المتصفح.
الإشعارات الفورية
أصبحت الإشعارات الفورية مصدر إزعاج على الويب (على الرغم من أنّ الإشعارات الفورية أصبحت أكثر هدوءًا الآن). ولكن إذا تم استخدامها بشكل صحيح، يمكنها أن تضيف الكثير من القيمة. على سبيل المثال، يمكن لتطبيق "Google بودكاست" على iOS إرسال إشعار إليّ بشأن الحلقات الجديدة من ملفات البودكاست التي اشتركت فيها أو اقتراح حلقات جديدة، بالإضافة إلى تنبيهي بالميزات الجديدة في التطبيق.
تسمح واجهة برمجة التطبيقات Push API لتطبيقك بتلقّي إشعارات فورية، ما يتيح لك إشعار المستخدمين بالأحداث المهمة حول تطبيق الويب التقدّمي (PWA). بالنسبة إلى الإشعارات التي يجب تنشيطها في وقت معروف في المستقبل والتي لا تتطلّب الاتصال بالشبكة، يمكنك استخدام واجهة برمجة التطبيقات لمشغِّلات الإشعارات.
وضع شارات لرمز التطبيق
عند توفُّر حلقات جديدة لأحد ملفات البودكاست التي اشتركتُ فيها، تظهر شارة رمز التطبيق على شاشة "Google بودكاست" الرئيسية، وهي تشجّعني مرة أخرى على إعادة التفاعل مع التطبيق بطريقة ليست متداخلة.
يمكنك ضبط شارات رموز التطبيق باستخدام Badging API. ويُعدّ هذا الإجراء مفيدًا بشكل خاص عندما يتضمّن تطبيق الويب التقدّمي PWA فكرة عن العناصر "غير المقروءة" أو عندما تحتاج إلى وسيلة لجذب انتباه المستخدم إلى التطبيق بشكل غير مزعج.
لتشغيل الوسائط تحظى بالأولوية على إعدادات توفير الطاقة.
أثناء تشغيل وسائط بودكاست، قد يتم إطفاء الشاشة، ولكن لن يدخل النظام في وضع الاستعداد. وبإمكان التطبيقات إبقاء الشاشة نشطة أيضًا، مثل عرض كلمات الأغاني أو الشرح.
تسمح لك واجهة برمجة تطبيقات قفل الشاشة وقفلها بمنع إطفاء الشاشة، علمًا بأنّ تشغيل الوسائط على الويب يؤدي تلقائيًا إلى منع النظام من الدخول إلى وضع الاستعداد.
اكتشاف التطبيقات من خلال متجر التطبيقات
على الرغم من أنّ تطبيق "Google بودكاست" هو جزء من تجربة الاستخدام المخصّصة لأجهزة الكمبيوتر التي تعمل بنظام التشغيل macOS، يجب تثبيته من App Store على أجهزة iOS.
يؤدي البحث السريع عن podcast أو podcasts أو apple podcasts إلى عرض التطبيق فورًا في App Store.
على الرغم من أنّ Apple لا تسمح بتطبيقات الويب التقدّمية (PWA) على App Store، على أجهزة Android، يمكنك إرسال تطبيق الويب التقدّمي (PWA)
بتنسيق نشاط موثوق به على الويب.
يجعل النص البرمجي bubblewrap هذه عملية غير صعبة.
ويفعِّل هذا النص البرمجي أيضًا ميزة تصدير تطبيقات Android في PWABuilder داخليًا،
والتي يمكنك استخدامها بدون لمس سطر الأوامر.
ملخص الميزة
يوضح الجدول التالي نظرة عامة مكثفة على جميع الميزات، ويوفر قائمة بالموارد المفيدة لتحقيقها على الويب.
الخلاصة
قطعت تطبيقات الويب التقدّمية (PWA) شوطًا طويلاً منذ إطلاقها في عام 2015. في سياق مشروع Project Fugu 🐡، يعمل فريق Chromium على مستوى الشركات على سد الثغرات المتبقية. باتباع بعض النصائح الواردة في هذه المقالة فقط، يمكنك الاقتراب من هذا الشعور الشبيه بالتطبيق، وجعل المستخدمين ينسون أنهم يتعاملون مع "موقع ويب فقط"، لأن معظمهم لا يهتم بكيفية إنشاء تطبيقك (ولماذا ينبغي عليهم ذلك؟)، طالما أنه يبدو وكأنه تطبيق حقيقي.
شكر وتقدير
تمّت مراجعة هذه المقالة من قِبل كايس باسكيس وجو ميدلي وجوشوا بيل وديون ألمير وآيد أوشيني وبيت ليب وسام ثورودلي ورايلي جرانت آند فرانز.