แอปพลิเคชัน WebView สําหรับนักพัฒนาเว็บ

เผยแพร่: 28 กุมภาพันธ์ 2014

ดูวิธีสร้างโปรเจ็กต์ Android ใหม่ เพิ่ม WebView โหลด URL ระยะไกล และโหลดหน้า HTML ในเครื่อง

บทแนะนำนี้ถือว่าคุณเป็นนักพัฒนาซอฟต์แวร์ที่มีประสบการณ์ไม่มากนักหรือไม่มีประสบการณ์เกี่ยวกับสภาพแวดล้อมการพัฒนา Android แต่มีประสบการณ์เกี่ยวกับ Kotlin บ้าง หากคุณคุ้นเคยกับการเขียนโปรแกรมสําหรับ Android อยู่แล้ว เราขอแนะนําให้อ่านสร้างเว็บแอปใน WebView ในเว็บไซต์ของนักพัฒนาแอป Android

ติดตั้ง Android Studio

บทแนะนำนี้ใช้ Android Studio ซึ่งเป็น IDE สำหรับออกแบบและสร้างแอป Android

สร้างโปรเจ็กต์ Android ใหม่

เมื่อติดตั้ง Android Studio แล้ว ระบบจะเปิดวิซาร์ดการตั้งค่า

วิธีสร้างโปรเจ็กต์ใหม่

1. คลิกโปรเจ็กต์ใหม่
2. คลิกเทมเพลตกิจกรรมว่างเพื่อเลือกเทมเพลตสำหรับโปรเจ็กต์ เทมเพลตจะสร้างโครงสร้างของโปรเจ็กต์และไฟล์ที่จําเป็นสําหรับ Android Studio เพื่อสร้างโปรเจ็กต์
3. คลิกถัดไปเพื่อเปิดกล่องโต้ตอบโปรเจ็กต์ใหม่
4. กําหนดค่าโปรเจ็กต์ ป้อนชื่อแอปพลิเคชัน ชื่อแพ็กเกจ และ SDK เป้าหมาย แล้วคลิกถัดไป
5. ตั้งค่า SDK ขั้นต่ำที่จำเป็นเป็น API 24: Android 7.0 (Nougat)
6. คลิกเสร็จสิ้น

Android Studio จะเปิดโปรเจ็กต์ใหม่

โครงสร้างโปรเจ็กต์

โปรเจ็กต์เริ่มต้นที่สร้างโดย Android Studio มีโค้ดที่เขียนไว้ล่วงหน้าเพื่อตั้งค่าแอปพลิเคชัน โฟลเดอร์อื่นๆ สำหรับการนําเข้า ได้แก่

• src/main/java. ซอร์สโค้ด Java ของ Android
• src/main/res ทรัพยากรที่แอปพลิเคชันใช้
• src/main/res/drawable ทรัพยากรรูปภาพที่แอปพลิเคชันใช้
• src/main/res/xml. ไฟล์เลย์เอาต์ XML ที่กําหนดโครงสร้างของคอมโพเนนต์ UI
• src/main/res/values มิติข้อมูล สตริง และค่าอื่นๆ ที่คุณอาจไม่ต้องการเขียนโค้ดตายตัวในแอปพลิเคชัน
• src/main/AndroidManifest.xml. ไฟล์ Manifest จะกำหนดสิ่งที่รวมอยู่ในแอปพลิเคชัน เช่น กิจกรรม สิทธิ์ และธีม

เพิ่ม WebView

ถัดไป ให้เพิ่ม 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 คุณต้องอ้างอิง WebView นั้นในกิจกรรม เปิดไฟล์ซอร์สโค้ด Java สําหรับกิจกรรมหลัก 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 Studio ช่วยคุณเติมคลาสที่ขาดหายไปได้ วิธีที่ง่ายที่สุดคือคลิกและวางเมาส์เหนือชื่อคลาสที่ไม่รู้จัก แล้วรอให้โมดูลแสดง "การแก้ไขด่วน" ซึ่งในกรณีนี้คือการเพิ่มคำสั่ง 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 ระยะไกล แอปพลิเคชันต้องมีสิทธิ์ในการเข้าถึงอินเทอร์เน็ต คุณต้องเพิ่มสิทธิ์นี้ในไฟล์ Manifest ของแอปพลิเคชัน

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 Virtual Device) โดยไปที่เครื่องมือ > Android > เครื่องมือจัดการ AVD

