Android/iTunes App Download Notification

gistfile1.js

/* jshint strict: true */
/* globals $ */

/*
 * Show a "Download App" notification on Android and iPhone.
 * Notification will appear once per page every 30 days unless dismissed, 
 * once dismissed, it won't show again for 30 days
*/

(function () {
    'use strict';

    if (window.navigator.userAgent.search(/iphone/i) !== -1) {
        window._isIphone = true;
    }
    if (window.navigator.userAgent.search(/android/i) !== -1) {
        window._isAndroid = true;
    }

    if ((window._isIphone || window._isAndroid)) {

        var obj = {
                shown: {}
            },
            id = '_download-app',
            link = '',
            str = '',
            now = new Date(),
            pathname = window.location.pathname,
            hasBeen30daysSince = function (time) {
                var bool = false;

                // 1000*60*60*24*30 = 2592000000
                if ((now.getTime() - time) >= 2592000000) {
                    bool = true;
                }
                return bool;
            },
            localStorageSupported = function () {
                var str = 'test';
                try {
                    localStorage.setItem(str, str);
                    localStorage.removeItem(str);
                    return true;
                } catch(e) {
                    return false;
                }
            };

        if (!localStorageSupported) {
            return;
        }

        if (localStorage.getItem(id)) {
            obj = JSON.parse(localStorage.getItem(id));

            if (obj.shown[pathname] && !hasBeen30daysSince(obj.shown[pathname].time)) {
                return;
            }

            if (obj.dismissedTime && hasBeen30daysSince(obj.dismissedTime)) {
                obj.dismissed = false;
            }

            if (obj.dismissed === true) {
                return;
            }
        }

        obj.shown[pathname] = {
            time: now.getTime()
        };

        localStorage.setItem(id, JSON.stringify(obj));

        link = 'https://play.google.com/store/apps/details?id=com.foo.iphone';
        str = 'Get the Android app on Google Play';

        if (window._isIphone) {
            link = 'https://itunes.apple.com/us/app/foo/id123?mt=8&uo=6&at=&ct=';
            str = 'Get the iPhone app from the iTunes Store';
        }

        $('body')
            .prepend('<div id="' + id + '"><a href=""></a><a href="' + link + '">' + str + '</a>')
            .on('click', '#' + id + ' a:first-child', function (ev) {
                ev.preventDefault();
                $(this).parent().remove();
                obj.dismissed = true;
                obj.dismissedTime = now.getTime();
                localStorage.setItem(id, JSON.stringify(obj));
            });

        setTimeout(function () {
            $('#' + id).addClass('_show');
        }, 500);
    }
}());

gistfile2.scss

#_download-app {
    @include linear-gradient(from top, #17478a, #002F73);
    box-shadow:inset 0 -2px 14px rgba(0, 0, 0, 0.1);
    height:0;
    @include transition (height 300ms ease);

    a {
        display:table-cell;
        vertical-align:top;
        text-decoration:none;
        opacity:0;
        @include transition (opacity 1s);
    }

    a:first-child {
        width:53px;
        border-right:1px solid rgba(0, 0, 0, 0.4);

        &:before {
            font-family:FontAwesome;
            font-size:27px;
            content:'\00d7';
            margin:25px 0 0 14px;
            display:block;
            color:rgba(255, 255, 255, 0.3);
        }
    }

    a:last-child {
        width:250px;
        padding:13px 20px;
        font-size:15px;
        line-height:1.3;
        color:#fff;
        border-left:1px solid rgba(255, 255, 255, 0.1);
        text-shadow:0 1px 2px rgba(0, 0, 0, 0.6);

        &:before {
            float:left;
            margin:0 15px 0 0;
            content:'';
            background:no-repeat center image-url('apple-touch-icon-114x114.png');
            background-size:57px;
            border-radius:7px;
            border:2px solid #fff;
            box-shadow:0 1px 8px rgba(0, 0, 0, 0.5);
            width:57px;
            height:57px;
        }
    }

    &._show {
        height:84px;

        a {
            opacity:1;

            &:last-child:before {
                @include animation(tada 1s);
            }
        }
    }
}