الميزات الجديدة للويب على Android 2023

هناك العديد من الأسباب التي تدفع المطوِّرين إلى إتاحة الويب على Android: ربما يعيدون استخدام أداة ويب في تطبيق Android، أو يدمجون محتوى من الطرف الأول أو محتوى تابع لجهة خارجية، أو قد يدمجون تطبيق الويب بالكامل على النظام الأساسي. مهما كانت حالة الاستخدام، يوفّر Android العديد من الأدوات لإتاحة ذلك.

في ما يلي آخر التعديلات التي تم إجراؤها على هذه الأدوات. مثال:

  • تحسينات على الخصوصية وتوافق أفضل مع الشاشات الكبيرة، مثل إتاحة سحب الصور وإفلاتها في WebView
  • تتيح علامات التبويب المخصَّصة الآن استخدام علامات التبويب المخصَّصة الجزئية.
  • ميزات مدمجة في PWA، مثل واجهة مستخدم Richer Install وواجهة برمجة التطبيقات لخدمة "الفوترة في Play" في أنشطة الويب الموثوق بها

لنطّلِع على التفاصيل ونتعرّف على مزيد من المعلومات.

WebView

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

عنوان X-Request-With

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

ولكن ماذا لو كان تطبيقك يعتمد على عنوان X-required-With؟ والطريقة التي ننصح بها هي استخدام واجهة برمجة التطبيقات الجديدة للموافقة التي تمكّنك من إرسال عنوان الطلب إلى مصادر محدّدة بشكل انتقائي. وهذا يعني أنك ستحصل على أفضل ما في الميزتين: يمكنك الاستمرار في إتاحة الميزات الحالية التي تُضاف إلى هذا العنوان، مع الحرص على الحفاظ على خصوصية المستخدم في جميع الحالات الأخرى. وإذا أردت الحفاظ على السلوك الحالي، يمكنك أيضًا الاشتراك في مرحلة التجربة والتقييم X-required-With Deprecation.

WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
    demoWebview.getSettings(), Collections.singleton("https://example.com")
);

اختبار WebView

الموضوع التالي هو الاختبار. إذا كنت مطوّر برامج على الويب وتتلقّى مواقعك الإلكترونية عددًا كبيرًا من الزيارات من مكوّنات WebView، يتوفّر لك خبران:

  1. يتوافق WebView الآن مع مراحل التجربة والتقييم في Chrome. تتيح لك الفترات التجريبية الأصلية الوصول إلى ميزات جديدة أو تجريبية في Chrome. ويمكنك استخدامها لتجربة ميزة جديدة قبل توفُّرها للجميع. حتى الآن، تتوفّر مراحل التجربة والتقييم على متصفّح Chrome المتوافق مع أجهزة الكمبيوتر المكتبي والأجهزة الجوّالة فقط، ولكن بدءًا من Chrome M110، تعمل تجارب المصدر أيضًا في WebView.

  2. أصبح تثبيت WebView التجريبي أسهل بكثير. ننصحك بشدة باختبار موقعك الإلكتروني باستخدام قناة WebView التجريبية للتأكّد من أنّ موقعك الإلكتروني يعمل بشكل جيد في إصدارات WebView القادمة. لإجراء ذلك، يمكنك الانضمام إلى برنامج الاستخدام التجريبي لمكوّن WebView على "متجر Google Play"، وسيتم تسجيل جهازك تلقائيًا.

لقطة شاشة للموقع الإلكتروني للانضمام إلى برنامج WebView التجريبي.

توافق الأجهزة ذات الشاشات الكبيرة

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

من السهل جدًا إضافة السحب والإفلات إلى مكوّنات WebView: ما عليك سوى الإعلان عن DropDataProvider في ملف AndroidManifest.

<application...>
     ...
     <provider
         android:authorities="com.example.webviewdemo.DropDataProvider"
         android:name="androidx.webkit.DropDataContentProvider"
         android:exported="false"
         android:grantUriPermissions="true"/>
 </application>

عند الحديث عن الأجهزة ذات الشاشات الكبيرة، سيأتي Chrome وWebView على Android U مع دعم كامل للكتابة بخط اليد في حقول إدخال نص HTML، فضلاً عن إيماءات الإدخال لحذف النص أو إضافة مسافات. تتوفّر ميزة "الكتابة بخط اليد" حاليًا على جميع أجهزة Samsung التي تستخدم إصدار One UI 5.1، مثل S23 Ultra. بالنسبة إلى الأجهزة الأخرى التي تستخدم Android T، يمكنك تفعيل الكتابة بخط اليد في إدخالات HTML ضمن "خيارات المطوّرين".

محرّك JavaScript في Jetpack

قد تحتاج أحيانًا إلى تشغيل JavaScript في تطبيقك بدون الحاجة إلى عرض أي محتوى على الويب، على سبيل المثال، عند مشاركة منطق النشاط التجاري عبر الويب وتطبيقات الأجهزة الجوّالة. لتسهيل هذه العملية، أطلقنا العام الماضي إصدار ألفا من محرك JavaScript الجديد JetPack. تستخدم هذه المكتبة الإصدار 8، وهو محرّك JavaScript في Chrome، وتتيح للتطبيق تقييم رمز JavaScript أو WebAssembly بدون إنشاء مثيل WebView. الأمر الرائع في محرّك JavaScript الجديد هو أنّه ينفّذ JavaScript في عملية مختلفة، ما يجعله طريقة آمنة وثابتة لتشغيل JavaScript في تطبيقك. ويتطلب أيضًا موارد أقل من مثيل WebView.

