Opening app from email link in NativeScript vue iOS

Question

Edit For more explanation on how to use this plugin with vue, please see NativeScript vue, vuex and urlhandler

I'm trying to make it so that a link in an email can open an app I'm building (its a test app I'm building to learn NativeScript). I am using https://www.npmjs.com/package/nativescript-urlhandler with NativeScript vue on iOS.

In platforms/ios/######/app/App_Resources/iOS/Info.plist I have added

<key>CFBundleURLTypes</key>
<array>
   <dict>
       <key>CFBundleURLName</key>
       <string>com.#######.######</string>
   </dict>
   <dict>
       <key>CFBundleURLSchemes</key>
       <array>
           <string>mycustomappfoobar</string>
       </array>
   </dict>
</array>

And within app.js, I have added:

const handleOpenURL = require("nativescript-urlhandler").handleOpenURL;


handleOpenURL(function(appURL) {
    console.log('Got the following appURL', appURL);
  });

When tapping on mycustomappfoobar://test (link in email) nothing happens...

I looked at the Angular example, and handleOpenURL is being called on initialisation... So I tried putting handleOpenURL within vues mounted hook - but this doesn't work either. Really stumped...

new Vue({
    mounted() {
      handleOpenURL(function(appURL) {
        console.log('Got the following appURL', appURL);
      });
    },
    render: h => h("frame", [h(Home)]),
    store: Store
}).$start();

The plugin has nothing to do with opening the app upon clicking the link. It's done by the OS by identifying the url schemes (CFBundleURLSchemes) you listed at build time. The plugin is only responsible for capturing the URL & parameters used to open the app. Try a clean build, make sure your CFBundleURLSchemes changes are included. — Manoj, May 28 '19 at 17:30
Thanks @Manoj - I've tried a clean build (however, it seems to knock out / overwrite the schemes I've put into info.plist). — Rob, May 28 '19 at 17:37
Oops, just noticed you are updating wrong info plist, that's auto generated one, basically anything inside platforms folder. Use the one within your `App_Resources/iOS/info.plist`. — Manoj, May 28 '19 at 17:38
AMAZING! - I get one error message, "Merging CFBundleURLTypes: Property CFBundleTypeRole is required!" - but it all works... thanks! :D — Rob, May 28 '19 at 17:45

score 2 · Accepted Answer · answered May 28 '19 at 17:46

2

You are updating wrong info.plist. Basically anything inside platforms folder is auto generated. Use the one within your App_Resources/iOS/info.plist.

answered May 28 '19 at 17:46

Manoj

21,753
3
20
41

score 1 · Answer 2 · answered May 28 '19 at 19:10

1

You are calling handleOpenURL too late. This should be called prior to your Vue context being created so that the UIAppDelegate can be properly augmented behind the scenes.

^{From https://github.com/hypery2k/nativescript-urlhandler/blob/cd6939119910b6345e444055ad17716a7c0ad1d6/demo/app/app.ts}

import { handleOpenURL, AppURL } from 'nativescript-urlhandler';

import './app.scss';
import './bundle-config';
import * as app from 'application';

handleOpenURL((appURL: AppURL) => {
    console.log('handleOpenURL', appURL);
});

app.start({ moduleName: 'main-page' });

answered May 28 '19 at 19:10

Ian MacDonald

13,472
2
30
51

Thanks @Ian MacDonald. Is this example typescript? (just the way the argument is called on handleOpenURL?). I've been calling it ahead of vue... but tried it within vue's mounted hook while I was trying to figure out why it wasn't working for me... it turns out it wasn't working because I was being dumb by putting my config in the wrong file... – Rob May 28 '19 at 21:44
Edit - in vue, you need to call handlOpenURL from within mounted, else you won't have access to all the methods.... Please see https://stackoverflow.com/questions/56365775/nativescript-vue-vuex-and-urlhandler – Rob May 29 '19 at 21:42

Opening app from email link in NativeScript vue iOS

2 Answers2