@capgo/capacitor-inappbrowser 8.7.2-beta.pr599.357.1 → 8.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -25,12 +25,10 @@ The official Capacitor Browser plugin has strict security limitations that preve
|
|
|
25
25
|
- **Camera and microphone access** within the browser context
|
|
26
26
|
- **URL change monitoring** for navigation tracking
|
|
27
27
|
- **Custom toolbars and UI** for branded experiences
|
|
28
|
-
- **
|
|
29
|
-
- **
|
|
30
|
-
- **Cookie, cache, and full browsing-data controls** for private or isolated sessions
|
|
31
|
-
- **Native proxy, download, and popup handling** for advanced embedded web apps
|
|
28
|
+
- **Cookie and cache management** for session control
|
|
29
|
+
- **Custom sizes** for extra control of the display position
|
|
32
30
|
|
|
33
|
-
Perfect for OAuth flows, embedded web apps,
|
|
31
|
+
Perfect for OAuth flows, embedded web apps, video calls, and any scenario requiring deep integration with web content.
|
|
34
32
|
|
|
35
33
|
## Documentation
|
|
36
34
|
|
|
@@ -76,82 +74,6 @@ import { InAppBrowser } from '@capgo/capacitor-inappbrowser';
|
|
|
76
74
|
InAppBrowser.open({ url: 'YOUR_URL' });
|
|
77
75
|
```
|
|
78
76
|
|
|
79
|
-
### Common use cases
|
|
80
|
-
|
|
81
|
-
#### Show Ionic UI over a live browser page
|
|
82
|
-
|
|
83
|
-
Use `toBack` when the native browser should stay visible behind your Ionic or Capacitor UI. This is useful for checkout overlays, payment confirmation panels, guided browser flows, or any flow where your app owns the controls while the web page remains loaded behind it.
|
|
84
|
-
|
|
85
|
-
```js
|
|
86
|
-
import { InAppBrowser } from '@capgo/capacitor-inappbrowser';
|
|
87
|
-
|
|
88
|
-
const { id } = await InAppBrowser.openWebView({
|
|
89
|
-
url: 'https://example.com/checkout',
|
|
90
|
-
toBack: true,
|
|
91
|
-
transparentBackground: true,
|
|
92
|
-
});
|
|
93
|
-
|
|
94
|
-
// If your overlay needs to interact with the page behind it, forward the gesture.
|
|
95
|
-
await InAppBrowser.dispatchInputEvent({
|
|
96
|
-
id,
|
|
97
|
-
type: 'click',
|
|
98
|
-
x: 160,
|
|
99
|
-
y: 420,
|
|
100
|
-
});
|
|
101
|
-
|
|
102
|
-
// Bring the browser back above the app when the native overlay is done.
|
|
103
|
-
await InAppBrowser.bringToFront({ id });
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
Make the app background transparent wherever the browser should be visible. `dispatchInputEvent()` supports click, touch, and scroll forwarding; coordinates are relative to the browser viewport.
|
|
107
|
-
|
|
108
|
-
#### Build a partial-screen browser or bottom sheet
|
|
109
|
-
|
|
110
|
-
Use `height`, `width`, `x`, and `y` for picture-in-picture views, browser sheets, or layouts where the user should keep interacting with the Ionic app around the browser. When the WebView does not cover the full screen, touches outside the browser frame pass through to the underlying Capacitor WebView on Android and iOS.
|
|
111
|
-
|
|
112
|
-
```js
|
|
113
|
-
const bottomGap = 200;
|
|
114
|
-
|
|
115
|
-
const { id } = await InAppBrowser.openWebView({
|
|
116
|
-
url: 'https://example.com/offers',
|
|
117
|
-
height: window.innerHeight - bottomGap,
|
|
118
|
-
y: 0,
|
|
119
|
-
});
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
Use `updateDimensions()` to resize the browser while keeping the same page state, for example when expanding a mini browser into a larger sheet.
|
|
123
|
-
|
|
124
|
-
#### Keep checkout, auth, or support sessions private
|
|
125
|
-
|
|
126
|
-
Use `persistWebViewData: false` when a WebView must avoid persistent cookies, cache, local storage, IndexedDB, and other website data where the platform supports it. Use `clearAllBrowsingData()` when the app needs to wipe the default store and all opened managed WebViews.
|
|
127
|
-
|
|
128
|
-
```js
|
|
129
|
-
const { id } = await InAppBrowser.openWebView({
|
|
130
|
-
url: 'https://example.com/login',
|
|
131
|
-
persistWebViewData: false,
|
|
132
|
-
});
|
|
133
|
-
|
|
134
|
-
// Later, after logout or account switching:
|
|
135
|
-
await InAppBrowser.clearAllBrowsingData();
|
|
136
|
-
```
|
|
137
|
-
|
|
138
|
-
#### Keep multiple browser instances ready
|
|
139
|
-
|
|
140
|
-
Use `hidden`, `hide()`, and `show()` when you need to preload or preserve several WebViews without keeping them on screen. This keeps browser state available while the native modal is dismissed so it does not block touches in the app.
|
|
141
|
-
|
|
142
|
-
```js
|
|
143
|
-
const first = await InAppBrowser.openWebView({ url: 'https://example.com/a', hidden: true });
|
|
144
|
-
const second = await InAppBrowser.openWebView({ url: 'https://example.com/b', hidden: true });
|
|
145
|
-
|
|
146
|
-
await InAppBrowser.show({ id: first.id });
|
|
147
|
-
await InAppBrowser.hide({ id: first.id });
|
|
148
|
-
await InAppBrowser.show({ id: second.id });
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
#### Embed advanced web app flows
|
|
152
|
-
|
|
153
|
-
Use proxy rules and `handleDownloads` for web apps that need request control, file uploads, downloads, or controlled popup behavior inside the managed browser. Typical examples include document portals, support desks, payment pages, Google Pay flows on Android, and apps that need to keep `_blank` links inside the same managed WebView.
|
|
154
|
-
|
|
155
77
|
### Customize Chrome Custom Tab Appearance (Android)
|
|
156
78
|
|
|
157
79
|
The `open()` method launches a Chrome Custom Tab on Android. You can customize its appearance to blend with your app:
|
|
@@ -1382,7 +1382,6 @@ public class CapgoInAppBrowserPlugin: CAPPlugin, CAPBridgedPlugin {
|
|
|
1382
1382
|
containerView.backgroundColor = .clear
|
|
1383
1383
|
containerView.frame = UIScreen.main.bounds
|
|
1384
1384
|
containerView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
|
|
1385
|
-
containerView.passthroughView = self.bridge?.webView
|
|
1386
1385
|
|
|
1387
1386
|
let targetFrame = CustomWebViewFrameSupport.resolvedFrame(
|
|
1388
1387
|
width: width.map { CGFloat($0) },
|
|
@@ -756,62 +756,40 @@ open class WKWebViewController: UIViewController, WKScriptMessageHandler {
|
|
|
756
756
|
return windowScene?.statusBarManager?.statusBarFrame.height ?? 0
|
|
757
757
|
}
|
|
758
758
|
|
|
759
|
-
private func applyNavigationBarBackground(color: UIColor) {
|
|
760
|
-
guard let navigationBar = navigationController?.navigationBar else {
|
|
761
|
-
return
|
|
762
|
-
}
|
|
763
|
-
|
|
764
|
-
navigationBar.backgroundColor = color
|
|
765
|
-
navigationBar.barTintColor = color
|
|
766
|
-
navigationBar.isTranslucent = false
|
|
767
|
-
navigationBar.setBackgroundImage(UIImage(), for: .default)
|
|
768
|
-
navigationBar.shadowImage = UIImage()
|
|
769
|
-
navigationBar.setValue(true, forKey: "hidesShadow")
|
|
770
|
-
|
|
771
|
-
if #available(iOS 13.0, *) {
|
|
772
|
-
let appearance = UINavigationBarAppearance()
|
|
773
|
-
appearance.configureWithOpaqueBackground()
|
|
774
|
-
appearance.backgroundColor = color
|
|
775
|
-
appearance.backgroundEffect = nil
|
|
776
|
-
appearance.shadowColor = .clear
|
|
777
|
-
appearance.shadowImage = UIImage()
|
|
778
|
-
|
|
779
|
-
if let titleTextAttributes = navigationBar.titleTextAttributes {
|
|
780
|
-
appearance.titleTextAttributes = titleTextAttributes
|
|
781
|
-
}
|
|
782
|
-
if let largeTitleTextAttributes = navigationBar.largeTitleTextAttributes {
|
|
783
|
-
appearance.largeTitleTextAttributes = largeTitleTextAttributes
|
|
784
|
-
}
|
|
785
|
-
|
|
786
|
-
navigationBar.standardAppearance = appearance
|
|
787
|
-
navigationBar.compactAppearance = appearance
|
|
788
|
-
navigationBar.scrollEdgeAppearance = appearance
|
|
789
|
-
navigationBar.compactScrollEdgeAppearance = appearance
|
|
790
|
-
}
|
|
791
|
-
}
|
|
792
|
-
|
|
793
759
|
// Make status bar background with colored view underneath
|
|
794
760
|
open func setupStatusBarBackground(color: UIColor) {
|
|
761
|
+
// Remove any existing status bar view
|
|
795
762
|
statusBarBackgroundView?.removeFromSuperview()
|
|
763
|
+
|
|
764
|
+
// Create a new view to cover both status bar and navigation bar
|
|
796
765
|
statusBarBackgroundView = UIView()
|
|
797
766
|
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
}
|
|
803
|
-
navView.insertSubview(statusBarBackgroundView, at: 0)
|
|
804
|
-
statusBarBackgroundView.translatesAutoresizingMaskIntoConstraints = false
|
|
805
|
-
statusBarBackgroundView.backgroundColor = color
|
|
767
|
+
if let navView = navigationController?.view {
|
|
768
|
+
// Add to back of view hierarchy
|
|
769
|
+
navView.insertSubview(statusBarBackgroundView!, at: 0)
|
|
770
|
+
statusBarBackgroundView?.translatesAutoresizingMaskIntoConstraints = false
|
|
806
771
|
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
772
|
+
// Calculate total height - status bar + navigation bar
|
|
773
|
+
let navBarHeight = navigationController?.navigationBar.frame.height ?? 44
|
|
774
|
+
let totalHeight = (navigationController?.view.safeAreaInsets.top ?? CGFloat(0)) + navBarHeight
|
|
775
|
+
|
|
776
|
+
// Position from top of screen to bottom of navigation bar
|
|
777
|
+
NSLayoutConstraint.activate([
|
|
778
|
+
statusBarBackgroundView!.topAnchor.constraint(equalTo: navView.topAnchor),
|
|
779
|
+
statusBarBackgroundView!.leadingAnchor.constraint(equalTo: navView.leadingAnchor),
|
|
780
|
+
statusBarBackgroundView!.trailingAnchor.constraint(equalTo: navView.trailingAnchor),
|
|
781
|
+
statusBarBackgroundView!.heightAnchor.constraint(equalToConstant: totalHeight)
|
|
782
|
+
])
|
|
813
783
|
|
|
814
|
-
|
|
784
|
+
// Set background color
|
|
785
|
+
statusBarBackgroundView?.backgroundColor = color
|
|
786
|
+
|
|
787
|
+
// Make navigation bar transparent to show our view underneath
|
|
788
|
+
navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
|
|
789
|
+
navigationController?.navigationBar.shadowImage = UIImage()
|
|
790
|
+
navigationController?.navigationBar.isTranslucent = true
|
|
791
|
+
navigationController?.navigationBar.isTranslucent = true
|
|
792
|
+
}
|
|
815
793
|
}
|
|
816
794
|
|
|
817
795
|
// Override to use our custom status bar style
|
|
@@ -3266,7 +3244,6 @@ class PassThroughView: UIView {
|
|
|
3266
3244
|
}
|
|
3267
3245
|
}
|
|
3268
3246
|
weak var framedContentView: UIView?
|
|
3269
|
-
weak var passthroughView: UIView?
|
|
3270
3247
|
|
|
3271
3248
|
override func layoutSubviews() {
|
|
3272
3249
|
super.layoutSubviews()
|
|
@@ -3279,14 +3256,14 @@ class PassThroughView: UIView {
|
|
|
3279
3256
|
}
|
|
3280
3257
|
|
|
3281
3258
|
override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
|
|
3282
|
-
|
|
3283
|
-
|
|
3284
|
-
|
|
3259
|
+
// If we have a target frame and the touch is outside it, pass through
|
|
3260
|
+
if let frame = targetFrame {
|
|
3261
|
+
if !frame.contains(point) {
|
|
3262
|
+
return nil // Pass through to underlying views
|
|
3285
3263
|
}
|
|
3286
|
-
let convertedPoint = convert(point, to: passthroughView)
|
|
3287
|
-
return passthroughView.hitTest(convertedPoint, with: event)
|
|
3288
3264
|
}
|
|
3289
3265
|
|
|
3266
|
+
// Otherwise, handle normally
|
|
3290
3267
|
return super.hitTest(point, with: event)
|
|
3291
3268
|
}
|
|
3292
3269
|
}
|