[webview_flutter] Support for loading progress tracking

packages/webview_flutter/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.3.20
+
+* Add progress tracking support.
+
 ## 0.3.19+5
 
 * On iOS, always keep contentInsets of the WebView to be 0.

packages/webview_flutter/android/src/main/java/io/flutter/plugins/webviewflutter/FlutterWebView.java

@@ -10,7 +10,9 @@
 import android.os.Build;
 import android.os.Handler;
 import android.view.View;
+import android.webkit.WebChromeClient;
 import android.webkit.WebStorage;
+import android.webkit.WebView;
 import android.webkit.WebViewClient;
 import io.flutter.plugin.common.BinaryMessenger;
 import io.flutter.plugin.common.MethodCall;
@@ -266,12 +268,23 @@ private void applySettings(Map<String, Object> settings) {
               flutterWebViewClient.createWebViewClient(hasNavigationDelegate);
 
           webView.setWebViewClient(webViewClient);
+
           break;
         case "debuggingEnabled":
           final boolean debuggingEnabled = (boolean) settings.get(key);
 
           webView.setWebContentsDebuggingEnabled(debuggingEnabled);
           break;
+        case "hasProgressTracking":
+          final boolean progressTrackingEnabled = (boolean) settings.get(key);
+          if (progressTrackingEnabled) {
+            webView.setWebChromeClient(
+                new WebChromeClient() {
+                  public void onProgressChanged(WebView view, int progress) {
+                    flutterWebViewClient.onLoadingProgress(progress);
+                  }
+                });
+          }
         case "gestureNavigationEnabled":
           break;
         case "userAgent":

packages/webview_flutter/android/src/main/java/io/flutter/plugins/webviewflutter/FlutterWebViewClient.java

@@ -25,6 +25,7 @@ class FlutterWebViewClient {
   private static final String TAG = "FlutterWebViewClient";
   private final MethodChannel methodChannel;
   private boolean hasNavigationDelegate;
+  private boolean hasProgressTracking;
 
   FlutterWebViewClient(MethodChannel methodChannel) {
     this.methodChannel = methodChannel;
@@ -79,6 +80,12 @@ private void onPageFinished(WebView view, String url) {
     methodChannel.invokeMethod("onPageFinished", args);
   }
 
+  void onLoadingProgress(int progress) {
+    Map<String, Object> args = new HashMap<>();
+    args.put("progress", progress);
+    methodChannel.invokeMethod("onProgress", args);
+  }
+
   private void notifyOnNavigationRequest(
       String url, Map<String, String> headers, WebView webview, boolean isMainFrame) {
     HashMap<String, Object> args = new HashMap<>();

packages/webview_flutter/example/lib/main.dart

@@ -55,6 +55,9 @@ class _WebViewExampleState extends State<WebViewExample> {
           onWebViewCreated: (WebViewController webViewController) {
             _controller.complete(webViewController);
           },
+          onProgress: (int progress) {
+            print("WebView is loading (progress : $progress%)");
+          },
           // TODO(iskakaushik): Remove this when collection literals makes it to stable.
           // ignore: prefer_collection_literals
           javascriptChannels: <JavascriptChannel>[

packages/webview_flutter/ios/Classes/FLTWKProgressionDelegate.h

@@ -0,0 +1,22 @@
+//
+//  FLTWKProgressionDelegate.h
+//  webview_flutter
+//
+//  Created by Jérémie Vincke on 03/10/2019.
+//
+
+#import <Flutter/Flutter.h>
+#import <Foundation/Foundation.h>
+#import <WebKit/WebKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface FLTWKProgressionDelegate : NSObject
+
+- (instancetype)initWithWebView:(WKWebView *)webView channel:(FlutterMethodChannel *)channel;
+
+- (void)stopObservingProgress:(WKWebView *)webView;
+
+@end
+
+NS_ASSUME_NONNULL_END

packages/webview_flutter/ios/Classes/FLTWKProgressionDelegate.m

@@ -0,0 +1,45 @@
+//
+//  FLTWKProgressionDelegate.m
+//  webview_flutter
+//
+//  Created by Jérémie Vincke on 03/10/2019.
+//
+
+#import "FLTWKProgressionDelegate.h"
+
+NSString *const keyPath = @"estimatedProgress";
+
+@implementation FLTWKProgressionDelegate {
+  FlutterMethodChannel *_methodChannel;
+}
+
+- (instancetype)initWithWebView:(WKWebView *)webView channel:(FlutterMethodChannel *)channel {
+  self = [super init];
+  if (self) {
+    _methodChannel = channel;
+    [webView addObserver:self
+              forKeyPath:keyPath
+                 options:NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld
+                 context:nil];
+  }
+  return self;
+}
+
+- (void)stopObservingProgress:(WKWebView *)webView {
+  [webView removeObserver:self forKeyPath:keyPath];
+}
+
+- (void)observeValueForKeyPath:(NSString *)keyPath
+                      ofObject:(id)object
+                        change:(NSDictionary<NSKeyValueChangeKey, id> *)change
+                       context:(void *)context {
+  if ([keyPath isEqualToString:keyPath]) {
+    NSNumber *newValue =
+        change[NSKeyValueChangeNewKey] ?: 0;          // newValue is anywhere between 0.0 and 1.0
+    int newValueAsInt = [newValue floatValue] * 100;  // Anywhere between 0 and 100
+    [_methodChannel invokeMethod:@"onProgress"
+                       arguments:@{@"progress" : [NSNumber numberWithInt:newValueAsInt]}];
+  }
+}
+
+@end

packages/webview_flutter/ios/Classes/FlutterWebView.m

@@ -4,6 +4,7 @@
 
 #import "FlutterWebView.h"
 #import "FLTWKNavigationDelegate.h"
+#import "FLTWKProgressionDelegate.h"
 #import "JavaScriptChannelHandler.h"
 
 @implementation FLTWebViewFactory {
@@ -64,6 +65,7 @@ @implementation FLTWebViewController {
   // The set of registered JavaScript channel names.
   NSMutableSet* _javaScriptChannelNames;
   FLTWKNavigationDelegate* _navigationDelegate;
+  FLTWKProgressionDelegate* _progressionDelegate;
 }
 
 - (instancetype)initWithFrame:(CGRect)frame
@@ -118,6 +120,12 @@ - (instancetype)initWithFrame:(CGRect)frame
   return self;
 }
 
+- (void)dealloc {
+  if (_progressionDelegate != nil) {
+    [_progressionDelegate stopObservingProgress:_webView];
+  }
+}
+
 - (UIView*)view {
   return _webView;
 }
@@ -284,6 +292,13 @@ - (NSString*)applySettings:(NSDictionary<NSString*, id>*)settings {
     } else if ([key isEqualToString:@"hasNavigationDelegate"]) {
       NSNumber* hasDartNavigationDelegate = settings[key];
       _navigationDelegate.hasDartNavigationDelegate = [hasDartNavigationDelegate boolValue];
+    } else if ([key isEqualToString:@"hasProgressTracking"]) {
+      NSNumber* hasProgressTrackingValue = settings[key];
+      bool hasProgressTracking = [hasProgressTrackingValue boolValue];
+      if (hasProgressTracking) {
+        _progressionDelegate = [[FLTWKProgressionDelegate alloc] initWithWebView:_webView
+                                                                         channel:_channel];
+      }
     } else if ([key isEqualToString:@"debuggingEnabled"]) {
       // no-op debugging is always enabled on iOS.
     } else if ([key isEqualToString:@"gestureNavigationEnabled"]) {

packages/webview_flutter/lib/platform_interface.dart

@@ -28,6 +28,9 @@ abstract class WebViewPlatformCallbacksHandler {
 
   /// Invoked by [WebViewPlatformController] when a page has finished loading.
   void onPageFinished(String url);
+
+  /// Invoked by [WebViewPlatformController] when a page is loading.
+  void onProgress(int progress);
 }
 
 /// Interface for talking to the webview's platform implementation.
@@ -230,6 +233,7 @@ class WebSettings {
   WebSettings({
     this.javascriptMode,
     this.hasNavigationDelegate,
+    this.hasProgressTracking,
     this.debuggingEnabled,
     this.gestureNavigationEnabled,
     @required this.userAgent,
@@ -241,6 +245,9 @@ class WebSettings {
   /// Whether the [WebView] has a [NavigationDelegate] set.
   final bool hasNavigationDelegate;
 
+  /// Whether the [WebView] should track page loading progress.
+  final bool hasProgressTracking;
+
   /// Whether to enable the platform's webview content debugging tools.
   ///
   /// See also: [WebView.debuggingEnabled].
@@ -263,7 +270,7 @@ class WebSettings {
 
   @override
   String toString() {
-    return 'WebSettings(javascriptMode: $javascriptMode, hasNavigationDelegate: $hasNavigationDelegate, debuggingEnabled: $debuggingEnabled, gestureNavigationEnabled: $gestureNavigationEnabled, userAgent: $userAgent)';
+    return 'WebSettings(javascriptMode: $javascriptMode, hasNavigationDelegate: $hasNavigationDelegate, hasProgressTracking: $hasProgressTracking, debuggingEnabled: $debuggingEnabled, gestureNavigationEnabled: $gestureNavigationEnabled, userAgent: $userAgent)';
   }
 }
 

packages/webview_flutter/lib/src/webview_method_channel.dart

@@ -40,6 +40,8 @@ class MethodChannelWebViewPlatform implements WebViewPlatformController {
       case 'onPageFinished':
         _platformCallbacksHandler.onPageFinished(call.arguments['url']);
         return null;
+      case 'onProgress':
+        _platformCallbacksHandler.onProgress(call.arguments['progress']);
       case 'onPageStarted':
         _platformCallbacksHandler.onPageStarted(call.arguments['url']);
         return null;
@@ -136,6 +138,7 @@ class MethodChannelWebViewPlatform implements WebViewPlatformController {
 
     _addIfNonNull('jsMode', settings.javascriptMode?.index);
     _addIfNonNull('hasNavigationDelegate', settings.hasNavigationDelegate);
+    _addIfNonNull('hasProgressTracking', settings.hasProgressTracking);
     _addIfNonNull('debuggingEnabled', settings.debuggingEnabled);
     _addIfNonNull(
         'gestureNavigationEnabled', settings.gestureNavigationEnabled);

packages/webview_flutter/lib/webview_flutter.dart

@@ -79,6 +79,9 @@ typedef void PageStartedCallback(String url);
 /// Signature for when a [WebView] has finished loading a page.
 typedef void PageFinishedCallback(String url);
 
+/// Signature for when a [WebView] is loading a page.
+typedef void PageLoadingCallback(int progress);
+
 /// Specifies possible restrictions on automatic media playback.
 ///
 /// This is typically used in [WebView.initialMediaPlaybackPolicy].
@@ -147,6 +150,7 @@ class WebView extends StatefulWidget {
     this.gestureRecognizers,
     this.onPageStarted,
     this.onPageFinished,
+    this.onProgress,
     this.debuggingEnabled = false,
     this.gestureNavigationEnabled = false,
     this.userAgent,
@@ -277,6 +281,9 @@ class WebView extends StatefulWidget {
   /// [WebViewController.evaluateJavascript] can assume this.
   final PageFinishedCallback onPageFinished;
 
+  /// Invoked when a page is loading.
+  final PageLoadingCallback onProgress;
+
   /// Controls whether WebView debugging is enabled.
   ///
   /// Setting this to true enables [WebView debugging on Android](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/).
@@ -390,6 +397,7 @@ WebSettings _webSettingsFromWidget(WebView widget) {
   return WebSettings(
     javascriptMode: widget.javascriptMode,
     hasNavigationDelegate: widget.navigationDelegate != null,
+    hasProgressTracking: widget.onProgress != null,
     debuggingEnabled: widget.debuggingEnabled,
     gestureNavigationEnabled: widget.gestureNavigationEnabled,
     userAgent: WebSetting<String>.of(widget.userAgent),
@@ -401,6 +409,7 @@ WebSettings _clearUnchangedWebSettings(
     WebSettings currentValue, WebSettings newValue) {
   assert(currentValue.javascriptMode != null);
   assert(currentValue.hasNavigationDelegate != null);
+  assert(currentValue.hasProgressTracking != null);
   assert(currentValue.debuggingEnabled != null);
   assert(currentValue.userAgent.isPresent);
   assert(newValue.javascriptMode != null);
@@ -410,6 +419,7 @@ WebSettings _clearUnchangedWebSettings(
 
   JavascriptMode javascriptMode;
   bool hasNavigationDelegate;
+  bool hasProgressTracking;
   bool debuggingEnabled;
   WebSetting<String> userAgent = WebSetting<String>.absent();
   if (currentValue.javascriptMode != newValue.javascriptMode) {
@@ -418,6 +428,9 @@ WebSettings _clearUnchangedWebSettings(
   if (currentValue.hasNavigationDelegate != newValue.hasNavigationDelegate) {
     hasNavigationDelegate = newValue.hasNavigationDelegate;
   }
+  if (currentValue.hasProgressTracking != newValue.hasProgressTracking) {
+    hasProgressTracking = newValue.hasProgressTracking;
+  }
   if (currentValue.debuggingEnabled != newValue.debuggingEnabled) {
     debuggingEnabled = newValue.debuggingEnabled;
   }
@@ -428,6 +441,7 @@ WebSettings _clearUnchangedWebSettings(
   return WebSettings(
     javascriptMode: javascriptMode,
     hasNavigationDelegate: hasNavigationDelegate,
+    hasProgressTracking: hasProgressTracking,
     debuggingEnabled: debuggingEnabled,
     userAgent: userAgent,
   );
@@ -482,6 +496,13 @@ class _PlatformCallbacksHandler implements WebViewPlatformCallbacksHandler {
     }
   }
 
+  @override
+  void onProgress(int progress) {
+    if (_widget.onProgress != null) {
+      _widget.onProgress(progress);
+    }
+  }
+
   void _updateJavascriptChannelsFromSet(Set<JavascriptChannel> channels) {
     _javascriptChannels.clear();
     if (channels == null) {

packages/webview_flutter/pubspec.yaml

@@ -1,6 +1,6 @@
 name: webview_flutter
 description: A Flutter plugin that provides a WebView widget on Android and iOS.
-version: 0.3.19+5
+version: 0.3.20
 homepage: https://github.com/flutter/plugins/tree/master/packages/webview_flutter
 
 environment: