Merge pull request #62 from ionic-team/feat/RMET-4216/add-gesture-navigation

OS-ruimoreiramendes · web-flow · commit 6459bb362d80 · 2025-06-17T17:11:49.000+01:00
feat(ios): add allowsBackForwardNavigationGestures
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## Unreleased
+
+### Features
+
+* Added support for back and forward swipe navigation gestures in `WKWebView` via the `allowsBackForwardNavigationGestures` option. (for openInWebView option only) ([35ab447](https://github.com/ionic-team/capacitor-os-inappbrowser/commit/35ab44790eb98b2d0d748c130642b321e9dc1156))
+
 # [2.1.0](https://github.com/ionic-team/capacitor-os-inappbrowser/compare/v2.0.1...v2.1.0) (2025-04-15)
 
 ### Features
diff --git a/CapacitorInappbrowser.podspec b/CapacitorInappbrowser.podspec
@@ -12,7 +12,7 @@ Pod::Spec.new do |s|
   s.source = { :git => package['repository']['url'], :tag => s.version.to_s }
   s.source_files = 'ios/Sources/InAppBrowserPlugin/*.{swift,h,m,c,cc,mm,cpp}'
   s.ios.deployment_target  = '14.0'
-  s.dependency 'OSInAppBrowserLib', spec='~> 2.0'
+  s.dependency 'OSInAppBrowserLib', spec='~> 2.0.1'
   s.dependency 'Capacitor'
   s.swift_version = '5.1'
 end
diff --git a/README.md b/README.md
@@ -242,14 +242,15 @@ Defines the options for opening a URL in the web view.
 
 #### iOSWebViewOptions
 
-| Prop                               | Type                                                  | Description                                                                                                                                                                                                    |
-| ---------------------------------- | ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`allowOverScroll`**              | <code>boolean</code>                                  | Turns on the Web View bounce property.                                                                                                                                                                         |
-| **`enableViewportScale`**          | <code>boolean</code>                                  | Prevents viewport scaling through a meta tag.                                                                                                                                                                  |
-| **`allowInLineMediaPlayback`**     | <code>boolean</code>                                  | Allows in-line HTML5 media playback, displaying within the browser window rather than a device-specific playback interface. Note: The HTML's video element must also include the webkit-playsinline attribute. |
-| **`surpressIncrementalRendering`** | <code>boolean</code>                                  | Waits until all new view content is received before being rendered.                                                                                                                                            |
-| **`viewStyle`**                    | <code><a href="#iosviewstyle">iOSViewStyle</a></code> | Sets the presentation style of the Web View.                                                                                                                                                                   |
-| **`animationEffect`**              | <code><a href="#iosanimation">iOSAnimation</a></code> | Sets the transition style of the Web View.                                                                                                                                                                     |
+| Prop                                      | Type                                                  | Description                                                                                                                                                                                                    |
+| ----------------------------------------- | ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`allowOverScroll`**                     | <code>boolean</code>                                  | Turns on the Web View bounce property.                                                                                                                                                                         |
+| **`enableViewportScale`**                 | <code>boolean</code>                                  | Prevents viewport scaling through a meta tag.                                                                                                                                                                  |
+| **`allowInLineMediaPlayback`**            | <code>boolean</code>                                  | Allows in-line HTML5 media playback, displaying within the browser window rather than a device-specific playback interface. Note: The HTML's video element must also include the webkit-playsinline attribute. |
+| **`surpressIncrementalRendering`**        | <code>boolean</code>                                  | Waits until all new view content is received before being rendered.                                                                                                                                            |
+| **`viewStyle`**                           | <code><a href="#iosviewstyle">iOSViewStyle</a></code> | Sets the presentation style of the Web View.                                                                                                                                                                   |
+| **`animationEffect`**                     | <code><a href="#iosanimation">iOSAnimation</a></code> | Sets the transition style of the Web View.                                                                                                                                                                     |
+| **`allowsBackForwardNavigationGestures`** | <code>boolean</code>                                  | Enables back and forward swipe gestures in the Web View.                                                                                                                                                       |
 
 
 #### OpenInSystemBrowserParameterModel
diff --git a/example-app/package-lock.json b/example-app/package-lock.json
diff --git a/example-app/src/pages/Home.tsx b/example-app/src/pages/Home.tsx
@@ -86,7 +86,8 @@ const Home: React.FC = () => {
           allowInLineMediaPlayback: true,
           surpressIncrementalRendering: true,
           viewStyle: iOSViewStyle.PAGE_SHEET,
-          animationEffect: iOSAnimation.CROSS_DISSOLVE
+          animationEffect: iOSAnimation.CROSS_DISSOLVE,
+          allowsBackForwardNavigationGestures: true
         }
       }
     });
