CODEWITHSUNDEEP
javascriptangularjscordova
user3839044
user3839044

Reputation: 245

Using handleOpenURL with Custom URL scheme in Cordova

I'm developing an app and have almost everything figured out, except for the custom URL scheme plugin(https://github.com/EddyVerbruggen/Custom-URL-scheme). I've successfully installed the plugin and set up a custom URL scheme of signsrestaurantandbar. So when I use signsrestaurantandbar://, my application opens. The problem I'm facing is handling the URL. In the readme, it says I can use function handleOpenURL(URL) for this, but I'm still having issues trying to load a particular page within the app.

Here's what I tried:

function handleOpenURL(url) {
      var strValue = url;
      strValue = strValue.replace('signsrestaurantandbar://','');
      window.location.href = strValue + ".html";
  }

I put this in my index.html page... though it should open page.html on loading signsrestaurantandbar://page, it doesn't do it properly. In my chrome console, it says it loaded the page, but it appears blank without any error and this happens only once. When I try to load signsrestaurantandbar://page the second time, it just loads the app.

I would appreciate any hints on how to approach loading particular pages using the custom URL scheme.

Upvotes: 14

Views: 25464

Answers (2)

Pavel Chuchuva
Pavel Chuchuva

Reputation: 22465

Add global handleOpenURL function using this code:

window.handleOpenURL = function(url) {
  console.log(">>>>>>>>>>>>>>>>>>>");
  // do stuff, for example
  // document.getElementById("url").value = url;
  console.log(url);
};

See Cordova Custom URL Scheme Handling.

Note that if you use alert in this function your app would hang:

You cannot launch any interactive features like alerts in the handleOpenURL code, if you do, your app will hang. Similarly, you should not call any Cordova APIs in there, unless you wrap it first in a setTimeout call, with a timeout value of zero.

The benefit of this method is you don't need to change Content Security Policy using Content-Security-Policy meta tag.

Upvotes: 11

user3255670
user3255670

Reputation:

You need to make sure you list your "custom" URL in your CSP.

Added 2016-02-11: NOTE: YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.

It would look something like this:

<meta http-equiv="Content-Security-Policy" 
         content="default-src * signsrestaurantandbar:; 
                  style-src * 'self' 'unsafe-inline' 'unsafe-eval'; 
                  script-src * 'self' 'unsafe-inline' 'unsafe-eval';">

Usually the wildcard setting (*) can handle most applications, but not your "custom" protocol.
NOTE: Wildcard setting have the potential of keep your app out of the "app stores".

You may also need to add to your config.xml

<allow-intent href="signsrestaurantandbar:" />

This whitelist worksheet should help. HOW TO apply the Cordova/Phonegap the whitelist system

You should also read the whitelist matrix, especially the sectionon <allow-intent (...) /> - Best of Luck

Upvotes: 12

Related Questions