feat(android): Add navigationBarColor and navigationBarDividerColor options

Author: jdnichollsc

CHANGELOG.md

@@ -22,6 +22,16 @@ in case of vulnerabilities.
 
 ## [Unreleased]
 
+## [3.1.0] - 2021-06-27
+
+### Added
+- Add `navigationBarColor` and `navigationBarDividerColor` options by [@jdnichollsc](https://github.com/jdnichollsc).
+- Add try catch block to `Safari View Controller` and `ChromeTabs` to validate the url.
+
+### Fixed
+- Fix invalid scheme with iOS 14.5.
+- Fix `openAuth` crashed when going to be closed and then press the cancel button.
+
 ## [3.0.2] - 2020-02-01
 ### Fixed
 - Fix wrong param passed to parseColor method by [@ronalson](https://github.com/ronalson) ([#56](https://github.com/proyecto26/nativescript-inappbrowser/pull/56)).
@@ -87,7 +97,8 @@ in case of vulnerabilities.
 - Methods to open and close external urls to authenticate the user **(openAuth, closeAuth)** using deep linking.
 - `isAvailable` method to detect if the device supports the plugin.
 
-[Unreleased]: https://github.com/proyecto26/nativescript-inappbrowser/compare/v3.0.2...HEAD
+[Unreleased]: https://github.com/proyecto26/nativescript-inappbrowser/compare/v3.1.0...HEAD
+[3.1.0]: https://github.com/proyecto26/nativescript-inappbrowser/compare/v3.0.2...v3.1.0
 [3.0.2]: https://github.com/proyecto26/nativescript-inappbrowser/compare/v3.0.1...v3.0.2
 [3.0.1]: https://github.com/proyecto26/nativescript-inappbrowser/compare/v3.0.0...v3.0.1
 [3.0.0]: https://github.com/proyecto26/nativescript-inappbrowser/compare/v2.3.0...v3.0.0

README.md

@@ -36,13 +36,52 @@
   <img width="400px" src="https://github.com/proyecto26/nativescript-inappbrowser/blob/develop/img/inappbrowser.png?raw=true">
 </p>
 
+## Who is using InAppBrowser?
+
+Do you want to see this package in action? Check these awesome projects, yay! 🎉
+- [Oxycar](https://oxycar.com) - Offers innovative ways to facilitate home-work journeys.
+- [Pegus Digital](https://pegus.digital/) - Your innovation partner in digital product development.
+
+Share your awesome project [here](hhttps://github.com/proyecto26/nativescript-inappbrowser/issues/49)! ❤️
+
 ## Getting started
 
 ```javascript
 tns plugin add nativescript-inappbrowser
 ```
 
+### Manual installation
+
+- **Android Platform with Android Support:**
 
+  Modify your **android/build.gradle** configuration:
+  ```
+  buildscript {
+    ext {
+      buildToolsVersion = "28.0.3"
+      minSdkVersion = 16
+      compileSdkVersion = 28
+      targetSdkVersion = 28
+      // Only using Android Support libraries
+      supportLibVersion = "28.0.0"
+    }
+  ```
+
+- **Android Platform with AndroidX:**
+
+  Modify your **android/build.gradle** configuration:
+  ```
+  buildscript {
+    ext {
+      buildToolsVersion = "28.0.3"
+      minSdkVersion = 16
+      compileSdkVersion = 28
+      targetSdkVersion = 28
+      // Remove 'supportLibVersion' property and put specific versions for AndroidX libraries
+      androidXBrowser = "1.0.0"
+      // Put here other AndroidX dependencies
+    }
+  ```
 
 ## Usage
 
@@ -75,6 +114,8 @@ Property       | Description
 `showTitle` (Boolean)   | Sets whether the title should be shown in the custom tab. [`true`/`false`]
 `toolbarColor` (String)           | Sets the toolbar color. [`gray`/`#808080`]
 `secondaryToolbarColor` (String)  | Sets the color of the secondary toolbar. [`white`/`#FFFFFF`]
+`navigationBarColor` (String)     | Sets the navigation bar color. [`gray`/`#808080`]
+`navigationBarDividerColor` (String) | Sets the navigation bar divider color.  [`white`/`#FFFFFF`]
 `enableUrlBarHiding` (Boolean)    | Enables the url bar to hide as the user scrolls down on the page. [`true`/`false`]
 `enableDefaultShare` (Boolean)    | Adds a default share item to the menu. [`true`/`false`]
 `animations` (Object)             | Sets the start and exit animations. [`{ startEnter, startExit, endEnter, endExit }`]
@@ -93,7 +134,7 @@ import { InAppBrowser } from 'nativescript-inappbrowser';
 ...
   openLink = async () => {
     try {
-      const url = 'https://www.google.com'
+      const url = 'https://www.proyecto26.com'
       if (await InAppBrowser.isAvailable()) {
         const result = await InAppBrowser.open(url, {
           // iOS Properties
@@ -110,6 +151,8 @@ import { InAppBrowser } from 'nativescript-inappbrowser';
           showTitle: true,
           toolbarColor: '#6200EE',
           secondaryToolbarColor: 'black',
+          navigationBarColor: 'black',
+          navigationBarDividerColor: 'white',
           enableUrlBarHiding: true,
           enableDefaultShare: true,
           forceCloseOnRedirection: false,
@@ -156,12 +199,16 @@ define your app scheme and replace `my-scheme` and `my-host` with your info.
 
 - Enable deep linking (Android) - **[AndroidManifest.xml](https://github.com/proyecto26/nativescript-inappbrowser/blob/master/demo/app/App_Resources/Android/src/main/AndroidManifest.xml#L41)**
 ```
-<intent-filter>
-    <action android:name="android.intent.action.VIEW" />
-    <category android:name="android.intent.category.DEFAULT" />
-    <category android:name="android.intent.category.BROWSABLE" />
-    <data android:scheme="my-scheme" android:host="my-host" />
-</intent-filter>
+<activity
+  ...
+  android:launchMode="singleTask">
+  <intent-filter>
+      <action android:name="android.intent.action.VIEW" />
+      <category android:name="android.intent.category.DEFAULT" />
+      <category android:name="android.intent.category.BROWSABLE" />
+      <data android:scheme="my-scheme" android:host="my-host" android:pathPrefix="" />
+  </intent-filter>
+</activity>
 ```
 
 - Enable deep linking (iOS) - **[Info.plist](https://github.com/proyecto26/nativescript-inappbrowser/blob/master/demo/app/App_Resources/iOS/Info.plist#L21)**
@@ -217,13 +264,17 @@ import { getDeepLink } from './utilities';
           }
         })
       } else Utils.openUrl(url)
-    } catch (error) {
+    } catch {
       Utils.openUrl(url)
     }
   }
 ...
 ```
 
+### StatusBar
+
+The StatusBar will keep the last one provided in your app. So if the StatusBar is `dark-content` before you open the browser this will keep it.
+
 ### Authentication
 
 Using in-app browser tabs (like SFAuthenticationSession/ASWebAuthenticationSession and Android Custom Tabs) where available. Embedded user-agents, known as web-views (like UIWebView and WKWebView), are explicitly not supported due to the usability and security reasons documented in [Section 8.12 of RFC 8252](https://tools.ietf.org/html/rfc8252#section-8.12).

demo/app/App_Resources/iOS/Podfile

@@ -0,0 +1,7 @@
+post_install do |installer|
+  installer.pods_project.targets.each do |target|
+    target.build_configurations.each do |config|
+      config.build_settings.delete 'IPHONEOS_DEPLOYMENT_TARGET'
+    end
+  end
+end

demo/app/App_Resources/iOS/build.xcconfig

@@ -1,7 +1,9 @@
 // You can add custom settings here
 // for example you can uncomment the following line to force distribution code signing
-// CODE_SIGN_IDENTITY = iPhone Distribution 
+// CODE_SIGN_IDENTITY = iPhone Distribution
 // To build for device with XCode you need to specify your development team.
 // DEVELOPMENT_TEAM = YOUR_TEAM_ID;
 ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;
+
+VALIDATE_WORKSPACE = YES;

demo/app/home/home-view-model.ts

@@ -9,7 +9,7 @@ export class HelloWorldModel extends Observable {
     super();
 
     // Initialize default values.
-    this._url = 'https://www.google.com';
+    this._url = 'https://www.proyecto26.com';
   }
 
   get url(): string {
@@ -42,6 +42,8 @@ export class HelloWorldModel extends Observable {
           showTitle: true,
           toolbarColor: '#6200EE',
           secondaryToolbarColor: 'black',
+          navigationBarColor: 'black',
+          navigationBarDividerColor: 'white',
           enableUrlBarHiding: true,
           enableDefaultShare: true,
           forceCloseOnRedirection: true,

src/ChromeTabsManagerActivity.ts

@@ -5,11 +5,13 @@ import Bundle = android.os.Bundle;
 import { Observable } from '@nativescript/core';
 import { BROWSER_TYPES } from './InAppBrowser.common';
 import { DISMISSED_EVENT } from './utils.android';
+import { log } from './utils.common';
 
 
 export class ChromeTabsEvent extends Observable {
-  public message: String;
-  public resultType: String;
+  public message: string;
+  public resultType: string;
+  public isError: boolean
 }
 
 export const BROWSER_ACTIVITY_EVENTS = new ChromeTabsEvent();
@@ -18,6 +20,16 @@ const KEY_BROWSER_INTENT = 'browserIntent';
 const BROWSER_RESULT_TYPE = 'browserResultType';
 const DEFAULT_RESULT_TYPE = BROWSER_TYPES.DISMISS;
 
+const notifyMessage = (message: string, resultType: BROWSER_TYPES, isError = false) => {
+  BROWSER_ACTIVITY_EVENTS.set('message', message);
+  BROWSER_ACTIVITY_EVENTS.set('resultType', resultType);
+  BROWSER_ACTIVITY_EVENTS.notify({
+    eventName: DISMISSED_EVENT,
+    object: BROWSER_ACTIVITY_EVENTS,
+    isError
+  });
+};
+
 /**
  * Manages the custom chrome tabs intent by detecting when it is dismissed by the user and allowing
  * to close it programmatically when needed.
@@ -34,21 +46,27 @@ export class ChromeTabsManagerActivity extends android.app.Activity {
   }
 
   public onCreate(savedInstanceState?: Bundle): void {
-    super.onCreate(savedInstanceState);
-
-    // This activity gets opened in 2 different ways. If the extra KEY_BROWSER_INTENT is present we
-    // start that intent and if it is not it means this activity was started with FLAG_ACTIVITY_CLEAR_TOP
-    // in order to close the intent that was started previously so we just close this.
-    if (
-      this.getIntent().hasExtra(KEY_BROWSER_INTENT)
-      && (!savedInstanceState || !savedInstanceState.getString(BROWSER_RESULT_TYPE))
-    ) {
-      const browserIntent = <Intent>this.getIntent().getParcelableExtra(KEY_BROWSER_INTENT);
-      browserIntent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
-      this.startActivity(browserIntent);
-      this.resultType = DEFAULT_RESULT_TYPE;
-    } else {
+    try {
+      super.onCreate(savedInstanceState);
+
+      // This activity gets opened in 2 different ways. If the extra KEY_BROWSER_INTENT is present we
+      // start that intent and if it is not it means this activity was started with FLAG_ACTIVITY_CLEAR_TOP
+      // in order to close the intent that was started previously so we just close this.
+      if (
+        this.getIntent().hasExtra(KEY_BROWSER_INTENT)
+        && (!savedInstanceState || !savedInstanceState.getString(BROWSER_RESULT_TYPE))
+      ) {
+        const browserIntent = <Intent>this.getIntent().getParcelableExtra(KEY_BROWSER_INTENT);
+        browserIntent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
+        this.startActivity(browserIntent);
+        this.resultType = DEFAULT_RESULT_TYPE;
+      } else {
+        this.finish();
+      }
+    } catch (error) {
+      notifyMessage('Unable to open url.', BROWSER_TYPES.CANCEL, true);
       this.finish();
+      log(`InAppBrowser: ${error}`);
     }
   }
 
@@ -70,18 +88,12 @@ export class ChromeTabsManagerActivity extends android.app.Activity {
     if (this.resultType) {
       switch (this.resultType) {
         case BROWSER_TYPES.CANCEL:
-          BROWSER_ACTIVITY_EVENTS.set('message', 'chrome tabs activity closed');
-          BROWSER_ACTIVITY_EVENTS.set('resultType', this.resultType);
+          notifyMessage('chrome tabs activity closed', this.resultType);
           break;
         default:
-          BROWSER_ACTIVITY_EVENTS.set('message', 'chrome tabs activity destroyed');
-          BROWSER_ACTIVITY_EVENTS.set('resultType', DEFAULT_RESULT_TYPE);
+          notifyMessage('chrome tabs activity destroyed', DEFAULT_RESULT_TYPE);
           break;
       }
-      BROWSER_ACTIVITY_EVENTS.notify({
-        eventName: DISMISSED_EVENT,
-        object: BROWSER_ACTIVITY_EVENTS
-      });
       this.resultType = null;
     }
     super.onDestroy();