web-dev-qa-db-ja.com

アプリURIスキームの代替URL

私はモバイルフレンドリーなWebサイトに取り組んでおり、ネイティブアプリでURLを開くというアイデアが気に入りました。 fb：//やcomgooglemaps：//などのカスタムURIプロトコルを使用してGoogleマップやFacebookに発言するなど。残念ながら、デスクトップ（たとえば、Chrome）では、fb：//の意味がわからないため、これらのリンクはまったく機能しません。次のようなフォールバックを追加する必要があります。

<a href="fb://profile?id=1234" fallback="http://facebook.com"> click here </a>

残念なことに、Googleに1日中費やすことは、単一のソリューションではありませんでした。現在、私が思いつく唯一の回避策は、2セットのリンクを作成し、メディアクエリに基づいて特定のリンクを表示または非表示にすることです。これはずさんなソリューションのように聞こえますが、うまくいけばここの誰かがより良いアイデアを持っていることを願っています。

urlhtml5jqueryweb-applications
3
john.weland

実用的なソリューションがあると思います。 （ https://stackoverflow.com/a/13675901/984234 を参照）

 <!-- links will work as expected where javascript is disabled-->
 <a class="intent"   
    href="http://facebook.com/someProfile"   
    data-scheme="fb://profile/10000">facebook</a>

そして、私のJavaScriptはこのように動作します。
注：そこには小さなjQueryが混在していますが、必要でない場合は使用する必要はありません。

(function () {

    // tries to execute the uri:scheme
    function goToUri(uri, href) {
        var start, end, elapsed;

        // start a timer
        start = new Date().getTime();

        // attempt to redirect to the uri:scheme
        // the lovely thing about javascript is that it's single threadded.
        // if this WORKS, it'll stutter for a split second, causing the timer to be off
        document.location = uri;

        // end timer
        end = new Date().getTime();

        elapsed = (end - start);

        // if there's no elapsed time, then the scheme didn't fire, and we head to the url.
        if (elapsed < 1) {
            document.location = href;
        }
    }

    $('a.intent').on('click', function (event) {
        goToUri($(this).data('scheme'), $(this).attr('href'));
        event.preventDefault();
    });
})();

私はこれを要点として投げ捨てて、フォークして混乱させることもできます。必要に応じて、jsfiddleにGistを含めることもできます。
https://Gist.github.com/ChaseFlorell/5119047

2
Guillaume