Repository: hampusohlsson/browser-deeplink
Branch: master
Commit: b0bd1cf5bcb7
Files: 5
Total size: 10.5 KB

Directory structure:
gitextract_gh0jo56p/

├── LICENSE
├── README.md
├── browser-deeplink.js
├── example.html
└── package.json

================================================
FILE CONTENTS
================================================

================================================
FILE: LICENSE
================================================
The MIT License (MIT)

Copyright (c) 2014 Hampus Ohlsson

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



================================================
FILE: README.md
================================================
browser-deeplink
================

**‼️  Not maintained** - *Use at own risk*   

Redirect your website users to your native Android and/or iOS app. If the user does not have the app, they are redirected to the corresponding app store page. 

Such functionality is very common for apps like YouTube, Spotify etc. But it is not default functionality in mobile browsers today, and unnecessarily hard to implement. This plugin uses a workaround with a hidden `iframe` and `setTimeout()`.

How to use
-

### 1. Include browser-deeplink on your site.

```html
<script src="browser-deeplink.js" type="text/javascript"></script>
```

or

```js
require("./browser-deeplink");
```

### 2. Provide your app details
```js
deeplink.setup({
    iOS: {
        appName: "myapp",
        appId: "123456789",
    },
    android: {
        appId: "com.myapp.android"
    }
});
```

This will create the following fallback app store links:

**iOS:** `itms-apps://itunes.apple.com/app/myapp/id123456789?mt=8`    
**Android:** `https://play.google.com/store/apps/details?id=com.myapp.android`

#### Options

Optionally, you can specify a `iOS.storeUrl` or `android.storeUrl` to override the fallback redirect.
```js
deeplink.setup({
    iOS: {
        storeUrl: "http://...",
    }
});
```

You can also skip the app store fallback altogether if you want by specifying `fallback: false`
```js
deeplink.setup({
    fallback: false
});
```

In case you want to register your android app on your http(s) links directly you can disable deeplinking for android  by specifying `androidDisabled: true`
```js
deeplink.setup({
    androidDisabled: true
});
```

### 3. Open your deeplinks!
```js
window.onload = function() {
    deeplink.open("myapp://object/xyz");
}
```

# License
This library is released under the MIT licence.


================================================
FILE: browser-deeplink.js
================================================
/**
 * browser-deeplink v0.1
 *
 * Author: Hampus Ohlsson, Nov 2014
 * GitHub: http://github.com/hampusohlsson/browser-deeplink
 *
 * MIT License
 */
 
