Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebViews in Flutter - Does it really work?

WebViews in Flutter - Does it really work?

Talk given at Flutter Berlin meetup
https://www.meetup.com/flutter-berlin/events/261016228/

Lara Martín

May 14, 2019
Tweet

More Decks by Lara Martín

Other Decks in Programming

Transcript

  1. WebViews in Flutter
    Lara Martín
    @lariki
    Does it really work?

    View Slide

  2. What is a WebView?

    View Slide

  3. Why we need WebViews?
    Perform social login
    Show static content (e.g. FAQ )
    Payment confirmation
    Use cases
    Making an app that is just a web
    Avoid for

    View Slide

  4. https:/
    /pub.dev/packages/webview_flutter

    View Slide

  5. Setup
    # pubspec.yaml
    dependencies:
    flutter:
    sdk: flutter
    webview_flutter: ^0.3.6

    View Slide

  6. Implementation
    • Not reimplemented in Dart!
    • Uses native WebView
    • iOS: WKWebView
    • Android: android.webkit.WebView
    • But is it a Widget?
    • The plugin creates the native WebView
    • And renders it in Flutter!

    View Slide

  7. Working Example

    View Slide

  8. Rendering the Android
    WebView

    View Slide

  9. Flutter Inspector

    View Slide

  10. Flutter Inspector

    View Slide

  11. Flutter Inspector

    View Slide

  12. WebView Rendering on Android

    View Slide

  13. WebView
    WebView Rendering on Android

    View Slide

  14. AndroidView
    WebView
    child
    WebView Rendering on Android

    View Slide

  15. WebView Rendering on Android
    AndroidView
    WebView WebViewFlutterPlugin
    child
    requires
    … WebViewFactory
    registers

    View Slide

  16. AndroidView
    WebView
    FlutterWebView :
    PlatformView
    WebView
    contains
    creates
    child

    WebView Rendering on Android
    WebViewFlutterPlugin
    requires
    WebViewFactory
    registers

    View Slide

  17. AndroidView
    WebView
    FlutterWebView :
    PlatformView
    WebView
    PlatformViewController
    contains
    creates
    renders
    Surface
    child

    in
    WebView Rendering on Android
    WebViewFlutterPlugin
    requires
    WebViewFactory
    registers

    View Slide

  18. AndroidView
    _AndroidPlatformView
    RenderAndroidView :
    RenderBox
    WebView
    FlutterWebView :
    PlatformView
    WebView
    PlatformViewController
    contains
    creates
    renders
    Surface
    contains
    contains
    child

    in
    WebView Rendering on Android
    WebViewFlutterPlugin
    requires
    WebViewFactory
    registers

    View Slide

  19. AndroidView
    _AndroidPlatformView
    RenderAndroidView :
    RenderBox
    WebView
    FlutterWebView :
    PlatformView
    WebView
    PlatformViewController
    contains
    creates
    renders
    Surface
    contains
    contains
    child

    in
    WebView Rendering on Android
    WebViewFlutterPlugin
    requires
    WebViewFactory
    registers
    Surface ID

    View Slide

  20. Rendering the iOS
    WKWebView

    View Slide

  21. WebView Rendering on iOS
    • Similar to Android
    • RenderUiKitView will render a surface created in the
    PlatformViewIOS
    • Passes an ID

    View Slide

  22. WebView Widget

    View Slide

  23. WebView Widget
    • initialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels

    View Slide

  24. WebView Widget
    • initialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels

    View Slide

  25. WebView Widget: initialUrl
    WebView( ),

    View Slide

  26. WebView Widget: initialUrl
    WebView(
    initialUrl: “https://www.flutter.dev/",
    ),

    View Slide

  27. WebView Widget
    • initialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels

    View Slide

  28. WebView Widget: javaScriptMode
    WebView(
    initialUrl: …
    javascriptMode: JavascriptMode.unrestricted,
    ),

    View Slide

  29. WebView Widget
    • initialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels

    View Slide

  30. WebView Widget: onWebViewCreated
    WebView(
    initialUrl: …
    javascriptMode: …
    onWebViewCreated: (WebViewController controller) {
    _controller = controller;
    },
    ),

    View Slide

  31. WebViewController
    • loadUrl(String url)
    • currentUrl()
    • canGoBack()
    • canGoForward()
    • goBack()
    • goForward()
    • reload()
    • clearCache()

    View Slide

  32. WebViewController
    • loadUrl(String url)
    • currentUrl()
    • canGoBack()
    • canGoForward()
    • goBack()
    • goForward()
    • reload()
    • clearCache()

    View Slide

  33. WebViewController: reload
    onPressed: () async {
    await _controller.reload();
    }

    View Slide

  34. WebView Widget
    • initialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels

    View Slide

  35. WebView Widget: onPageFinished
    WebView(
    initialUrl: …
    javascriptMode: …
    onWebViewCreated: …
    onPageFinished: (url) {
    // use the URL
    }
    )

    View Slide

  36. WebView Widget
    • initialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels
    The Power of WebViews in Flutter, by Emily Fortuna
    https:/
    /medium.com/flutter-io/the-power-of-
    webviews-in-flutter-a56234b57df2

    View Slide

  37. WebView Widget
    • initialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels

    View Slide

  38. NavigationDelegate
    typedef NavigationDecision NavigationDelegate(NavigationRequest n);

    View Slide

  39. NavigationDelegate
    WebView(
    navigationDelegate: (request) {
    bool isHost = request.url.startsWith(
    “https://flutter.dev”);
    if (isHost)
    return NavigationDecision.navigate;
    else
    return NavigationDecision.prevent;
    }
    ),

    View Slide

  40. WebView Widget
    • initialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels

    View Slide

  41. javaScriptChannels
    WebView(
    javascriptChannels: {_channel},
    ),

    View Slide

  42. javaScriptChannels
    var _channel = JavascriptChannel(
    name: 'LaraDemo',
    onMessageReceived: (JavascriptMessage message) {
    print(message.message);
    });
    WebView(
    javascriptChannels: {_channel},
    ),

    View Slide

  43. javaScriptChannels
    var _channel = JavascriptChannel(
    name: 'LaraDemo',
    onMessageReceived: (JavascriptMessage message) {
    print(message.message);
    });
    Flutter side
    <br/>LaraDemo.postMessage('Hello');<br/>
    HTML side

    View Slide

  44. Limitations

    View Slide

  45. Input Fields
    https:/
    /github.com/flutter/flutter/issues/19718

    View Slide

  46. Text Selection
    https:/
    /github.com/flutter/flutter/issues/24584

    View Slide

  47. Performance
    AndroidView is costly

    View Slide

  48. What’s next

    View Slide

  49. Loading an HTML string
    https:/
    /github.com/flutter/plugins/pull/1312

    View Slide

  50. Setting a custom UserAgent
    https:/
    /github.com/flutter/plugins/pull/968

    View Slide

  51. Page loaded correctly
    https:/
    /github.com/flutter/plugins/pull/1389

    View Slide

  52. Contributing

    View Slide

  53. Contributing

    View Slide

  54. Flutter is open-source.
    Submit a pull request!

    View Slide

  55. Thanks.
    @lariki
    Lara Martín

    View Slide