برنامه های WebView برای توسعه دهندگان وب

تاریخ انتشار: 28 فوریه 2014

یاد بگیرید که چگونه یک پروژه اندروید جدید ایجاد کنید، یک نمای وب اضافه کنید، یک URL راه دور بارگیری کنید، و یک صفحه HTML محلی را بارگیری کنید.

این آموزش فرض می‌کند که شما یک توسعه‌دهنده با تجربه محدود یا بدون تجربه در محیط توسعه اندروید هستید، اما تجربه کمی با Kotlin دارید. اگر از قبل با برنامه نویسی برای اندروید آشنا هستید، توصیه می کنیم در سایت توسعه دهنده اندروید، Build web apps in WebView را مطالعه کنید.

توجه: Kotlin زبان پیش‌فرض برای پیکربندی ساخت است که با Android Studio Giraffe شروع می‌شود.

اندروید استودیو را نصب کنید

این آموزش از Android Studio ، IDE طراحی و ساخت اندروید استفاده می کند.

یک پروژه اندروید جدید ایجاد کنید

پس از نصب اندروید استودیو، ویزارد راه اندازی را راه اندازی می کند.

برای ایجاد یک پروژه جدید:

1. روی پروژه جدید کلیک کنید.
2. روی الگوی Empty Activity کلیک کنید تا آن را برای پروژه خود انتخاب کنید. قالب ها ساختار پروژه و فایل های مورد نیاز اندروید استودیو برای ساخت پروژه شما را ایجاد می کنند.
3. برای باز کردن گفتگوی پروژه جدید روی Next کلیک کنید.
4. پروژه خود را پیکربندی کنید نام برنامه، نام بسته و SDK های مورد نظر خود را وارد کنید. سپس روی Next کلیک کنید.
5. حداقل SDK مورد نیاز را روی API 24 تنظیم کنید: Android 7.0 (Nougat).
6. روی Finish کلیک کنید

Android Studio پروژه جدید را باز می کند.

توجه: پس از ایجاد پروژه، مطمئن شوید که Nougat SDK را نصب کرده اید. به > مدیر SDK بروید. تأیید کنید که Android 7.0 (API 24) را نصب کرده اید.

ساختار پروژه

پروژه اولیه ایجاد شده توسط Android Studio دارای کد boilerplate برای تنظیم برنامه شما است. تعدادی از پوشه های وارداتی بیشتر عبارتند از:

• src/main/java . کد منبع اندروید جاوا.
• 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 را مشاهده کنید. می توانید این مورد را نادیده بگیرید، زیرا برای این آموزش لازم نیست.)

   برای مشاهده نشانه گذاری XML، تب Text را در پایین ویرایشگر activity_main.xml انتخاب کنید.

   این فایل طرح‌بندی فعالیت اصلی شما را مشخص می‌کند و پنجره‌های Preview پیش‌نمایش فعالیت را نشان می‌دهند. طرح‌بندی فعالیت خالی شامل هیچ کودکی نمی‌شود. باید 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 باید به آن در Activity ارجاع دهید. فایل منبع جاوا را برای فعالیت اصلی، 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 کار مرتبط کردن Activity را با طرح‌بندی انجام می‌دهد. خطوط اضافه شده یک متغیر عضو جدید به mWebView ایجاد می کند تا به نمای وب مراجعه کند.

   کد زیر را حذف کنید:

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

   WebView با شناسه منبع شناسایی می شود که با این خط در فایل طرح بندی مشخص شده است:

   android:id="@+id/activity_main_webview"
   

   پس از افزودن کد، چند پیام هشدار در حاشیه ویرایشگر خواهید دید. این به این دلیل است که شما کلاس های مناسبی را برای WebView وارد نکرده اید. خوشبختانه Android Studio می تواند به شما در پر کردن کلاس های از دست رفته کمک کند. ساده ترین راه برای انجام این کار این است که روی یک نام کلاس ناشناخته کلیک کنید و ماوس را نگه دارید و منتظر بمانید تا ماژولی که "رفع سریع" را نشان می دهد - در این مورد، یک دستور import برای کلاس WebView اضافه کنید.

   Alt + Enter (Option + Enter در مک) را فشار دهید تا رفع سریع را بپذیرید.

   WebView را در دست دارید و می‌توانید به راه‌اندازی آن و بارگیری محتوای شاداب وب ادامه دهید.

