تطبيقات WebView لمطوّري الويب

تاريخ النشر: 28 شباط (فبراير) 2014

تعرَّف على كيفية إنشاء مشروع Android جديد وإضافة Webview وتحميل عنوان URL عن بُعد وتحميل صفحة HTML محلية.

يفترض هذا الدليل التعليمي أنّك مطوّر لديك خبرة محدودة أو معدومة في IDE لنظام Android، ولكن لديك بعض الخبرة في Kotlin. إذا كنت معروفًا ببرمجة تطبيقات Android، ننصحك بقراءة مقالة إنشاء تطبيقات ويب في WebView على الموقع الإلكتروني لمطوّري تطبيقات Android.

ملاحظة: لغة Kotlin هي اللغة التلقائية لإعدادات الإنشاء بدءًا من الإصدار Giraffe من "استوديو Android".

تثبيت "استوديو Android"

يستخدم هذا الدليل التعليمي استوديو Android، وهو IDE لتصميم وإنشاء تطبيقات Android.

إنشاء مشروع Android جديد

بعد تثبيت Android Studio، يتم تشغيل معالج الإعداد.

لإنشاء مشروع جديد:

1. انقر على مشروع جديد.
2. انقر على نموذج نشاط فارغ لاختياره لمشروعك. تنشئ النماذج بنية المشروع والملفات اللازمة لإنشاء مشروعك في Android Studio.
3. انقر على التالي لفتح مربّع الحوار "مشروع جديد".
4. اضبط مشروعك. أدخِل اسم تطبيقك واسم الحزمة ومجموعة تطوير البرامج (SDK) المستهدفة. ثم انقر على التالي.
5. اضبط الحد الأدنى لحزمة SDK المطلوبة على واجهة برمجة التطبيقات 24: Android 7.0 (Nougat).
6. انقر على إنهاء.

يفتح "استوديو Android" المشروع الجديد.

ملاحظة: بعد إنشاء مشروعك، تأكَّد من تثبيت حزمة SDK لنظام التشغيل Nougat. انتقِل إلى الإعدادات > مدير حِزم تطوير البرامج (SDK). تأكَّد من تثبيت Android 7.0 (المستوى 24 لواجهة برمجة التطبيقات).

بنية المشروع

يحتوي المشروع الأولي الذي أنشأه "استوديو Android" على رمز نموذجي لإعداد تطبيقك. تشمل بعض المجلدات الأكثر استيرادًا ما يلي:

• src/main/java. رمز المصدر Java لنظام التشغيل Android
• src/main/res. الموارد التي يستخدمها التطبيق
• src/main/res/drawable. موارد الصور المستخدَمة في التطبيق
• src/main/res/xml. ملفات تنسيق XML التي تحدّد بنية مكونات واجهة المستخدِم
• src/main/res/values. السمات والسلاسل والقيم الأخرى التي قد لا تريد ترميزها بشكل ثابت في تطبيقك
• src/main/AndroidManifest.xml. يحدِّد ملف البيان ما يتم تضمينه في التطبيق، مثل الأنشطة والأذونات والمظاهر.

إضافة WebView

ملاحظة: لم يتم تعديل الخطوات التالية للعمل مع أحدث إصدار من Android Studio.

بعد ذلك، أضِف WebView إلى تنسيق النشاط الرئيسي.

1. افتح ملف activity_main.xml في الدليل src/main/res/xml إذا لم يكن مفتوحًا. (قد يظهر لك أيضًا ملف fragment_main.xml. يمكنك تجاهل ذلك، لأنّه ليس مطلوبًا في هذا الدليل التعليمي.)

   انقر على علامة التبويب النص في أسفل محرِّر activity_main.xml للاطّلاع على علامة XML.

   يحدِّد هذا الملف تنسيق نشاطك الرئيسي، وتعرض لوحات المعاينة ملفًا مصغرًا للنشاط. لا يتضمّن تنسيق نشاط فارغ أي أطفال. عليك إضافة WebView.

2. في لوحة XML، أزِل الشرطة المائلة ذات الإغلاق الذاتي من نهاية العنصر FrameLayout، وأضِف العنصر <WebView> وعلامة إغلاق جديدة، كما هو موضّح:

   <FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
       xmlns:tools="https://schemas.android.com/tools"
       android:id="@+id/container"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:context=".MainActivity">
       tools:ignore="MergeRootFrame">
   
       <WebView
         android:id="@+id/activity_main_webview"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />
   </FrameLayout>
   

