$30 off During Our Annual Pro Sale. View Details »

WebViews in Flutter - Does it really work?

WebViews in Flutter - Does it really work?

Talk given at Flutter London meetup
https://www.meetup.com/FlutterLDN/events/262574231/

Lara Martín

July 15, 2019
Tweet

More Decks by Lara Martín

Other Decks in Programming

Transcript

  1. WebViews in Flutter
    Does it really work?
    Lara Martín
    @Lariki
    Flutter/Dart GDE - Android Developer

    View Slide

  2. What is a
    WebView?

    View Slide

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

    View Slide

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

    View Slide

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

    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. Rendering the
    Android WebView

    View Slide

  8. Working Example

    View Slide

  9. Flutter Inspector

    View Slide

  10. Flutter Inspector

    View Slide

  11. Flutter Inspector

    View Slide

  12. WebView Rendering on Android
    AndroidView
    _AndroidPlatformView
    RenderAndroidView :
    RenderBox
    WebView
    renders
    contains

    in
    requires
    WebViewFactory
    surface ID
    contains
    child
    PlatformViewController
    FlutterWebView :
    PlatformView
    creates
    WebViewFlutterPlugin
    registers
    Surface
    WebView
    contains

    View Slide

  13. Rendering the iOS
    WKWebView

    View Slide

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

    View Slide

  15. WebView Widget

    View Slide

  16. WebView Widget
    • InitialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels

    View Slide

  17. WebView Widget
    • InitialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels

    View Slide

  18. WebView Widget: initialUrl
    WebView(),

    View Slide

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

    View Slide

  20. WebView Widget
    • InitialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels

    View Slide

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

    View Slide

  22. WebView Widget
    • InitialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  30. 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

  31. WebView Widget
    • InitialUrl
    • javaScriptMode
    • onWebViewCreated
    • onPageFinished
    • gestureRecognizers
    • navigationDelegate
    • javaScriptChannels

    View Slide

  32. WebView Widget: NavigationDelegate
    typedef NavigationDecision NavigationDelegate(NavigationRequest n);

    View Slide

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

    View Slide

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

    View Slide

  35. WebView Widget: javaScriptChannels
    WebView(
    javascriptChannels: {_channel},
    );

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  41. Limitations

    View Slide

  42. Input Fields
    https:/
    /github.com/flutter/flutter/issues/19718
    FIXED!-ish

    View Slide

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

    View Slide

  44. Performance
    AndroidView is costly

    View Slide

  45. What’s next

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  49. Community
    Plugin

    View Slide

  50. WebView community plugin
    https:/
    /pub.dev/packages/flutter_webview_plugin

    View Slide

  51. WebView community plugin
    MaterialApp(
    home: WebviewScaffold(
    url: url,
    appBar: AppBar(
    title: Text("community webview"),
    ),
    ),
    );

    View Slide

  52. WebView community plugin
    https:/
    /pub.dev/packages/flutter_webview_plugin
    deprecated?

    View Slide

  53. Contributing

    View Slide

  54. Contributing

    View Slide

  55. Contributing

    View Slide

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

    View Slide

  57. 57
    L a r a M a r t í n
    F l u t t e r / D a r t G D E 

    A n d r o i d D e v e l o p e r
    @ L a r i k i
    Thank You!

    View Slide