InAppBrowser does not open Youtube Links Properly

[mattprado21]

I might have the same issue as @siranjeevimurugesan reported - https://github.com/apache/cordova-plugin-inappbrowser/issues/1002. And I have additional issue for iOS.

Case Description

My application uses InAppBrowser to open app links to my app. One of the links is a YouTube link (for ex. https://youtu.be/2Vv-BfVoq4g). Once the link clicked, it opens the InAppBrowser and opens the youtube video. On that page, we have this "Open App"(see image below) button displayed and that's where the issue occurs.

Here's a sample code of implementation cordova.InAppBrowser.open('https://youtu.be/2Vv-BfVoq4g', '_blank', 'location=yes,hideurlbar=yes,fullscreen=yes');

Android and iOS has different behavior, please check the details below.

Android

Current Behavior When clicked "Open App" button, it redirects to error page, similar to siranjeevimurugesan reported.(ex. error below) Webpage not available The webpage at intent://m.youtube.com/watch?v=2Vv-BfVoq4g&feature=mweb_c3_open_app_11268432&itc_campaign=mweb_c3_open_app_11268432&redirect_app_store_ios=1&app=desktop#Intent;package=com.google.android.youtube;scheme=vnd.youtube;launchFlags=268435456;end could not be loaded because: net::ERR_UNKNOWN_URL_SCHEME Evidence

Expected Output When clicked "Open App", it should redirect to YouTube app and its actual video.

iOS

1. When clicked "Open App", it redirects to App Store YouTube app instead of the Actual YouTube App and on the actual video. It does not redirect to actual video on the YouTube App. Also, when clicking the "Open App" button, it takes 8-10 seconds before it redirects to the App Store YouTube App.

Evidence Please don't mind the gray box at the screen as I have to hide some info https://github.com/apache/cordova-plugin-inappbrowser/assets/53552332/6284018b-65b4-4155-bcda-a9fdf0a392c5

Expected Output When clicked "Open App", it should redirect to YouTube app and its actual video.

Information

Command or Code

Environment, Platform, Device

Version information

Checklist

• [ ] I searched for existing GitHub issues
• [ ] I updated all Cordova tooling to most recent version
• [ ] I included all the necessary information above

[jcesarmobile]

can you provide a sample app?

[mattprado21]

@jcesarmobile Unfortunately, due to confidentiality reasons, I am unable to share the actual application with you. However, would a video demonstration of the application suffice?

[jcesarmobile]

No, a video doesn't suffice. A sample app doesn't need to be your real app, just an app with the minimal code to reproduce the issue.

[mattprado21]

@jcesarmobile Here is the sample app IPA File Sample Test App.zip

[jcesarmobile]

We ask for the source code, not an .ipa or .apk

[mattprado21]

@jcesarmobile Apologies, please check this 🙏 This is created using monaca. Sample App.zip

[jcesarmobile]

That's not the source code, it's a .app. And it can't be a monaca app because they can only be built in monaca servers.

[mattprado21]

@jcesarmobile Here is the Code GitHub Repo - https://github.com/mattprado21/sample-monaca-app/tree/master

App.vue - https://github.com/mattprado21/sample-monaca-app/blob/master/src/App.vue

<template>
    <v-ons-page>
      <v-ons-toolbar>
        <div class="center">{{ title }}</div>
        <div class="right">
          <v-ons-toolbar-button>
            <v-ons-icon icon="ion-navicon, material: md-menu"></v-ons-icon>
          </v-ons-toolbar-button>
        </div>
      </v-ons-toolbar>
      <div style="text-align: center; padding-top:50px">
          This app main purpose is to check the behavior of InAppBrowser when opening Youtube Links
      </div>
      <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 50%;">
        <!-- Use flex container to center -->
        <v-ons-button style="margin-top: 10px; margin-bottom: 10px;" @click="test1">_blank (location=yes)</v-ons-button>
        <v-ons-button style="margin-top: 10px; margin-bottom: 10px;" @click="test2">_system (location=yes)</v-ons-button>
        <v-ons-button style="margin-top: 10px; margin-bottom: 10px;" @click="test3">_self (location=yes)</v-ons-button>
      </div>
    </v-ons-page>
</template>
<script>
  export default{
    data() {
      return {
        title: 'Inappbrowser 5.0'
      };
    },
    methods: {
      test1() {
        cordova.InAppBrowser.open('https://youtu.be/2Vv-BfVoq4g', '_blank', 'location=yes');
      },
      test2() {
        cordova.InAppBrowser.open('https://youtu.be/2Vv-BfVoq4g', '_system', 'location=yes');
      },
      test3() {
        cordova.InAppBrowser.open('https://youtu.be/2Vv-BfVoq4g', '_self', 'location=yes');
      },
    }
  };
</script>

[jcesarmobile]

As I said, it can't be a monaca app, monaca-plugin-monaca-core can only be used in monaca servers, so I can't build and test that app locally.

[kev494]

I'd say this is the same issue as described here #880. Intent links cannot be open with the InAppBrowser plugin.

[jcesarmobile]

The reporter talks about different issues on android and iOS, but has provided iOS apps only and linked an android bug with the same problem they have on android, so this issue should only be about the iOS problem.

[kev494]

The reporter talks about different issues on android and iOS, but has provided iOS apps only and linked an android bug with the same problem they have on android, so this issue should only be about the iOS problem.

I see, sorry for mixing this up then. I didn't get that this is only for the iOS bug. Should I link the issue I linked in my comment above to the android issue or is this ok as it is?