Understanding and Resolving Issues with Custom URL Schemes in Cordova Apps on iOS 10

Understanding the Problem with Cardova IOS 10 and Custom URL Schemes

============================================================

In this article, we will delve into the complexities of custom URL schemes in Cordova applications and their behavior on different versions of iOS. Specifically, we’ll explore why a popular Cordova project experienced issues with loading webpages after updating to iOS 10.

Background: What are Custom URL Schemes?

Custom URL schemes allow developers to create unique URLs that can be used within their application or shared with users. These schemes are essential for implementing features like bookmarking, sharing content, and accessing specific app functionality.

In the context of Cordova, custom URL schemes are used in conjunction with the window.open() method to load webpages within the app. When a user clicks on a link that uses a custom URL scheme (e.g., mySecondApp://#params), the app can handle it using its own URL handlers.

iOS 10 Changes and Their Impact

In iOS 10, Apple introduced significant changes to how apps can handle custom URLs. One of these changes affected the behavior of the window.open() method when used with custom URL schemes.

Prior to iOS 10, Cordova applications could successfully load webpages using custom URL schemes due to a lack of strict enforcement by Apple. However, in iOS 10, this was no longer the case.

The Error: “The URL can’t be shown”

When trying to open a webpage with an error in iOS 10, developers encountered an unexpected error message: “The URL can’t be shown.” This error indicated that the app was unable to load the requested URL due to a mismatch between the expected and actual scheme.

Analyzing the Issue

To understand why this issue occurred, let’s break down the steps involved in loading a webpage using window.open():

The user clicks on a link within an app that uses a custom URL scheme (e.g., mySecondApp://#params).
The window.open() method is called with the custom URL scheme as its argument.
iOS checks the URL scheme to ensure it matches one of the schemes explicitly allowed by the app’s Info.plist file.

In the case of our Cordova application, we had configured the Info.plist file with an <access origin="mySecondApp://*" launch-external="yes" /> tag. However, this configuration did not include a specific <LSApplicationQueriesSchemes> key that allows for custom URL schemes to be handled.

The Solution: Whitelisting Custom URL Schemes

To resolve the issue with iOS 10 and custom URL schemes, we need to add the <LSApplicationQueriesSchemes> key to our Info.plist file. This key specifies an array of allowed URL schemes that can be used by the app.

Here’s how to configure the <LSApplicationQueriesSchemes> key:

Open your project in Xcode and select the app target.
Navigate to the target’s build settings (e.g., Product > Edit Scheme…).
In the Info tab, search for the <LSApplicationQueriesSchemes> key.
Add a new value (string) with the custom URL scheme you want to allow (e.g., mySecondApp).

After adding this key, your app can successfully handle custom URLs, and the error “The URL can’t be shown” will be resolved.

Additional Context: Understanding URL Schemes

To further understand how URL schemes work in iOS, it’s essential to grasp the concept of scheme matching. When a user clicks on a link that uses a custom URL scheme, iOS checks if the app has explicitly allowed this scheme by including it in its Info.plist file.

If the scheme is allowed, the app can handle the request and load the requested content. However, if the scheme is not recognized or has been blacklisted, the system will display an error message, as seen with the “The URL can’t be shown” error.

Troubleshooting Tips

While adding the <LSApplicationQueriesSchemes> key should resolve the issue, there are a few additional tips to help you troubleshoot similar problems:

Verify your URL scheme: Ensure that your custom URL scheme is correctly formatted and matches one of the schemes allowed by your app’s Info.plist file.
Check for typos: Double-check that there are no typos or formatting errors in your code or configuration files.
Test on different devices: Verify that the issue persists across multiple devices, including iPhones with iOS 10 and later versions.

Conclusion

In this article, we explored the complexities of custom URL schemes in Cordova applications and their behavior on different versions of iOS. By understanding how scheme matching works and adding the <LSApplicationQueriesSchemes> key to your Info.plist file, you can resolve common issues like “The URL can’t be shown” and ensure that your app functions correctly with custom URLs.

Frequently Asked Questions

Q: What is a custom URL scheme?

A: A custom URL scheme is a unique identifier used within an application or shared with users to access specific functionality, features, or content.

Q: Why was the `<LSApplicationQueriesSchemes>` key introduced in iOS 10?

A: The <LSApplicationQueriesSchemes> key was introduced in iOS 10 as part of Apple’s efforts to improve app security and prevent malicious apps from accessing sensitive information.

Q: Can I still use `window.open()` with custom URL schemes on earlier versions of iOS?

A: While window.open() may have worked on earlier versions of iOS, it is no longer supported due to changes in the way iOS handles custom URL schemes.

Last modified on 2024-11-23