ホーム>Web デザインのチュートリアル>HTMLチュートリアル

HTML5でアプリを呼び出す方法

著者：Eve Cole 更新時間：2025-02-17 10:48:01

h5 がアプリでこのニーズを呼び起こすのは一般的です。モバイルが王様の時代において、h5 はアプリのトラフィックの迂回において重要な役割を果たします。

現在使用している呼び出し方法は URL スキーム (iOS と Android の両方のプラットフォームでサポートされています) です。ネイティブ APP の開発中にスキームを登録するだけで、ユーザーがそのようなリンクをクリックすると、自動的に APP にジャンプします。

3 つの覚醒オプション

iframe

 var last = Date.now(), doc = window.document, ifr = doc.createElement('iframe');//非表示の iframe を作成します ifr.src =nativeUrl;ifr.style.cssText = 'display:none;border :0;幅:0;高さ:0;';doc.body.appendChild(ifr);setTimeout(function() { doc.body.removeChild(ifr); // setTimeout が 2000 未満の場合、通常は呼び出しが失敗します。 if (Date.now() - last < 2000) { if (typeof onFail == 'function') { onFail() }; { //ポップアッププロンプトまたはダウンロード処理など} } else { if (typeof onSuccess == 'function') { onSuccess() } }}; 1000);

iframe ソリューションの呼び出し原理は、プログラムがバックグラウンドに切り替わると、タイマーが遅れることです (タイマーが不正確になるもう 1 つの状況)。アプリが起動されている場合、Web ページは必然的にバックグラウンドに入ります。ユーザーがアプリから戻ると、通常、時間は 2 秒を超えます。アプリが起動されていない場合、Web ページは基本的にバックグラウンドに入りません。時間は 2 秒を超えません。

window.location.href は直接ジャンプします

window.location.href = ネイティブ URL;

タグが呼び起こす

<a href=nativeUrl>アプリを取り消す</a>

3 つの喚起シナリオのブラウザ テスト

  1. X は覚醒が失敗したことを意味し、√は覚醒が成功したことを意味します。
  2. 赤いマークはページに入ってすぐに発動することを示し、緑のマークは手動イベント操作後に発動することを示しています。
  3. iOS テスト マシン: iPhone 6p、Android テスト マシン: Xiaomi 1s

iframe はアプリのテスト結果を呼び出す

window.location.href はアプリのテスト結果を呼び出します

タグはアプリのテスト結果を呼び出す

iframe と window.location.href がコントラストを呼び起こす

iframe、window.location.href、およびタグは、3 つの間の比較を呼び出します。

テスト結果の分析

まず、テストした機種とブラウザは限られており、上記の結果は参考値です。

iframe 呼び出しと location.href を比較すると、次のことがわかります。

  1. iOS の場合は、location.href ジャンプの方が適切です。これは、このメソッドにより Safari でアプリを正常に呼び出すことができるためです。言うまでもなく、iPhone のデフォルトブラウザとして Safari が重要ですが、WeChat と QQ クライアントの場合、iOS のこれら 2 つの方法は役に立ちません==
  2. Android の場合、ページが直接呼び出される場合、iframe と location.href は同じですが、イベント駆動型の場合、iframe は location.href よりも適切に呼び出されます。
  3. テストを通じて、多くのブラウザーでは、ページに入ったときの直接呼び出しとイベント駆動型呼び出しのパフォーマンスが異なることがわかりました。簡単に言えば、直接呼び出しの方が失敗することが多くなります。

上記の比較分析により、Android では iframe を使用し、iOS では window.location.href を使用することがより適切であることがわかりました。

ページに入るときの直接呼び出しとイベント駆動型呼び出しの違い

Android におけるこれら 2 つの覚醒シナリオには、iframe によって引き起こされるか location.href によって引き起こされるかにかかわらず、明らかな違いがあります。例として Xiaomi 1s のクロムを取り上げます。

 <a id=goApp href=javascript:void(0);>クリックしてアプリを開きます</a>

イベントをバインドすると手動で呼び出しが行われます。

 //呼び出しに成功しました window.onload = function () { $('#goApp').on(click, function () { window.lib.callapp(nativeUrl);//iframe //window.location.href =nativeUrl; });};

ページを入力して直接呼び出します:

 //失敗したことを呼び出す window.onload = function () { window.lib.callapp(nativeUrl);//iframe //window.location.href =nativeUrl;};

イベントのバインド、JS の呼び出し

//失敗したことを呼び出します window.onload = function () { $('#goApp').on(click, function () { window.lib.callapp(nativeUrl);//iframe //window.location.href =nativeUrl; $('#goApp).trigger('click');};

当初 $('#goApp).trigger('click'); の方法は手動クリックと同じだと思っていましたが、実際のパフォーマンスは js トリガーイベントのパフォーマンスが直接ページジャンプと同じくらい無効です。

参考ブログ投稿から、Android プラットフォームとさまざまなアプリ メーカーが大きく異なっていることがわかります。たとえば、Chrome は 25 以降、js を介したスキーム ジャンプ (非ユーザー クリック) のトリガー、iframe src アドレスの設定などをサポートしなくなりました。これからも。したがって、js トリガーとユーザーの直接クリックの間には依然として大きな違いがあり、これはオーディオ再生の制限と同様である可能性があります。

やっと

上記のテストと分析の結果、iOS では window.location.href を使用し、Android では iframe を使用するのがより適切であると基本的に判断されました。 iframe を使用して呼び出しを行う場合、通常は直接ダウンロードすることで呼び出しの失敗を処理します。ただし、ここで問題があります。つまり、呼び出し後にブラウザーに戻った場合、ブラウザーは呼び出しが成功したかどうかを検出できません。呼び出しが成功しても、ブラウザは引き続きポップアップ表示されますが、情報をダウンロードするエクスペリエンスは非常に貧弱です。もちろん、成功または失敗のコールバック関数も処理する必要があります。おそらく、シナリオは呼び出すだけでよく、失敗後にダウンロードする必要はありません。

iPhone 上で location.href を使用してネイティブ アプリを呼び出すことについては、現在のページを直接処理するよりも、中間ページにジャンプする方法が優れている可能性があります。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。

関連記事