BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

html5 目覚ましアプリミニノート

2022-01-31 16:37:20

最近、アプリから共有されるH5ページには、すぐに開けるボタンが必要で、ローカルにアプリがインストールされている場合は、直接ローカルアプリを起こし、インストールされていない場合はダウンロードに飛ぶという要件に出くわしました。これはごく普通のアクセス促進・誘導戦略です。フロントエンドのガジェッターはこんなこと初めてで、鼻歌交じりにドヤ顔でGoogleの旅に出なければならないのです。

探査の旅の期間の後、良い互換性プログラムを行うには、内部の学習の多くを発見し、あなたは、さまざまなプログラムに適応し、さまざまな状況を考慮する必要があり、ユーザーがモバイルブラウザで開いているか、WeChatで開く、またはPCで開いているとしましょう、ユニバーサルTencentアプリストアは直接APPリンクを開いて閉じられるかどうかなど、これはコードの実装になり複雑でエラーしやすい、多くのAndroidプラットフォームモデル、多くのブラウザや他の互換性の問題があります。時間の関係で、今回は主に、まずアプリのジャンプにURL Schemeを使用する、より一般的な方法を紹介します。

URL Scheme - コールエンド・メディア

ソース

一般的に、私たちが使っているスマートデバイスには、私たちの個人情報がたくさん入っています。例えば、連絡先、銀行/クレジットカード情報、Paypal/ペイパル/大手ショップのアカウントパスワード、写真、さらには旅行や位置情報などです。

公式のものであれ、どこかのストアからインストールしたものであれ、デバイス上のすべてのアプリがこれらの情報に自由にアクセスできるようになれば、嫌がらせのメッセージや電子メールを受け取ったり、もっとひどい目にあったりする可能性があります。すべてのスマートデバイスとオペレーティングシステムにとって、この情報をいかにして他のアプリケーションの手に渡さないか、あるいはデバイスの所有者が知り、許可を得た上で、いかにして情報を手に入れないようにするかが、セキュリティの中核をなす問題です。この問題に対処するため、Appleは「サンドボックス」と呼ばれるメカニズムを使用しています。アプリケーションは、それがアクセスしてもよいと宣言したリソースにのみアクセスすることができます。App Storeに提出されるすべてのアプリケーションは、このメカニズムに従わなければなりません。

サンドボックスは、セキュリティに関しては良い解決策ですが、少しやり過ぎなところがあります。機密性の高い個人情報を公開したくないからと言って、他のアプリとすべてを共有したくないというわけではありません。そこで、アプリのコミュニケーションを助けるヘルパーがどうしても必要なのですが、URL Schemesはそのツールなのです。

URLスキームとは

[scheme]://[host]/[path]? [クエリ]です。

https://www.baidu.com を例にとると、スキームは当然 https で、その後に渡されたパラメータが継ぎ足されています。URLスキームは特に厳密なものではないので、後半のパラメータの正確な定義はアプリ開発者のカスタマイズに委ねられます。

アプリの位置を特定するために、アプリには識別子が必要です。これがURLのScheme部分です。

しかし、この2つにはいくつかの重要な違いがあります。

  • ホームページであれ、サブページであれ、すべてのページにはURLが必要です。しかし、すべてのアプリが独自の URL スキームを持っているわけではなく、また、すべてのアプリがすべての機能に対応する URL スキームを持っているわけでもなく、ほとんどすべてのアプリがすべての機能に対応する URL を持っているわけではありません。アプリがURLスキームをサポートしているかどうかは、そのアプリの作者がURLスキーム関連のコードを作品に追加しているかどうかで決まります。
  • URLは1つのウェブページにしか対応しませんが、すべてのURL Schemeが1つのアプリにしか対応しないわけではありません。これは、AppleがURL Schemesを重複させないことを必須条件としていないためで、アプリがAlipayのURL Schemesを使って決済アカウントやパスワードをブロックした例もあります。
  •  WebページのURLは比較的予測しやすいですが、URL Schemesは規格がないため推測が非常に難しく、アプリのURL Schemesを推測するのは現実的ではありません。

フロントエンドの開発者として、URL Schemesの原理を掘り下げることはせず、アプリ開発者に任せます。次に、本題に入りましょう。もちろん、最初のステップは、クライアントがアプリのUrl Schemesを提供することです。

ブラウザでスキームを開く

ブラウザでschemeを開くのは、別のhttpアドレスを開くようなものです。aタグで開くことができる。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Open App</title>
</head>
<body>
<a href="luwei://" id="open">Open App</a>
</body>
</html>