ListenableFuture<JavaScriptSandbox> jsSandboxFuture =
JavaScriptSandbox.createConnectedInstanceAsync(JavaScriptEngineActivity.this);
JavaScriptIsolate jsIsolate = jsSandboxFuture.get().createIsolate();
final String code =
"function sum(a, b) { let r = a + b; return r.toString(); }; sum(3, 4)";
ListenableFuture<String> resultFuture = jsIsolate.evaluateJavaScriptAsync(code);
…

علامات التبويب المخصصة

علامة تبويب مخصّصة من Android تعرض التصميم التلقائي

تشكّل WebView طريقة رائعة لدمج واجهة مستخدم الويب في تطبيقك، ولكن ماذا عن السماح للمستخدمين بتصفُّح محتوى الويب في تطبيقك؟

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

وهذا يعني أيضًا أنه إذا كان المتصفح الافتراضي هو Chrome، فسيتم فتح علامة تبويب مخصصة في Chrome؛ وإذا كان متصفحك الافتراضي هو Firefox، فسيتم فتح علامة تبويب مخصّصة في Firefox. تتوافق معظم المتصفحات الرئيسية على Android مع "علامات التبويب المخصَّصة"، وإذا كان المتصفِّح التلقائي لا يتوافق مع "علامات التبويب المخصَّصة"، سيتم فتح تطبيق المتصفِّح بدلاً من ذلك.

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

علامة تبويب مخصّصة لنظام التشغيل Android مع مظاهر ألوان مخصّصة وأشرطة أدوات.

علامات تبويب مخصَّصة جزئيًا

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

ما عليك سوى الاتصال بخدمة CustomTabsBuilder وتمرير الجلسة إلى CustomTabsBuilder واستدعاء setActivityHeight.

CustomTabsSession customTabsSession;

// ...

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder(customTabsSession)
  .setInitialActivityHeightPx(500)
  .setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
  // ...
  .build();

customTabsIntent.launchUrl(context, Uri.parse(url))

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

تجربة إعلانات &quot;الاستجابة المباشرة على YouTube&quot; باستخدام علامات تبويب مخصّصة جزئية

ولكن ماذا عن الأجهزة اللوحية وغيرها من الأجهزة ذات الشاشات الكبيرة؟ يعمل فريق Chrome حاليًا على تصميم تجربة "علامات التبويب المخصصة" الجديدة جنبًا إلى جنب للاستخدام في الوضع الأفقي والأجهزة ذات الشاشات الكبيرة. ومن خلال تحديد حد أقصى لعرض علامة التبويب ونقطة فاصلة، ستنتقل تجربة "علامة تبويب مخصّصة" تلقائيًا بين طبقة الورقة السفلية وتجربة العرض جنبًا إلى جنب. وهذه الميزة متاحة حاليًا في إصدار Canary وسيتم إطلاقها في تموز (يوليو) 2003 تقريبًا. إذا كنت ترغب في تجربة الميزة، فتحقق من رمز المصدر لتطبيق مثال علامات التبويب المخصصة في Chromium.

علامة تبويب مخصَّصة تظهر جنبًا إلى جنب مع محتوى التطبيق الرئيسي

قياس إشارات التفاعل

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

أضاف فريق Chrome إذن الوصول إلى المقاييس الخاصة بالجلسات في "علامات التبويب المخصَّصة" في Chrome. بالإضافة إلى مدة بقاء المستخدم على الصفحة، يمكنك الآن أيضًا الاطّلاع على بيانات عن مسافة التنقّل واتجاه التمرير والتفاعل العام مع محتوى الويب.

تتوفّر إشارات التفاعل بدءًا من الإصدار 114 من Chrome وتتطلب مكتبة دعم androidx.browser:browser:1.6.0-alpha01 أو الإصدارات الأحدث. للمزيد من المعلومات، اطّلِع على دليل البدء الخاص بإشارات التفاعل.

PWA

هناك أيضًا تحديثات في تطبيق الويب التقدّمي (PWA)، وهو مجموعة من التكنولوجيات التي تتيح إنشاء تجارب شبيهة بالتطبيقات، تم إنشاؤها ونشرها على الويب.

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

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

لنتحقق من بعض الميزات التي تجعل تطبيق الويب القابل للتثبيت يبدو مريحًا في Android.

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

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

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

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

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

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

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

يمكنك الاطّلاع على محاضرة مؤتمر I/O بعنوان "الويب: منصتك للنمو" لمزيد من المعلومات حول كيفية استفادة الأنشطة التجارية من هذه التقنيات.

نشاط موثوق به على الويب

هناك طريقة أخرى لإتاحة الويب على Android وهي استخدام ميزة النشاط على الويب الموثوق به (TWA).

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

لاحظ أن TWA يبدو أنها مرتبطة ارتباطًا وثيقًا بتطبيق PWA، لكنها ليست كذلك. نعم، باستخدام تطبيق TWA، يمكنك نشر تطبيق الويب القابل للتثبيت على Google Play، ولكن يمكنك أيضًا إنشاء نشاط واحد على الويب وإدراجه في تطبيق Android.

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

في ما يلي بعض المزايا لإحاطة تطبيق الويب باستخدام TWA:

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

يمكنك الاطّلاع على هذه المقالة لمعرفة المزيد من المعلومات عن كيفية استخدام ContactDirect لبرنامج TWA لإفادة المستخدمين وتحقيق زيادة في معدّلات الإحالات الناجحة بمقدار ثلاث مرات.

الخلاصة

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