@@ -116,7 +117,8 @@ const Home: React.FC = () => {
           allowInLineMediaPlayback: true,
           surpressIncrementalRendering: true,
           viewStyle: iOSViewStyle.PAGE_SHEET,
-          animationEffect: iOSAnimation.CROSS_DISSOLVE
+          animationEffect: iOSAnimation.CROSS_DISSOLVE,
+          allowsBackForwardNavigationGestures: true
         }
       }
     });
diff --git a/ios/Sources/InAppBrowserPlugin/OSInAppBrowserWebViewModel.swift b/ios/Sources/InAppBrowserPlugin/OSInAppBrowserWebViewModel.swift
@@ -9,6 +9,7 @@ struct OSInAppBrowserWebViewModel: Decodable {
         let surpressIncrementalRendering: Bool
         let viewStyle: OSIABViewStyle
         let animationEffect: OSIABAnimationEffect
+        let allowsBackForwardNavigationGestures: Bool
 
         enum CodingKeys: CodingKey {
             case allowOverScroll
@@ -17,6 +18,7 @@ struct OSInAppBrowserWebViewModel: Decodable {
             case surpressIncrementalRendering
             case viewStyle
             case animationEffect
+            case allowsBackForwardNavigationGestures
         }
 
         init(from decoder: Decoder) throws {
@@ -31,6 +33,7 @@ struct OSInAppBrowserWebViewModel: Decodable {
             self.surpressIncrementalRendering = try container.decode(Bool.self, forKey: .surpressIncrementalRendering)
             self.viewStyle = .init(viewStyleValue)
             self.animationEffect = .init(animationValue)
+            self.allowsBackForwardNavigationGestures = try container.decode(Bool.self, forKey: .allowsBackForwardNavigationGestures)
         }
     }
 
@@ -98,7 +101,8 @@ extension OSInAppBrowserWebViewModel {
             surpressIncrementalRendering: self.iOS.surpressIncrementalRendering,
             viewStyle: self.iOS.viewStyle,
             animationEffect: self.iOS.animationEffect,
-            customUserAgent: self.customWebViewUserAgent
+            customUserAgent: self.customWebViewUserAgent,
+            allowsBackForwardNavigationGestures: self.iOS.allowsBackForwardNavigationGestures
         )
     }
 }
