web-dev-qa-db-fra.com

URL de secours du schéma d'URI de l'application

Je travaille sur un site Web convivial pour mobile et aime l'idée que mes URL soient ouvertes dans des applications natives. comme pour Google Maps ou Facebook en utilisant des protocoles URI personnalisés, tels que fb: // ou comgooglemaps: //. Malheureusement, sur un ordinateur de bureau, le navigateur (Chrome, par exemple) ne sait pas ce que signifie fb: // et ces liens ne font absolument rien. J'ai besoin d'ajouter une sorte de repli comme:

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

Malheureusement, passer toute la journée sur Google n’a pas permis de trouver une solution unique. Actuellement, le seul travail que je peux faire est de créer 2 ensembles de liens et d'afficher ou de masquer un lien donné en fonction de requêtes de médias. Cela ressemble à une solution négligée. J'espère que quelqu'un d'autre ici aura une meilleure idée.

urlhtml5jqueryweb-applications
3
john.weland

Je pense avoir une solution de travail. (voir 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>

Et mon javascript fonctionne comme ça.
note: il y a un peu de jQuery mélangé ici, mais vous n'avez pas besoin de l'utiliser si vous ne voulez pas. 

(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();
    });
})();

J'ai aussi écrit cela comme un Gist que vous pouvez bousiller et déconner. Vous pouvez également inclure le Gist dans un jsfiddle si vous le souhaitez.
https://Gist.github.com/ChaseFlorell/5119047

2
Guillaume