Custom-URL-scheme in Ionic 2

[Jbz797]

I can not run the plugin in Ionic 2.

With this function :

function handleOpenURL(url) {
    setTimeout(function() {
      console.log(url);
      sessionStorage.setItem('urlParams', url);
    }, 0);
  }

I have this error : [Ionic 2] Uncaught ReferenceError: handleOpenURL is not defined

Does anyone have a functional example?

Thanks in advance.

[samastur]

Put it on window. So instead of function handleOpenURL(url)... have window.handleOpenURL = function (url)...

[spacepope]

Hi there, i am too having difficulties getting this plugin to properly work with Ionic 2/3.

As the handleOpenURL handler kicks in before the App is started, i declared the handler function at the top of app.component.ts (outside the class definition) to track the passed Url:

(window as any).handleOpenURL = (url: string) => {
  (window as any).handleOpenURL_LastURL = url;
};

Furthermore i override the global handler within the constructor of app.component.ts (to handle the case if the app is already open) and evaluate the last url set on app start:

export class MyApp {

  @ViewChild("rootNav")
  private navCtrl: NavController;

  constructor() {
     // override open handler to navigate on further custom url scheme actions
     (window as any).handleOpenURL = (url: string) => {
        setTimeout(() => {
          this.handleOpenUrl(url);
        }, 0);
      };

      // check if app was opened by custom url scheme
      const lastUrl: string = (window as any).handleOpenURL_LastURL || "";
      if (lastUrl && lastUrl !== "") {
        delete (window as any).handleOpenURL_LastURL;
        this.handleOpenUrl(lastUrl);
      }
  }

  private handleOpenUrl(url: string) {
   // custom url parsing, etc...

   // navigate to page with reactive forms
    this.navCtrl.push(MyReactiveFormsPage, { param: "my param" });
  }
}

In both cases the page is opened successfully. But if the app was already open (so that this.handleOpenURL is called from window.handleOpenURL) the angular 2 reactive forms bindings seem to be kind of broken; the validations aren't evaluated on input changes anymore.

Do you have any clue, what is possibly going wrong here?

Thanks and kind regards..

[spacepope]

Solved it myself. The answer was so simple and an angular 2 basic: ever use NgZone.run(() => { ... }); when calling from outside the angular zone! 👍

[jd0048]

Hello spacepope

can you please write example code with NG.Zone.run as you suggest above.

[spacepope]

Modified example from above:

import {NgZone} from '@angular/core';

// As the handleOpenURL handler kicks in before the App is started, 
// declare the handler function at the top of app.component.ts (outside the class definition) 
// to track the passed Url
(window as any).handleOpenURL = (url: string) => {
  (window as any).handleOpenURL_LastURL = url;
};

// further imports and annotations left out due to simplicity

export class MyApp {

  @ViewChild("rootNav")
  private navCtrl: NavController;

  constructor(private ngZone: NgZone) {
     // override open handler to navigate on further custom url scheme actions
     (window as any).handleOpenURL = (url: string) => {
        // this context is called outside of angular zone!
        setTimeout(() => {
          // so we need to get back into the zone..
          this.ngZone.run(() => {
             // this is in the zone again..
             this.handleOpenUrl(url);
          });
        }, 0);
      };

      // check if app was opened by custom url scheme
      const lastUrl: string = (window as any).handleOpenURL_LastURL || "";
      if (lastUrl && lastUrl !== "") {
        delete (window as any).handleOpenURL_LastURL;
        this.handleOpenUrl(lastUrl);
      }
  }

  private handleOpenUrl(url: string) {
   // custom url parsing, etc...

   // navigate to page with reactive forms
    this.navCtrl.push(MyReactiveFormsPage, { param: "my param" });
  }
}

Note: the modified code above is only for demonstration purpose and is not tested, so syntax typo could be possible..

See example on https://angular.io/api/core/NgZone

[jd0048]

Thanks it will work for me.

[daveywc]

Worked for me too. Thanks.

[hungcung2409]

Worked for me too. Thanks.

[klochko7]

spacepope, good day ! Could you suggest please .. how do you open Ionic app from webpage ? What url do you have on website ? I have problem with it.

[imransilvake]

awesome works for me too on iOS 5.0.1

[ziaur-r]

Hi Guys, this plugin doesn't seems to work in my cordova windows 10 app.. actually it happens when I implement angular routing in my project. apparently handleOpenURL not triggered and app restarts instead of resume. but without angular routing implementation app resumes successfully.

Anybody have any suggestion why it is behaving so?