diff --git a/src/defaults.ts b/src/defaults.ts
@@ -28,6 +28,7 @@ export const DefaultiOSWebViewOptions: iOSWebViewOptions = {
 
   viewStyle: iOSViewStyle.FULL_SCREEN,
   animationEffect: iOSAnimation.COVER_VERTICAL,
+  allowsBackForwardNavigationGestures: true,
 };
 
 export const DefaultWebViewOptions: WebViewOptions = {
diff --git a/src/definitions.ts b/src/definitions.ts
@@ -76,6 +76,9 @@ export interface iOSWebViewOptions {
   viewStyle: iOSViewStyle;
   /** Sets the transition style of the Web View. */
   animationEffect: iOSAnimation;
+
+  /** Enables back and forward swipe gestures in the Web View. */
+  allowsBackForwardNavigationGestures: boolean;
 }
 
 export interface AndroidWebViewOptions {

Original file line number	Diff line number	Diff line change
`@@ -86,7 +86,8 @@ const Home: React.FC = () => {`
`86`	`86`	`allowInLineMediaPlayback: true,`
`87`	`87`	`surpressIncrementalRendering: true,`
`88`	`88`	`viewStyle: iOSViewStyle.PAGE_SHEET,`
`89`		`- animationEffect: iOSAnimation.CROSS_DISSOLVE`
	`89`	`+ animationEffect: iOSAnimation.CROSS_DISSOLVE,`
	`90`	`+ allowsBackForwardNavigationGestures: true`
`90`	`91`	`}`
`91`	`92`	`}`
`92`	`93`	`});`
`@@ -116,7 +117,8 @@ const Home: React.FC = () => {`
`116`	`117`	`allowInLineMediaPlayback: true,`
`117`	`118`	`surpressIncrementalRendering: true,`
`118`	`119`	`viewStyle: iOSViewStyle.PAGE_SHEET,`
`119`		`- animationEffect: iOSAnimation.CROSS_DISSOLVE`
	`120`	`+ animationEffect: iOSAnimation.CROSS_DISSOLVE,`
	`121`	`+ allowsBackForwardNavigationGestures: true`
`120`	`122`	`}`
`121`	`123`	`}`
`122`	`124`	`});`
Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,7 @@ struct OSInAppBrowserWebViewModel: Decodable {`
`9`	`9`	`let surpressIncrementalRendering: Bool`
`10`	`10`	`let viewStyle: OSIABViewStyle`
`11`	`11`	`let animationEffect: OSIABAnimationEffect`
	`12`	`+ let allowsBackForwardNavigationGestures: Bool`
`12`	`13`
`13`	`14`	`enum CodingKeys: CodingKey {`
`14`	`15`	`case allowOverScroll`
`@@ -17,6 +18,7 @@ struct OSInAppBrowserWebViewModel: Decodable {`
`17`	`18`	`case surpressIncrementalRendering`
`18`	`19`	`case viewStyle`
`19`	`20`	`case animationEffect`
	`21`	`+ case allowsBackForwardNavigationGestures`
`20`	`22`	`}`
`21`	`23`
`22`	`24`	`init(from decoder: Decoder) throws {`
`@@ -31,6 +33,7 @@ struct OSInAppBrowserWebViewModel: Decodable {`
`31`	`33`	`self.surpressIncrementalRendering = try container.decode(Bool.self, forKey: .surpressIncrementalRendering)`
`32`	`34`	`self.viewStyle = .init(viewStyleValue)`
`33`	`35`	`self.animationEffect = .init(animationValue)`
	`36`	`+ self.allowsBackForwardNavigationGestures = try container.decode(Bool.self, forKey: .allowsBackForwardNavigationGestures)`
`34`	`37`	`}`
`35`	`38`	`}`
`36`	`39`
`@@ -98,7 +101,8 @@ extension OSInAppBrowserWebViewModel {`
`98`	`101`	`surpressIncrementalRendering: self.iOS.surpressIncrementalRendering,`
`99`	`102`	`viewStyle: self.iOS.viewStyle,`
`100`	`103`	`animationEffect: self.iOS.animationEffect,`
`101`		`- customUserAgent: self.customWebViewUserAgent`
	`104`	`+ customUserAgent: self.customWebViewUserAgent,`
	`105`	`+ allowsBackForwardNavigationGestures: self.iOS.allowsBackForwardNavigationGestures`
`102`	`106`	`)`
`103`	`107`	`}`
`104`	`108`	`}`
Original file line number	Diff line number	Diff line change
`@@ -76,6 +76,9 @@ export interface iOSWebViewOptions {`
`76`	`76`	`viewStyle: iOSViewStyle;`
`77`	`77`	`/** Sets the transition style of the Web View. */`
`78`	`78`	`animationEffect: iOSAnimation;`
	`79`	`+`
	`80`	`+ /** Enables back and forward swipe gestures in the Web View. */`
	`81`	`+ allowsBackForwardNavigationGestures: boolean;`
`79`	`82`	`}`
`80`	`83`
`81`	`84`	`export interface AndroidWebViewOptions {`