(function (root, factory) {
    if ( typeof define === 'function' && define.amd ) {
        define("deeplink", factory(root));
    } else if ( typeof exports === 'object' ) {
        module.exports = factory(root);
    } else {
        root["deeplink"] = factory(root);
    }
})(window || this, function(root) {
 
    "use strict"

    /**
     * Cannot run without DOM or user-agent
     */
    if (!root.document || !root.navigator) {
        return;
    }

    /**
     * Set up scope variables and settings
     */
    var timeout;
    var settings = {};
    var defaults = {
        iOS: {},
        android: {},
        androidDisabled: false,
        fallback: true,
        fallbackToWeb: false,
        delay: 1000,
        delta: 500
    }

    /**
     * Merge defaults with user options
     * @private
     * @param {Object} defaults Default settings
     * @param {Object} options User options
     * @returns {Object} Merged values of defaults and options
     */
    var extend = function(defaults, options) {
        var extended = {};
        for(var key in defaults) {
            extended[key] = defaults[key];
        };
        for(var key in options) {
            extended[key] = options[key];
        };
        return extended;
    };

    /**
     * Generate the app store link for iOS / Apple app store
     *
     * @private
     * @returns {String} App store itms-apps:// link 
     */
    var getStoreURLiOS = function() {
        var baseurl = "itms-apps://itunes.apple.com/app/";
        var name = settings.iOS.appName;
        var id = settings.iOS.appId; 
        return (id && name) ? (baseurl + name + "/id" + id + "?mt=8") : null;
    }

    /**
     * Generate the app store link for Google Play
     *
     * @private
     * @returns {String} Play store https:// link
     */
    var getStoreURLAndroid = function() {
        var baseurl = "market://details?id=";
        var id = settings.android.appId;
        return id ? (baseurl + id) : null;        
    }

    /**
     * Get app store link, depending on the current platform
     *
     * @private
     * @returns {String} url
     */
    var getStoreLink = function() {
        var linkmap = {
            "ios": settings.iOS.storeUrl || getStoreURLiOS(),
            "android": settings.android.storeUrl || getStoreURLAndroid()
        }

        return linkmap[settings.platform];
    }

    /**
     * Get web fallback link, depending on the current platform
     * If none is set, default to current url
     *
     * @private
     * @returns {String} url
     */
    var getWebLink = function() {
        var linkmap = {
            "ios": settings.iOS.fallbackWebUrl || location.href,
            "android": settings.android.fallbackWebUrl || location.href
        }

        return linkmap[settings.platform];
    }

    /**
     * Check if the user-agent is Android
     *
     * @private
     * @returns {Boolean} true/false
     */
    var isAndroid = function() {
        return navigator.userAgent.match('Android');
    }

    /**
     * Check if the user-agent is iPad/iPhone/iPod
     *
     * @private
     * @returns {Boolean} true/false
     */
    var isIOS = function() {
        return navigator.userAgent.match('iPad') || 
               navigator.userAgent.match('iPhone') || 
               navigator.userAgent.match('iPod');
    }

    /**
     * Check if the user is on mobile
     *
     * @private
     * @returns {Boolean} true/false
     */
    var isMobile = function() {
        return isAndroid() || isIOS();
    }

    /**
     * Timeout function that tries to open the fallback link.
     * The fallback link is either the storeUrl for the platofrm
     * or the fallbackWebUrl for the current platform.
     * The time delta comparision is to prevent the app store
     * link from opening at a later point in time. E.g. if the 
     * user has your app installed, opens it, and then returns 
     * to their browser later on.
     *
     * @private
     * @param {Integer} Timestamp when trying to open deeplink
     * @returns {Function} Function to be executed by setTimeout
     */
    var openFallback = function(ts) {
        return function() {
            var link = (settings.fallbackToWeb) ?  getWebLink() : getStoreLink();
            var wait = settings.delay + settings.delta;
            if (typeof link === "string" && (Date.now() - ts) < wait) {
                window.location.href = link;
            }
        }
    }

    /**
     * The setup() function needs to be run before deeplinking can work,
     * as you have to provide the iOS and/or Android settings for your app.
     *
     * @public
     * @param {object} setup options
     */
    var setup = function(options) {
        settings = extend(defaults, options);

        if (isAndroid()) settings.platform = "android";
        if (isIOS()) settings.platform = "ios";
    }

    /**
     * Tries to open your app URI through a hidden iframe.
     *
     * @public
     * @param {String} Deeplink URI
     * @return {Boolean} true, if you're on a mobile device and the link was opened
     */
    var open = function(uri) {
        if (!isMobile()) {
            return false;
        }

        if (isAndroid() && settings.androidDisabled) {
            return;
        }

        if (isAndroid() && !navigator.userAgent.match(/Firefox/)) {
            var matches = uri.match(/([^:]+):\/\/(.+)$/i);
            uri = "intent://" + matches[2] + "#Intent;scheme=" + matches[1];
            uri += ";package=" + settings.android.appId + ";end";
        }

        if (settings.fallback|| settings.fallbackToWeb) {
            timeout = setTimeout(openFallback(Date.now()), settings.delay);
        }
        
        var iframe = document.createElement("iframe");
        iframe.onload = function() {
            clearTimeout(timeout);
            iframe.parentNode.removeChild(iframe);
            window.location.href = uri;
        };

        iframe.src = uri;
        iframe.setAttribute("style", "display:none;");
        document.body.appendChild(iframe);
        
        return true;
    }

    // Public API
    return {
        setup: setup,
        open: open
    };

});


================================================
FILE: example.html
================================================
<!doctype html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <script src="browser-deeplink.js" type="text/javascript"></script>
    <script type="text/javascript">

    deeplink.setup({
        iOS: {
            appId: "284882215",
            appName: "facebook",
        },
        android: {
            appId: "com.facebook.katana"
        }
    });

    function clickHandler(uri) {
        deeplink.open(uri);
        return false;
    }

    </script>
    <style>
    *, *:before, *:after {
        box-sizing: border-box;
    }
    a {
        font-family: monospace;
        display: block;
        width: 100%;
        margin: 10px 0;
        padding: 25px;
        background: #060;
        color:#fff;
        text-align: center;
        font-size: 20px;
    }
    </style>
</head>
<body>
    <a href="#" data-uri="fb://profile" onclick="clickHandler(this.dataset.uri)">open fb://profile</a>
</body>
</html>

================================================
FILE: package.json
================================================
{
  "name": "browser-deeplink",
  "version": "1.0.1",
  "description": "Redirect mobile website users to your native iOS and/or Android app ",
  "main": "browser-deeplink.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/hampusohlsson/browser-deeplink"
  },
  "author": "Hampus Ohlsson",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/hampusohlsson/browser-deeplink/issues"
  },
  "homepage": "https://github.com/hampusohlsson/browser-deeplink"
}