上記H5ページ内のリンクをクリックすると、対応するアプリを起動しようとしますが、ブラウザによっては、アプリを開いてよいかどうかを確認するアラートボックスがポップアップ表示される場合があります。

オープンスキームに対応するローカルアプリがない場合、クリックに反応しません。

もちろん、JavaScriptのコードで開くこともできます。適切なイベントトリガーとハンドリングを追加するだけです。

JavaScriptのコードで接続を開くには、いくつかの方法があります。

  • 開く必要のあるURLを指す新しい隠しiframeを作成します。
  • window.locationまたはwindow.location.hrefで現在のページを更新する
  • open url を指す新しい hidden a タグを作成し、open link イベントを発生させます。
  • 新しいaタグが作成され、開かれるスクリプトが動的に作成されます。 
// The way to open the url
var urlOpen = {
  // Bad support in ios
    'iframe' : function(url) {
        var iframe = document.createElement('iframe');
        iframe.style.display = 'none';
        iframe.src = url;
        document.body.appendChild(iframe);
    },
    'location' : function(url) {
        window.location.href = url;
    },
    'href' : function(url) {
        var a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        document.body.appendChild(a);
        a.click();
    },
    'script' : function(url) {
        var script = document.createElement('script');
        script.setAttribute('type', 'test/javascript');
        script.innerHTML = '(function(){' +
            'var a = document.createElement("a");' +
            'a.style.display = "none";' +
            'a.href = "' + url.replace(/"/g, '\\\"') + '";' +
            'document.body.appendChild(a);' +
            'a.click();' +
            '})()';
        document.body.appendChild(script);
    },
    'open' : function(url) {
        window.open(url);
    }
};

上記の方法は、インストールされているアプリのデバイスでアプリをウェイクアップの機能を解決するために、アプリがインストールされているかどうかを判断することはできませんが、インストールは、ダウンロードリンクにジャンプされます。

アプリがインストールされているかどうかは、ブラウザで判断する

ブラウザは実際に携帯電話にアプリがインストールされているかどうかを判断することができないので、推測で判断するしかない。

Html5には以下のイベントとプロパティが用意されており、これを活用することで、JavaScriptでページがバックグラウンドにあるかどうかを判断し、オープン成功の判定を行うことができます。

  • pagehide : ページが隠されたときに発生します。
  • visibilitychange : ページハイドが現在表示されていないときに発生します (タブの切り替えもこのイベントのトリガーになります)
  • document.hidden : ページが非表示のときはtrue、表示されているときはfalseになります。

これらのイベントやプロパティは、すべてのブラウザでサポートされているわけではありません。以下は、openBtnというidを持つボタンにopenschemeまたはdownloadイベントを追加する例ですが、Androidのバージョン4.4未満ではサポートされていません。 

    var downloader, 
    scheme = 'luwei://', // the address of the app scheme that needs to be opened
    iosDownload = 'http://xxx.com'; // the app download address if the scheme fails to open
    andDownload = 'http://xxx.com';
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
    var isIOS = ! !u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios terminal

// Add a click event handler to the button with id openBtn
    document.getElementById('openBtn').onclick = function () {
        window.location.href = scheme; // try to open scheme 
 
        // set a timed download task of 3 seconds to download the app after 3 seconds
        downloader = setTimeout(function(){
            if(isAndroid) {
                window.location.href = andDownload;
            }
            if(isIOS) {
                window.location.href = iosDownload;
            }
          
        }, 3000);
    };
 
    document.addEventListener('visibilitychange webkitvisibilitychange', function () {
        // If the page is hidden, presumably the scheme is opened successfully and the download task is cleared
        if (document.hidden || document.webkitHidden) {
            clearTimeout(downloader);
        }
    });
    window.addEventListener('pagehide', function() {
        clearTimeout(downloader);
    });

完璧な解決策はない

WeChat でアプリを起こせず、"ブラウザで開く" が必要な理由は、WeChat にはすべての共有リンクに対するスキームブロックがあり、共有リンク内のスキームの呼び出しはすべて WeChat によってブロックされるからです。一部のアプリはWeChatで開くことができますが、これはWeChatにホワイトリストがあり（関係があると良い）、ホワイトリストにある共有リンクについては、スキームの呼び出しがブロックされないためです。
この記事はちょうど小さなレンガで、アプリを起動するために、より一般的な簡単な方法を導入し、プログラムは特に良い互換性は、右ではない。私はそれが完璧なソリューションを作るために周りのレンガを移動し続けることをお勧めだと思います。

今回の記事はこんな感じです。勉強になるし、スクリプトハウスをもっと応援してほしいです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します