How do I use cordova firebase.dynamiclinks plugin in Ionic 4?

user_8031298 0
Viewed 2108

I want to use Cordova Firebase Dynamiclinks plugin : https://github.com/chemerisuk/cordova-plugin-firebase-dynamiclinks#installation in my Ionic 4 App.

There is an Ionic-native-plugin usage for this too : npm install @ionic-native/firebase-dynamic-links and usage :

import { FirebaseDynamicLinks } from '@ionic-native/firebase-dynamic-links/ngx';

constructor(private firebaseDynamicLinks: FirebaseDynamicLinks) { }

...
this.firebaseDynamicLinks.onDynamicLink()
  .subscribe((res: any) => console.log(res), (error:any) => console.log(error));

Issue is : I want to use createDynamicLink(parameters) method available in Cordova Firebase Dynamiclinks plugin but Ionic-native-plugin says

Property 'createDynamicLink' does not exist on type 'FirebaseDynamicLinks'.

Therefore, I need to use Cordova Firebase Dynamiclinks directly and I tried doing using it like

import { cordova } from '@ionic-native/core';
...
cordova.plugins.firebase.dynamiclinks.createDynamicLink({
    link: "https://google.com"
}).then(function(url) {
    console.log("Dynamic link was created:", url);
});

But got error

Property 'plugins' does not exist on type '(pluginObj: any, methodName: string, config: CordovaOptions, args: IArguments | any[]) => any'.

Also tried removing import

cordova.plugins.firebase.dynamiclinks.createDynamicLink({
    link: "https://google.com"
}).then(function(url) {
    console.log("Dynamic link was created:", url);
});

And got this

Property 'firebase' does not exist on type 'CordovaPlugins'.

What is the correct usage of cordova plugins?

Update

Ionic-native-plugin now contains all the methods available in Cordova Firebase Dynamiclinks plugin.

firebase-dynamic-links ionic-framework firebase cordova
2 Answers

I believe this is more fitting of a comment, but I don't quite have the reputation for it yet.

Currently, there is a PR open in the @ionic-team/ionic-native repo (here). This exposes the extra methods, but until then you can use the original repo here to get your desired effect. In order to install the repo you will have to follow the directions in the Developer guide here. Cheers!

user_136240850

I have developed an ionic 5 app that uses Firebase Dynamic Links and it works great but it took some effort. I watched videos to understand how Firebase Dynamic Links work but there is certainly much that is not shown.

To answer the original question you can always manually create a dynamic link which is what I do in our solution. We created a dynamic link that would help users onboard (register an account). Our dynamic link has custom onboardingId which originates from the backend process and the link is presented to the user via SMS text message.

This is in app.component.ts constructor Here is some code that happens when the user clicks the dynamic link:

// Handle the logic here after opening the app (app is already installed) with the Dynamic link
this.firebaseDynamicLinks.onDynamicLink().subscribe((res: any) =>  {
  console.log('app was opened with dynamic link');
  console.log(res);
  /*   This only fires on subsequent calls and not on app start 20220208 STR
  console.log(JSON.stringify(res)); //"{"deepLink":"https://localhost/onboard?onboardingId=8ed634b0-53b7-4a0f-b67e-12c06019982a","clickTimestamp":1643908387670,"minimumAppVersion":0}"
  var dynamicLink = JSON.parse(JSON.stringify(res));
  var deepLink = dynamicLink.deepLink;
  console.log(deepLink);
  if (deepLink.indexOf("onboard")>=0){
    this.isOnboarding = true;
  }
  alert("deepLink ="+ deepLink);
  */
}, (error:any) => {
  console.log(error)
});

I originally thought that Firebase handles all of the magic if the user doesn't have the app installed. I was wrong! You MUST also handle the code to pickup the dynamic link after the app is installed.

The code below will read the dynamic link from the clipboard and survives the app install process. Placed in app.component.ts ngOnInit().

this.platform.ready().then(() => {

  this.firebaseDynamicLinks.getDynamicLink().then((data) => {
    //added 20220208 STR try to help open the deep link if app is just installed
    if (data != null) {
      console.log(JSON.stringify(data));
      //alert("initializeApp():"+JSON.stringify(data));
      var dynamicLink = JSON.parse(JSON.stringify(data));
      var deepLink = dynamicLink.deepLink;
      console.log("initializeApp():"+deepLink);
      if (deepLink != "") {
        if (deepLink.indexOf("onboard")>=0){
          this.isOnboarding = true;
          this.deepLinkToOnboard(deepLink);
        }
      }
    }
  });}

So to handle dynamic links after you have the Firebase plugin installed, you must have two sections of code; one for handling if the app is already installed and another for handling the dynamic link if the app is not installed.

user_105409740
Related