จัดการการนําทาง

ลองเปลี่ยน URL ที่คุณโหลดเป็น https://www.css-tricks.com/ แล้วเรียกใช้แอปพลิเคชันอีกครั้ง คุณจะเห็นความผิดปกติ

หากคุณเรียกใช้แอปพลิเคชันกับเว็บไซต์ที่มีการเปลี่ยนเส้นทาง เช่น css-tricks.com ตอนนี้แอปของคุณก็จะเปิดเว็บไซต์ในเบราว์เซอร์บนอุปกรณ์ ไม่ใช่ใน WebView ซึ่งอาจไม่ใช่สิ่งที่คุณคาดหวัง สาเหตุคือวิธีที่ WebView จัดการเหตุการณ์การนําทาง

ลำดับเหตุการณ์มีดังนี้

1. WebView จะพยายามโหลด URL เดิมจากเซิร์ฟเวอร์ระยะไกล และได้รับการเปลี่ยนเส้นทางไปยัง URL ใหม่
2. WebView จะตรวจสอบว่าระบบจัดการ Intent ของมุมมองสําหรับ URL ได้หรือไม่ หากได้ ระบบจะจัดการการไปยังส่วนต่างๆ ของ URL หากไม่ได้ WebView จะไปยังส่วนต่างๆ ภายใน (เช่น หากผู้ใช้ไม่ได้ติดตั้งเบราว์เซอร์ในอุปกรณ์)
3. ระบบจะเลือกแอปพลิเคชันที่ผู้ใช้ต้องการสำหรับจัดการhttps://รูปแบบ URL ซึ่งก็คือเบราว์เซอร์เริ่มต้นของผู้ใช้ หากติดตั้งเบราว์เซอร์ไว้มากกว่า 1 ตัว คุณอาจเห็นกล่องโต้ตอบในตอนนี้

หากคุณใช้ 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 นั้นเอง (การใช้งานเริ่มต้นจะแสดงผลลัพธ์เป็นเท็จเสมอ ซึ่งเป็นเหตุผลที่ใช้งานได้ในตัวอย่างก่อนหน้านี้)

วิธีสร้างชั้นเรียนใหม่

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 หากสตริงมีอยู่แล้ว เมธอดจะแสดงผลเป็นเท็จ ซึ่งบอกให้แพลตฟอร์มไม่ลบล้าง URL แต่ให้โหลดใน WebView

   สำหรับชื่อโฮสต์อื่นๆ วิธีการนี้จะส่งคำขอไปยังระบบให้เปิด URL โดยสร้าง Intent ใหม่ของ Android และใช้เพื่อเปิดใช้งานกิจกรรมใหม่ การคืนค่า "จริง" ที่ท้ายเมธอดจะป้องกันไม่ให้ระบบโหลด URL ลงใน WebView

4. หากต้องการใช้ WebViewClient ที่กําหนดเองใหม่ ให้เพิ่มบรรทัดต่อไปนี้ลงในMainActivity class

   // 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 ใช้สำหรับไฟล์ RAW แอปของคุณต้องมีสิทธิ์เข้าถึงไดเรกทอรีนี้ เนื่องจากอาจต้องย่อขนาดหรือบีบอัดไฟล์บางไฟล์

1. สร้างไดเรกทอรี assets/www ใน main (src/main/assets/www)

   • แนวทางปฏิบัติแนะนำคือเก็บไฟล์เว็บไว้ในไดเรกทอรีย่อยของ /assets

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 ที่ยอดเยี่ยมแล้ว

ดูเคล็ดลับเกี่ยวกับการแสดงภาพที่เหมาะสมได้ที่UI ที่แสดงผลอย่างละเอียดใน WebView

หากพบปัญหา เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะช่วยคุณได้ ดูการแก้ไขข้อบกพร่องจากระยะไกลใน Android เพื่อเริ่มต้นใช้งาน