Capacitor Inappbrowser not opening webview as page content

Capacitor
1

I’m trying to add a in app browser inside a page in my app project.
Using the InAppBrowser Capacitor Plugin API | Capacitor Documentation and the code as below I’m only able to see the page opening fullscreen or depending of the options it’s opening like an overlay moving the current app page to the back with the usual 3d effect. The goal is having the a web page opening in the content part of the app kepping the header and footer as it is independent of the content.

Anyone has the same issue or have any ideas what could be done to solve this ?

thanks in advance

await InAppBrowser.openInWebView({
        url: "https://google.com",
        options: {
          showURL: false,
          showToolbar: false,
          clearCache: false,
          clearSessionCache: false,
          mediaPlaybackRequiresUserAction: false,
          closeButtonText: '',
          toolbarPosition: ToolbarPosition.TOP,
          showNavigationButtons: false,
          leftToRight: false,
          customWebViewUserAgent: null,
          android: {
            allowZoom: false,
            hardwareBack: false,
            pauseMedia: false
          },
          iOS: {
            allowOverScroll: false,
            enableViewportScale: false,
            allowInLineMediaPlayback: false,
            surpressIncrementalRendering: false,
            viewStyle: iOSViewStyle.PAGE_SHEET,
            animationEffect: iOSAnimation.COVER_VERTICAL
          }
        }
      });
2

The InAppBrowser is meant to open full-screen as it’s a completely separate web browser/web view. I think the only way to open something inline between the header and footer would be to use an iframe. But, that can have it’s own problems and limitations.

2 Likes
3

Thank you very much! I thought that could be the case so I’m gonna test if the iframe behavior will cover the feature I’m working on.

4

Hmm… I also have this doubt!
And after some time trying different approaches for InAppBrowser started to think about iframe, but then I face problems with the communication of iframe to the application and inner links in the iframe page content :frowning:

As @landskron mentioned I also expected the InApp would render a external content inside the App scope.
so @twestrick, is there any difference between: InAppBrowser and Browser.open() from @capacitor/browser?

I am looking for some solution similar to this plugin for Flutter: https://inappwebview.dev/
They have a headless webview that does exactly what we need. If someone know a community package doing that, please let me know :wink:

5

I use @capacitor/browser and it does the same, opens in a separate browser overlay. InAppBrowser is a newer plugin. I am not sure why there are both now…lol. InAppBrowser appears to offer more flexibility so maybe it will at some point replace browser. The Capacitor team would have to clarify that.

1 Like