جاوا اسکریپت را فعال کنید

WebView به طور پیش فرض اجازه جاوا اسکریپت را نمی دهد. برای اجرای یک برنامه وب در WebView، باید جاوا اسکریپت را با افزودن خطوط زیر به متد onCreate به صراحت فعال کنید:

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

یک URL راه دور بارگیری کنید

اگر می‌خواهید داده‌ها را از یک URL راه دور بارگیری کنید، برنامه شما برای دسترسی به اینترنت به مجوز نیاز دارد. این مجوز باید در فایل مانیفست برنامه اضافه شود.

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]");
   

   حالا پروژه را اجرا کنید. اگر دستگاهی ندارید، می‌توانید با رفتن به Tools > Android > AVD Manager یک شبیه‌ساز (AVD یا دستگاه مجازی Android) ایجاد کنید.

توجه: برای تشخیص زمان شروع و پایان بارگیری 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. سیستم برنامه مورد نظر کاربر را برای مدیریت یک طرح URL https:// -- یعنی مرورگر پیش فرض کاربر انتخاب می کند. اگر بیش از یک مرورگر نصب کرده اید، ممکن است در این مرحله یک گفتگو را مشاهده کنید.

اگر از WebView در داخل یک برنامه اندروید برای نمایش محتوا (مثلاً یک صفحه راهنما) استفاده می‌کنید، ممکن است این دقیقاً همان کاری باشد که می‌خواهید انجام دهید. با این حال، برای برنامه های پیچیده تر، ممکن است بخواهید خودتان پیوندهای ناوبری را مدیریت کنید.

برای مدیریت پیمایش در داخل WebView، باید WebViewClient را لغو کنید، که رویدادهای مختلف تولید شده توسط 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 دیگر پیمایش کند. اگر false برگردد، WebView خود URL را باز می کند. (پیاده سازی پیش فرض همیشه false را برمی گرداند، به همین دلیل است که در مثال قبلی کار می کند.)

یک کلاس جدید ایجاد کنید:

1. روی نام بسته برنامه خود کلیک راست کرده و New > Java Class را انتخاب کنید
2. MyAppWebViewClient به عنوان نام کلاس وارد کرده و روی OK کلیک کنید

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 را باز کند. این کار را با ایجاد یک Android Intent جدید و استفاده از آن برای راه اندازی یک فعالیت جدید انجام می دهد. برگرداندن true در پایان روش از بارگیری URL در WebView جلوگیری می کند.

4. برای استفاده از WebViewClient سفارشی جدید خود، خطوط زیر را به کلاس MainActivity خود اضافه کنید:

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

   اکنون، کاربر می‌تواند روی هر یک از پیوندهای ترفندهای CSS کلیک کند و در برنامه بماند، اما پیوندهای سایت‌های خارجی در یک مرورگر باز می‌شوند.

دکمه بازگشت اندروید را کنترل کنید

همانطور که شروع به بازی کردن و پیمایش در مقالات 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، جاوا اسکریپت و CSS، آنها را در فهرست دارایی ها ذخیره کنید. این یک دایرکتوری رزرو شده است که اندروید برای فایل های خام استفاده می کند. برنامه شما نیاز به دسترسی به این دایرکتوری دارد، زیرا ممکن است نیاز به کوچک سازی یا فشرده سازی فایل های خاصی داشته باشد.

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 عالی بسازید.

برای نکاتی در مورد درست کردن تصاویر، به رابط کاربری Pixel-Perfect در WebView مراجعه کنید.

اگر با مشکل مواجه شدید، ابزار توسعه کروم دوستان شما هستند. برای شروع به Remote Debugging در Android مراجعه کنید.