3. لاستخدام WebView، عليك الإشارة إليه في النشاط. افتح ملف مصدر Java للactivity main،‏ MainActivity.java في الدليل src/main/java/<PackageName>.

   أضِف الأسطر المعروضة بخط غامق.

   public class MainActivity extends Activity {
   
       private WebView mWebView;
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           mWebView = (WebView) findViewById(R.id.activity_main_webview);
   

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

   أزِل الرمز التالي:

   if (savedInstanceState == null) {
     getSupportFragmentManager().beginTransaction()
       .add(R.id.container, new PlaceholderFragment())
       .commit();
   }
   

   يتم تحديد WebView من خلال معرّف المورد الذي يتم تحديده من خلال هذا السطر في ملف ملف تخطيط الشاشة:

   android:id="@+id/activity_main_webview"
   

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

   اضغط على Alt + Enter (Option + Enter على نظام التشغيل Mac) لقبول الإصلاح السريع.

   بعد الحصول على WebView، يمكنك الانتقال إلى إعداده وتحميل بعض محتوى الويب المفيد.

تفعيل JavaScript

لا يسمح WebView باستخدام JavaScript تلقائيًا. لتشغيل تطبيق ويب في WebView، عليك تفعيل JavaScript صراحةً من خلال إضافة الأسطر التالية إلى طريقة onCreate:

// Enable Javascript
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

تحميل عنوان URL عن بُعد

إذا كنت ستحمّل البيانات من عنوان URL عن بُعد، يحتاج تطبيقك إلى إذن للوصول إلى internet. يجب إضافة هذا الإذن في ملف بيان التطبيق.

1. افتح ملف AndroidManifest.xml في الدليل src/res. أضِف السطر بخط غامق قبل علامة</manifest> الإغلاق.

   <?xml version="1.0" encoding="utf-8"?>
   <manifest ...>
   ...
    
     </application>
     <uses-permission android:name="android.permission.INTERNET" />
   </manifest>
   

2. الخطوة التالية هي استدعاء طريقة loadUrl في webview. أضِف السطر التالي إلى نهاية طريقة onCreate.

   mWebView.loadUrl("[https://beta.html5test.com/][8]");
   

   جرِّب الآن تشغيل المشروع. إذا لم يكن لديك جهاز متاح، يمكنك إنشاء محاكي (AVD أو جهاز Android افتراضي) من خلال الانتقال إلى الأدوات > Android > مدير AVD.

ملاحظة: لرصد وقت بدء تحميل عنوان URL وانتهائه، استخدِم WebViewClient.onPageStarted وWebViewClient.onPageFinished.

التنقّل في الاسم المعرِّف

جرِّب تغيير عنوان URL الذي تحمّله إلى https://www.css-tricks.com/ وإعادة تشغيل تطبيقك. ستلاحظ شيئًا غريبًا.

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

في ما يلي تسلسل الأحداث:

1. يحاول WebView تحميل عنوان URL الأصلي من الخادم البعيد، ويتلقّى عملية إعادة توجيه إلى عنوان URL جديد.
2. يتحقّق WebView ممّا إذا كان بإمكان النظام معالجة نية عرض عنوان URL، وإذا كان الأمر كذلك، يعالج النظام التنقّل في عنوان URL، وإلا ينتقل WebView داخليًا (على سبيل المثال، إذا لم يكن لدى المستخدم متصفّح مثبّت على جهازه).
3. يختار النظام التطبيق المفضّل للمستخدم لمعالجة https:// مخطّط عنوان URL، أي المتصفّح التلقائي للمستخدم. إذا كان لديك أكثر من متصفح واحد مثبّت، قد يظهر لك مربّع حوار في هذه المرحلة.

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

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

يؤدي التنفيذ التلقائي لرمز WebViewClient إلى فتح أي عنوان URL في WebView:

// Force links and redirects to open in the WebView instead of in a browser
mWebView.setWebViewClient(new WebViewClient());

هذه خطوة جيدة، ولكن ماذا لو أردت معالجة روابط موقعك الإلكتروني فقط، مع فتح عناوين URL أخرى في متصفّح؟

لتحقيق ذلك، عليك توسيع فئة WebViewClient وتنفيذ الأسلوب shouldOverrideUrlLoading. يتمّ استدعاء هذه الطريقة كلّما حاول WebView الانتقال إلى عنوان URL مختلف. إذا كانت القيمة "خطأ"، يفتح WebView عنوان URL نفسه. (يعرض التنفيذ التلقائيدائمًا القيمة false، ولهذا السبب يعمل في المثال السابق).

لإنشاء صف جديد:

1. انقر بزر الماوس الأيمن على اسم حزمة تطبيقك واختَر جديد > فئة Java.
2. أدخِل MyAppWebViewClient كاسم الصف وانقر على حسنًا.

3. في ملف MyAppWebViewClient.java الجديد، أضِف الرمز التالي (التغييرات معروضة بخط عريض):

   public class MyAppWebViewClient extends WebViewClient {
     @Override
     public boolean shouldOverrideUrlLoading(WebView view, String url) {
       if(Uri.parse(url).getHost().endsWith("css-tricks.com")) {
         return false;
       }
                  
       Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
       view.getContext().startActivity(intent);
       return true;
     }
   }
   

   تحدِّد التعليمات البرمجية الجديدة MyAppWebViewClient كصنف فرعي من WebViewClient وتنفِّذ الإجراء shouldOverrideUrlLoading.

   يتم استدعاء الطريقة shouldOverrideUrlLoading عندما يكون WebView على وشك تحميل عنوان URL. يتحقّق هذا التنفيذ من السلسلة "css-tricks.com" في نهاية اسم المضيف لعنوان URL. إذا كانت السلسلة متوفّرة، تعرض الطريقة القيمة false، ما يطلب من المنصة عدم تجاوز عنوان URL، بل تحميله في WebView.

   بالنسبة إلى أيّ اسم مضيف آخر، ترسِل الطريقة طلبًا إلى النظام لفتح عنوان URL. ويتم ذلك من خلال إنشاء Intent جديد على Android واستخدامه لبدء نشاط جديد. يؤدي عرض القيمة true في نهاية الأسلوب إلى منع تحميل عنوان URL في WebView.

4. لاستخدام WebViewClient المخصّص الجديد، أضِف السطور التالية إلى فئة MainActivity:

   // Stop local links and redirects from opening in browser instead of WebView
   mWebView.setWebViewClient(new MyAppWebViewClient());
   

   يمكن للمستخدم الآن النقر على أيّ من روابط CSS Tricks والبقاء داخل التطبيق، ولكن يتم فتح الروابط المؤدية إلى مواقع إلكترونية خارجية في متصفّح.

التعامل مع زر الرجوع في Android

عند بدء التنقّل في مقالات CSS Tricks والنقر على زر الرجوع على جهاز Android، يؤدي ذلك إلى الخروج من التطبيق.

تُعلمك طريقة WebView canGoBack إذا كان هناك أي عنصر في حزمة الصفحة يمكن إزالته. لرصد الضغط على زر الرجوع وتحديد ما إذا كان عليك الرجوع من خلال سجلّ WebView أو السماح للمنصة بتحديد السلوك الصحيح، أضِف طريقة onBackPressed() إلى MainActivity:

public class MainActivity extends Activity {

 private WebView mWebView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
     ...
 }

    @Override
    public void onBackPressed() {
      if(mWebView.canGoBack()) {
        mWebView.goBack();
      } else {
        super.onBackPressed();
      }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
       ...
    }
}

تحميل ملف HTML من نظام الملفات

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

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

1. أنشئ الدليل assets/www في الدليل main (src/main/assets/www).

   • من أفضل الممارسات الاحتفاظ بملفات الويب في دليل فرعي من /assets.
   ملاحظة: لا تعمل سوى المسارات النسبية في WebView عند الإشارة إلى ملفات أخرى، مثل CSS وJavaScript. بدلاً من المسارات المطلقة، مثل /pages/somelink.html، استخدِم المسارات النسبية، مثل ./pages/somelink.html.

2. حمِّل جميع الملفات في الدليل.

3. حمِّل الملف المناسب:

   mWebView.loadUrl("file:///android_asset/www/index.html");
   

4. عدِّل طريقة shouldOverrideUrlLoading لفتح متصفّح ل الصفحات غير المحلية:

   public class MyAppWebViewClient extends WebViewClient {
     @Override
     public boolean shouldOverrideUrlLoading(WebView view, String url) {
       if(Uri.parse(url).getHost().length() == 0) {
         return false;
       }
   
       Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
       view.getContext().startActivity(intent);
       return true;
     }
   }
   

يمكنك الآن إنشاء تطبيق WebView رائع.

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

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