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 full-size slide

  2. What is a WebView?

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  7. Working Example

    View full-size slide

  8. Rendering the Android
    WebView

    View full-size slide

  9. Flutter Inspector

    View full-size slide

  10. Flutter Inspector

    View full-size slide

  11. Flutter Inspector

    View full-size slide

  12. WebView Rendering on Android

    View full-size slide

  13. WebView
    WebView Rendering on Android

    View full-size slide

  14. AndroidView
    WebView
    child
    WebView Rendering on Android

    View full-size slide

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

    View full-size slide

  16. AndroidView
    WebView
    FlutterWebView :
    PlatformView
    WebView
    contains
    creates
    child

    WebView Rendering on Android
    WebViewFlutterPlugin
    requires
    WebViewFactory
    registers

    View full-size slide

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

    in
    WebView Rendering on Android
    WebViewFlutterPlugin
    requires
    WebViewFactory
    registers

    View full-size 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 full-size 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 full-size slide

  20. Rendering the iOS
    WKWebView

    View full-size slide

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

    View full-size slide

  22. WebView Widget

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. WebView Widget: initialUrl
    WebView( ),

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  38. NavigationDelegate
    typedef NavigationDecision NavigationDelegate(NavigationRequest n);

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. Performance
    AndroidView is costly

    View full-size slide

  47. What’s next

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  51. Contributing

    View full-size slide

  52. Contributing

    View full-size slide

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

    View full-size slide

  54. Thanks.
    @lariki
    Lara Martín

    View full-size slide