Android 11 (SDK 30) - Chrome Custom Tabs not available

[bbialas]

Plugin version used: 2.0.0

After changing Cordova Target SDK version to 30 (Android 11) and app is running on the device with Android 11, this plugin doesn't work anymore.

Code that I use

window.SafariViewController.isAvailable((available: any) => {
    if (available) {
        window.SafariViewController.show(
            {
                url: params.url,
                hidden: false,
                animated: true,
                transition: "slide",
                enterReaderModeIfAvailable: false,
                tintColor: "#00ffff",
                barColor: "#000000",
                controlTintColor: "#ffffff",
                showDefaultShareMenuItem: false
            },
            (result: any) => {},
            (err: any) => {}
        );
    }
});

available always returns false.

Any ideas?

[bbialas]

I realized, that this plugin is not able to get available browsers from the device anymore (which supports Custom Tabs).

After reading google documentation: https://developers.google.com/web/updates/2020/07/custom-tabs-android-11#detecting_browsers_that_support_custom_tabs

Following change to config.xml fixed the problem.

<config-file target="AndroidManifest.xml" parent="/manifest">
    <queries>
        <intent>
            <action android:name="android.support.customtabs.action.CustomTabsService" />
        </intent>
    </queries>
</config-file>

Example:

<?xml version='1.0' encoding='utf-8'?>
<widget
    id="xxx"
    version="xxx"
    xmlns="http://www.w3.org/ns/widgets"
    xmlns:cdv="http://cordova.apache.org/ns/1.0"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android-versionCode="xxx"
    ios-CFBundleVersion="xxx"
>
    <name>xxx</name>
    <description>xxx</description>
    <content src="index.html" />
    <access origin="*" />
    ........
    <platform name="android">
        <preference name="android-targetSdkVersion" value="30"/>
        .........
        <config-file target="AndroidManifest.xml" parent="/manifest">
            <queries>
                <intent>
                    <action android:name=
                        "android.support.customtabs.action.CustomTabsService" />
                </intent>
            </queries>
        </config-file>
    </platform>
</widget>

[ucsbricks]

@bbialas I created a pull request implementing your fix. Thanks for figuring this out! @EddyVerbruggen could you please test and merge this fix? Thanks guys!

[daviesdoclc]

Any idea when this will be released or do I just have to apply the patch myself?

[AndrWeisR]

I realized, that this plugin is not able to get available browsers from the device anymore (which supports Custom Tabs).

After reading google documentation: https://developers.google.com/web/updates/2020/07/custom-tabs-android-11#detecting_browsers_that_support_custom_tabs

Following change to config.xml fixed the problem.

<config-file target="AndroidManifest.xml" parent="/manifest">
    <queries>
        <intent>
            <action android:name="android.support.customtabs.action.CustomTabsService" />
        </intent>
    </queries>
</config-file>

Example:

<?xml version='1.0' encoding='utf-8'?>
<widget
    id="xxx"
    version="xxx"
    xmlns="http://www.w3.org/ns/widgets"
    xmlns:cdv="http://cordova.apache.org/ns/1.0"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android-versionCode="xxx"
    ios-CFBundleVersion="xxx"
>
    <name>xxx</name>
    <description>xxx</description>
    <content src="index.html" />
    <access origin="*" />
    ........
    <platform name="android">
        <preference name="android-targetSdkVersion" value="30"/>
        .........
        <config-file target="AndroidManifest.xml" parent="/manifest">
            <queries>
                <intent>
                    <action android:name=
                        "android.support.customtabs.action.CustomTabsService" />
                </intent>
            </queries>
        </config-file>
    </platform>
</widget>

Confirmed!

[RenateM]

@EddyVerbruggen and @ucsbricks, thanks for this great plugin! This issue is, unfortunately, causing the login process of my app to malfunction. I would also really appreciate this fix to be released soon as the Google Play Store is not going to accept an update to my app without my app targeting Android SDK version 30.

[sslife1]

@EddyVerbruggen and @ucsbricks, thanks for this great plugin! This issue is, unfortunately, causing the login process of my app to malfunction. I would also really appreciate this fix to be released soon as the Google Play Store is not going to accept an update to my app without my app targeting Android SDK version 30.

I'm having the same issues with login. Although the added queries made the safariviewcontroller work.

[skrchr]

@bbialas Fixed my issue aswell. Thanks

[WuglyakBolgoink]

check my plugin (https://github.com/WuglyakBolgoink/cordova-plugin-quick-fix-svc) as a fallback

related to https://github.com/EddyVerbruggen/cordova-plugin-safariviewcontroller/pull/180

[l3ender]

Thanks all for the work identifying the issue and developing the solution! It would be great to get the fix merged in and released, so workaround approaches can be avoided.

[dcxn]

Hey, same issue and seeing an ERROR {error: "custom tabs are not available"} in my console. And again, thank you all for identifying and proposing solution.

Any ETA for merging the fix and releasing new update?