[webview_flutter] Support for loading progress tracking

packages/webview_flutter/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.3.15
+
+* Added loading progress tracking support.
+
 ## 0.3.14+1
 
 * Allow underscores anywhere for Javascript Channel name.

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;
@@ -246,12 +248,24 @@ 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);
+                  }
+                });
+          }
+          break;
         case "userAgent":
           updateUserAgent((String) settings.get(key));
           break;

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;
@@ -73,6 +74,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

@@ -53,6 +53,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 <Foundation/Foundation.h>
+#import <Flutter/Flutter.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,37 @@
+//
+//  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)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]}];
+  }
+}
+
+- (void)stopObservingProgress:(WKWebView *)webView {
+  [webView removeObserver:self forKeyPath:keyPath];
+}
+
+@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 {
@@ -42,6 +43,7 @@ @implementation FLTWebViewController {
   // The set of registered JavaScript channel names.
   NSMutableSet* _javaScriptChannelNames;
   FLTWKNavigationDelegate* _navigationDelegate;
+  FLTWKProgressionDelegate* _progressionDelegate;
 }
 
 - (instancetype)initWithFrame:(CGRect)frame
@@ -54,7 +56,7 @@ - (instancetype)initWithFrame:(CGRect)frame
     NSString* channelName = [NSString stringWithFormat:@"plugins.flutter.io/webview_%lld", viewId];
     _channel = [FlutterMethodChannel methodChannelWithName:channelName binaryMessenger:messenger];
     _javaScriptChannelNames = [[NSMutableSet alloc] init];
-
+    
     WKUserContentController* userContentController = [[WKUserContentController alloc] init];
     if ([args[@"javascriptChannelNames"] isKindOfClass:[NSArray class]]) {
       NSArray* javaScriptChannelNames = args[@"javascriptChannelNames"];
@@ -89,6 +91,12 @@ - (instancetype)initWithFrame:(CGRect)frame
   return self;
 }
 
+- (void)dealloc {
+  if (_progressionDelegate != nil) {
+    [_progressionDelegate stopObservingProgress:_webView];
+  }
+}
+
 - (UIView*)view {
   return _webView;
 }
@@ -255,6 +263,12 @@ - (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:@"userAgent"]) {

packages/webview_flutter/lib/platform_interface.dart

@@ -25,6 +25,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.
@@ -223,6 +226,7 @@ class WebSettings {
   WebSettings({
     this.javascriptMode,
     this.hasNavigationDelegate,
+    this.hasProgressTracking,
     this.debuggingEnabled,
     @required this.userAgent,
   }) : assert(userAgent != null);
@@ -233,6 +237,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].
@@ -250,7 +257,7 @@ class WebSettings {
 
   @override
   String toString() {
-    return 'WebSettings(javascriptMode: $javascriptMode, hasNavigationDelegate: $hasNavigationDelegate, debuggingEnabled: $debuggingEnabled, userAgent: $userAgent,)';
+    return 'WebSettings(javascriptMode: $javascriptMode, hasNavigationDelegate: $hasNavigationDelegate, hasProgressTracking: $hasProgressTracking, debuggingEnabled: $debuggingEnabled, userAgent: $userAgent,)';
   }
 }
 

packages/webview_flutter/lib/src/webview_method_channel.dart

@@ -38,6 +38,9 @@ class MethodChannelWebViewPlatform implements WebViewPlatformController {
       case 'onPageFinished':
         _platformCallbacksHandler.onPageFinished(call.arguments['url']);
         return null;
+      case 'onProgress':
+        _platformCallbacksHandler.onProgress(call.arguments['progress']);
+        return null;
     }
     throw MissingPluginException(
         '${call.method} was invoked but has no handler');
@@ -131,6 +134,7 @@ class MethodChannelWebViewPlatform implements WebViewPlatformController {
 
     _addIfNonNull('jsMode', settings.javascriptMode?.index);
     _addIfNonNull('hasNavigationDelegate', settings.hasNavigationDelegate);
+    _addIfNonNull('hasProgressTracking', settings.hasProgressTracking);
     _addIfNonNull('debuggingEnabled', settings.debuggingEnabled);
     _addSettingIfPresent('userAgent', settings.userAgent);
     return map;

packages/webview_flutter/lib/webview_flutter.dart

@@ -72,6 +72,9 @@ typedef NavigationDecision NavigationDelegate(NavigationRequest navigation);
 /// 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].
@@ -139,6 +142,7 @@ class WebView extends StatefulWidget {
     this.navigationDelegate,
     this.gestureRecognizers,
     this.onPageFinished,
+    this.onProgress,
     this.debuggingEnabled = false,
     this.userAgent,
     this.initialMediaPlaybackPolicy =
@@ -265,6 +269,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/).
@@ -371,6 +378,7 @@ WebSettings _webSettingsFromWidget(WebView widget) {
   return WebSettings(
     javascriptMode: widget.javascriptMode,
     hasNavigationDelegate: widget.navigationDelegate != null,
+    hasProgressTracking: widget.onProgress != null,
     debuggingEnabled: widget.debuggingEnabled,
     userAgent: WebSetting<String>.of(widget.userAgent),
   );
@@ -381,6 +389,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);
@@ -390,6 +399,7 @@ WebSettings _clearUnchangedWebSettings(
 
   JavascriptMode javascriptMode;
   bool hasNavigationDelegate;
+  bool hasProgressTracking;
   bool debuggingEnabled;
   WebSetting<String> userAgent = WebSetting<String>.absent();
   if (currentValue.javascriptMode != newValue.javascriptMode) {
@@ -398,6 +408,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;
   }
@@ -408,6 +421,7 @@ WebSettings _clearUnchangedWebSettings(
   return WebSettings(
     javascriptMode: javascriptMode,
     hasNavigationDelegate: hasNavigationDelegate,
+    hasProgressTracking: hasProgressTracking,
     debuggingEnabled: debuggingEnabled,
     userAgent: userAgent,
   );
@@ -454,6 +468,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.14+1
+version: 0.3.15
 author: Flutter Team <flutter-dev@googlegroups.com>
 homepage: https://github.com/flutter/plugins/tree/master/packages/webview_flutter