FlutterInAppWebView 詳解

一、FlutterInAppWebView 是什麼？

FlutterInAppWebView 是一個用於在 Flutter 應用中網頁瀏覽器的插件，使用它可以在應用中打開網頁，也可以嵌入 html 內容並進行交互操作。

它使用了與操作系統自帶瀏覽器相同的 WebView 技術作為內核，同時還支持 Chromium 內核，提供了高效的、可擴展的、跨平台的解決方案。

以下是如何在 Flutter 項目中添加 FlutterInAppWebView 的示例代碼：

dependencies:
  flutter_inappwebview: ^5.3.2+4

二、FlutterInAppWebView 的特點

1、高度自定義

FlutterInAppWebView 可以使用自定義的樣式、主題和控制項，以便於它適應您的應用程序的整體外觀和感覺。

以下是如何自定義 FlutterInAppWebView 瀏覽器的示例代碼：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://www.baidu.com")),
  initialOptions: InAppWebViewGroupOptions(
    crossPlatform: InAppWebViewOptions(
      debuggingEnabled: true,
    ),
  ),
  onWebViewCreated: (InAppWebViewController controller) {},
  onLoadStart: (InAppWebViewController controller, Uri? url) {},
  onLoadStop: (InAppWebViewController controller, Uri? url) {},
);

2、多種交互方式

FlutterInAppWebView 支持多種與瀏覽器的交互方式，如 JavaScript 插入、調用、攔截器、 Cookie 等，可以讓您更好地控制您的應用程序和瀏覽器之間的交互。

以下是如何使用 JavaScript 插入來與瀏覽器交互的示例代碼：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://www.baidu.com")),
  initialOptions: InAppWebViewGroupOptions(
    crossPlatform: InAppWebViewOptions(
      debuggingEnabled: true,
    ),
  ),
  onWebViewCreated: (InAppWebViewController controller) async {
    await controller.addJavaScriptHandler(handlerName: 'handler', callback: (args) {
      // user tapped on `handlerName` on the webview
      return Future.value('Message from Flutter');
    });
  },
  onLoadStop: (InAppWebViewController controller, Uri? url) async {
    const js = 'window.flutter_inappwebview.callHandler("handler", "Hello from JavaScript")';
    await controller.evaluateJavascript(source: js);
  },
);

3、多種事件監聽

FlutterInAppWebView 支持多種與瀏覽器的事件監聽，如載入開始、載入結束、頁面標題、頁面回退等事件，可以讓您更好地控制您的應用程序與瀏覽器之間的交互。

以下是如何監聽頁面回退事件並執行回退操作的示例代碼：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://www.baidu.com")),
  initialOptions: InAppWebViewGroupOptions(
    crossPlatform: InAppWebViewOptions(
      debuggingEnabled: true,
    ),
  ),
  onWebViewCreated: (InAppWebViewController controller) {},
  onLoadStart: (InAppWebViewController controller, Uri? url) {},
  onLoadStop: (InAppWebViewController controller, Uri? url) async {
    final canGoBack = await controller.canGoBack();
    if (canGoBack) {
      await controller.goBack();
    }
  },
);

三、FlutterInAppWebView 的應用場景

FlutterInAppWebView 在各種應用場景中都有著廣泛的應用，以下是三個典型案例：

1、移動電商：將網站的購物車、結算頁等功能嵌入到原生應用中，提高用戶的購物體驗。

2、金融類應用：通過 WebView 載入網站，從而使應用可以輕鬆地實現在線支付、交易等操作。

3、體育類應用：使用 WebView 載入賽事直播、賽程等數據，提高用戶對於賽事的了解。

四、FlutterInAppWebView 的局限性

FlutterInAppWebView 目前在 Android 和 iOS 平台都有著良好的兼容性和性能表現，但它同樣存在一些局限性：

1、無法支持一些 iOS 平台的特殊功能

2、無法支持某些不流行的瀏覽器內核

3、對於需要進行大量網路交互的應用，使用 WebView 可能有一定的性能壓力。

五、FlutterInAppWebView 的後續發展

FlutterInAppWebView 作為一個高效、可擴展、跨平台的解決方案，未來將會在更多的應用場景中得到應用，並不斷地更新和改進，以更好地為我們的開發工作提供幫助。