カスタムURLスキームでアプリを起動させ、アプリが無ければストアに遷移させる

webページから↓を実現させてみました

• アプリを起動させる
• アプリがインストールされていなければストアへ遷移させたり何かしらアクションを起こさせる

やりたいこととしてはこちらのようなこと
http://qiita.com/oigus-k/items/03044da9a9f7f1754346
http://qiita.com/kenguy/items/9d9a8b7b6ca8b6984eb9

前提として、アプリ側にカスタムurlスキームを設定しておく必要があります。
また、ブラウザ環境ごとで挙動が異なることが多いので全てを網羅しているわけではありません。

基本的なロジック

1. iframeかlocation.hrefでアプリ起動を試みる
2. setTimeoutで遅れてフォールバック処理をする(ストアへ遷移など)
3. アプリやストアへ遷移したあとにブラウザに戻ってきたことを検知する

カスタムurlスキームでアプリを起動させる

アプリを起動させるには2通りあります。
どちらの方法でも大丈夫ですが、iOS9 safariではiframeでは起動しないようになりました。

iframeでDOMに追加する

var url = 'hoge://'; // カスタムURLスキーム
var iframe = document.createElement('iframe');
iframe.src = url;
document.body.appendChild(iframe);

location.hrefで飛ばす

var url = 'hoge://'; // カスタムURLスキーム
location.href = url;

アプリが無いことを検知する

アプリを起動しようとした後に、setTimeoutでフォールバック処理を走らせます。
アプリがインストールされていれば、アプリが起動するのでこのsetTimeoutの遅延処理が走らないです。
遅延処理が走ったということは、アプリが起動しなかったということなので、それを利用します。

// アプリを起動しようとする処理の後に
var _timerId = setTimeout(function() {
  console.log('on fallback'); // ここでストアへ遷移などさせます
}, 500); // 遅延時間はデバイスによりますが、500ミリ秒ぐらいが妥当かと

ブラウザに戻ってきたことを検知する

window.focus, blur

blurイベントの後のfocusイベントで検知します。

window.focus();
window.addEventListener('blur', onBlur);
function onBlur() {
  window.removeEventListener('blur', onBlur);
  window.addEventListener('focus', onFocus);
}
function onFocus() {
  console.log('on return browser');
}

visibilityChange

visibilitychangeは使えないブラウザやベンダープレフィックスが必要なブラウザがあるので、場合分けします。

if (document.hidden !== undefined) {
  document.addEventListener('visibilitychange', onVisibilityChange);
} else if (document.webkitHidden !== undefined) {
  document.addEventListener('webkitvisibilitychange', onWebkitVisibilityChange);
}
function onVisibilityChange() {
   if (!document.hidden) {
    console.log('on return browser');
  }
}

function onWebkitVisibilityChange() {
  if (!document.webkitHidden) {
    console.log('on return browser');
  }
}

requestAnimationFrame

ブラウザから離れた時はrequestAnimationFrameが回らないので、それを利用してブラウザから戻ってきたかどうかを検知します。

var rafTimer, rafId;
function observe(){
  this.rafId = window.requestAnimationFrame(observe);
  if (rafTimer !== false) {
    clearTimeout(this.rafTimer);
  }

  rafTimer = setTimeout(function() {
    console.log('on return browser');
    window.cancelAnimationFrame(rafId);
  }, 1000);
};
observe();

npmに公開してます

npm
https://www.npmjs.com/package/fallback-custom-scheme

参考

http://qiita.com/d2cs-kimura/items/b51ef73528fa66a35a9d
https://havelog.ayumusato.com/develop/javascript/e564-url-scheme-fallback.html