@bradmartin/nativescript-urlhandler
by bradmartin | v2.0.1
Register custom URLs for your NativeScript app
npm i --save @bradmartin/nativescript-urlhandler

NativeScript URL Handler Plugin apple android

Greenkeeper badge Build Status Donate with Bitcoin

npm versionMaintainability

NPM

Feel free to donate

Or donate Bitcoins: bitcoin:3NKtxw1SRYgess5ev4Ri54GekoAgkR213D

Bitcoin

Also via greenaddress

Usage

Just add App links to your app, see iOS and Android instructions below, and register a handler for the URL data.

See this example for Angular:

import { Component, OnInit } from "@angular/core";
import { handleOpenURL, AppURL } from 'nativescript-urlhandler';

@Component({
selector: "gr-main",
template: "<page-router-outlet></page-router-outlet>"
})
export class AppComponent {
constructor() {
}

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

And for pure NativeScript:

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

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

Or as TypeScript:

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

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

Note: see demo app for sample usage. Start by adding handleOpenURL in app main!

Installation

$ tns plugin add nativescript-urlhandler

Or if you want to use the development version (nightly build), which maybe not stable!:

$ tns plugin add nativescript-urlhandler@next

Android

Replace myapp with your desired scheme and set launchMode to singleTask

<activity android:name="com.tns.NativeScriptActivity" ... android:launchMode="singleTask"...>
...
<intent-filter>
<data android:scheme="myapp" />
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
</intent-filter>

For example:

<activity android:name="com.tns.NativeScriptApplication" android:label="@string/app_name" android:launchMode="singleTask">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="myapp" android:host="__PACKAGE__" />
</intent-filter>
</activity>

The android:launchMode="singleTask" tells the Android operating system to launch the app with a new instance of the activity, or use an existing one. Without this your app will launch multiple instances of itself which is no good.

iOS

<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLName</key>
<string>com.yourcompany.myapp</string>
</dict>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>myapp</string>
</array>
</dict>
</array>

FAQ

Callback handling

The "handleOpenURL" callback must be called before application initialization, otherwise you'll see this error in the console:

    No callback provided. Please ensure that you called "handleOpenURL" during application init!

Webpack

TypeScript Config

If your Webpack Build is failing, try adapting your tsconfig to this:

    "compilerOptions": {
"module": "commonjs",
"target": "es5",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"noEmitHelpers": true,
"noEmitOnError": true,
"lib": [
"es6",
"dom",
"es2015.iterable"
],
"baseUrl": ".",
"paths": {
"*": [
"./node_modules/tns-core-modules/*",
"./node_modules/*"
]
}
},
"exclude": [
"node_modules",
"platforms",
"**/*.aot.ts"
]

HTTPS intent

This lib also support HTTPS intent, you can define a host for it. Here is an example on Android with both custom & HTTPS scheme :

<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="my-app" />
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="https" android:host="my-website.com" />
</intent-filter>

Let's suppose your put a <a href="https://my-website.com/check-our-app">Check our mobile app</a> link on your website to open your mobile app. Because https intent is also linked to the mobile browser, when user will tap on the link, a popup will appears to let the user choose between the browser and your mobile app to open this link.

In the other hand, if you setup a android:scheme="my-app" that only your app react to, putting a <a href="my-app://check-our-app">Check our mobile app</a> link like this on your website will avoid this popup and open your mobile app directly.