Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

kwst
Front Engineer
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした