【APP/Android】如何使用 Webview 內嵌網頁，簡單的將網頁製作成 APP

tags: APP Android

Common 目的

1. 直接在 APP 顯示相關的網頁
   • 最近的網頁都會做RWD設計以符合手機瀏覽
   • 沒有RWD也沒關係，一樣可以內嵌
   • RWD：延伸閱讀
2. 反過來說，也可以直接利用 Webview 將網頁製作成 APP

Method 常用方法整理

Webview

• loadUrl (String url)：載入網址
• canGoBack ()：是否可以返回上一個瀏覽紀錄，也就是是否可以讓網頁返回上一頁
• goBack ()：返回上一個瀏覽紀錄，也就是讓網頁返回上一頁

WebSettings

• setJavaScriptEnabled (boolean flag)：設定網頁是否啟用 JavaScript

  • 通常必須設定為 true，因為很多動態的動作都是基於 JavaScript 的程式碼撰寫的
  • 例如：Button 的 onclick()

• setCacheMode (int mode)：設定網頁是否啟用 cache 緩存

  mode	說明
  LOAD_DEFAULT	default，根據cache-control決定是否從網絡上取數據
  LOAD_CACHE_ONLY	不使用網絡，只讀取本地緩存數據
  LOAD_NO_CACHE	不使用緩存，只從網絡獲取數據
  LOAD_CACHE_ELSE_NETWORK	只要本地有，無論是否過期，或者no-cache，都使用緩存中的數據

WebViewClient

• shouldOverrideUrlLoading()：載入網頁時不調用系統瀏覽器，而是在 APP 的 WebView 中顯示
• exmaple 範例

webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }
});

整理圖表

Tutorial 教學

步驟1：設定連線網路權限

1. 打開 manifest/AndroidManifest.xml
2. 加入 <uses-permission android:name="android.permission.INTERNET" />

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="">

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

3. APP 的 Permission 權限：延伸閱讀

步驟2：前端 Layout

<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/web_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</WebView>

步驟3：移除 Action Bar 標題欄

• 該步驟按需求執行，端看設計時是否需要 Action Bar

• 大部分的 Webview 設計都會使用 No Action Bar 的 style

  

1. 打開 res/values/styles.xml
2. 將 style 改為 Theme.AppCompat.Light.NoActionBar

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

步驟4：後端 Activity

• Method 常用方法整理

1. 基本版：寫在 onCreate() 中

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_webview);

    WebView webview = (WebView) findViewById(R.id.web_view);
    webview.getSettings().setJavaScriptEnabled(true);
    webView.setWebViewClient(new WebViewClient()); //不調用系統瀏覽器
    webview.loadUrl("https://www.google.com.tw/");
}

2. 按 Back 返回鍵可以執行網頁的返回上一頁
   • 若不加入這段程式碼，瀏覽網頁時點擊 Back 返回鍵，Webview 會調用 finish()，而直接關閉網頁
   • 功能說明：點擊 Back 返回鍵，是網頁返回上一頁，而不是結束 Webview

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) {
        webView.goBack();
        return true;
    }
    return super.onKeyDown(keyCode, event);
}

Extensive Reading 延伸閱讀

1. 什麼是響應式網頁設計(Responsive Web Design)：https://www.ibest.tw/page01.php
2. Android 6.0的Permission權限設計
   https://litotom.com/2016/05/15/android-6-permission/
3. 如何设计一个优雅健壮的Android WebView？https://juejin.im/post/5a94f9d15188257a63113a74
4. WebView性能、体验分析与优化
   https://tech.meituan.com/WebViewPerf.html

Reference 參考資料

1. 幫網站建立簡易 App：使用 Android Webview
   https://jerrynest.io/app-android-webview/
2. Android：这是一份全面 & 详细的Webview使用攻略
   https://www.jianshu.com/p/3c94ae673e2a
3. WebView 官方文件
   https://developer.android.com/reference/android/webkit/WebView
4. WebSettings 官方文件
   https://developer.android.com/reference/android/webkit/WebSettings
5. WebViewClient 官方文件
   https://developer.android.com/reference/android/webkit/WebViewClient