ตัวอย่างการใช้ WebView ใน Android แบบสมบูรณ์

WebView Implementation ใน Android: คู่มือครบถ้วน

WebView เป็น View ที่แสดง HTML/Web Content ภายในแอป ใช้ WebViewClient ควบคุม Navigation

WebView Methods สำคัญ

ขั้นตอนที่ 1: Layout XML

<WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

ขั้นตอนที่ 2: MainActivity.java

public class MainActivity extends AppCompatActivity {
    private WebView webView;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        webView = findViewById(R.id.webView);
        
        // Settings
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);           // Enable JS
        settings.setLoadWithOverviewMode(true);        // Fit to screen
        settings.setUseWideViewPort(true);             // Wide viewport
        settings.setBuiltInZoomControls(true);         // Zoom controls
        settings.setSupportZoom(true);                 // Support zoom
        settings.setDomStorageEnabled(true);           // LocalStorage
        settings.setDatabaseEnabled(true);             // WebSQL/IndexedDB
        settings.setCacheMode(WebSettings.LOAD_DEFAULT); // Cache
        
        // WebViewClient: Handle Navigation inside WebView
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                view.loadUrl(request.getUrl().toString());
                return true;
            }
            
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                // Page loaded
            }
            
            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                // Handle Error
            }
        });
        
        // Load URL
        webView.loadUrl("https://www.tutorialspoint.com/");
    }
    
    @Override
    public void onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack();
        } else {
            super.onBackPressed();
        }
    }
    
    @Override
    protected void onDestroy() {
        if (webView != null) {
            webView.destroy();
            webView = null;
        }
        super.onDestroy();
    }
}

ขั้นตอนที่ 3: AndroidManifest.xml - Internet Permission

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

ขั้นตอนที่ 4: Cleartext Traffic (HTTP) - Android 9+

Android 9 (API 28+) บล็อก HTTP แบบ Plain Text ต้อง config ใน res/xml/network_security_config.xml:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">example.com</domain>
    </domain-config>
</network-security-config>

เพิ่มใน Manifest: android:networkSecurityConfig="@xml/network_security_config"

Advanced: JavaScript Interface (Bridge JS ↔ Native)

public class WebAppInterface {
    @JavascriptInterface
    public void showToast(String message) {
        Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
    }
}

// ใน onCreate:
webView.addJavascriptInterface(new WebAppInterface(this), "Android");
// JS เรียก: Android.showToast("Hello from Web")

Best Practices

• ✅ ใช้ WebViewClient จัดการ Navigation ภายในแอป
• ✅ Enable JavaScript เฉพาะที่จำเป็น (Security)
• ✅ ใช้ onDestroy() cleanup WebView
• ✅ Handle SSL Errors อย่างเหมาะสม (Don't just proceed)
• ✅ Consider SafeBrowsing (API 27+)
• ❌ อย่าโหลด Untrusted Content โดยไม่ Validate

Modern Alternative: Chrome Custom Tabs

สำหรับแค่เปิดเว็บ ไม่ต้องการ Custom UI ให้ใช้ CustomTabsIntent - เร็วกว่า, Secure, Shared Cookies กับ Chrome