Chuyển đổi HTML5 thành ứng dụng Android độc lập (Standalone App)

Để đóng gói ứng dụng web HTML5 thành file APK Android có thể cài đặt, bạn có thể dùng WebView trong dự án Android native, hoặc các framework hiện đại hơn.

Cách truyền thống: Android Studio + WebView (Java/Kotlin)

1. Tạo project Android mới

Mở Android Studio → New Project → "Empty Views Activity" (không phải Compose).

2. Cấu hình WebView trong Layout

<!-- res/layout/activity_main.xml -->
<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

3. Cấu hình MainActivity

// MainActivity.java
package com.example.myhtml5app;

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;

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);
        WebSettings settings = webView.getSettings();
        
        // BẮT BUỘC: Bật JavaScript
        settings.setJavaScriptEnabled(true);
        
        // Tùy chọn: Hỗ trợ zoom, localStorage, v.v.
        settings.setDomStorageEnabled(true);
        settings.setDatabaseEnabled(true);
        settings.setAllowFileAccessFromFileURLs(true);
        settings.setAllowUniversalAccessFromFileURLs(true);
        
        // Load file từ assets (offline app)
        webView.loadUrl("file:///android_asset/index.html");
        
        // HOẶC load từ URL (online app)
        // webView.loadUrl("https://your-website.com");
        
        // Giữ link trong app (không mở trình duyệt ngoài)
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
    }
    
    @Override
    public void onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack();
        } else {
            super.onBackPressed();
        }
    }
}

4. Copy file HTML/CSS/JS vào assets

• Tạo thư mục app/src/main/assets/ (nếu chưa có).
• Copy toàn bộ file HTML, CSS, JS, ảnh, font vào đây.
• File chính đặt tên index.html.

5. Cấp quyền Internet (nếu load URL online)

<!-- AndroidManifest.xml -->
<uses-permission android:name="android.permission.INTERNET" />

Cách hiện đại: Framework Cross-platform (Khuyên dùng)

Ví dụ Capacitor (Nhanh nhất)

# 1. Cài đặt
npm init @capacitor/app my-html5-app
cd my-html5-app

# 2. Build web app (nếu dùng Vite/React/Vue)
npm run build

# 3. Thêm platform Android
npx cap add android

# 4. Copy web build vào native
npx cap copy android

# 5. Mở Android Studio
npx cap open android

# 6. Build APK/AAB trong Android Studio

So sánh nhanh

Lưu ý quan trọng

• Google Play yêu cầu targetSdkVersion mới (API 33+ hiện nay).
• App chỉ là WebView có thể bị từ chối nếu không cung cấp giá trị native (offline, push notification, hardware access).
• Test kỹ trên nhiều kích thước màn hình, Android version.
• Xử lý deep link, back button, lifecycle (pause/resume).