iOSデバイスのホーム画面に簡単に追加できる派手なアイコン付きのWebアプリがあります。
ただし、一部のアプリケーションでは、ユーザーがホーム画面に追加する前にSafariから表示すると、完全に別のページのように見えるものを読み込むことができることに気付きました。
この「特別な」ページは、ホーム画面に追加する方法をユーザーに指示します。追加すると、別のページになります。
Notibly、http://darksky.net 使用彼らは実際にアプリを作った前にこれを行うこと。ワークフローアプリは、ホーム画面にワークフローを追加するときにこれを行います。以下のスクリーンショットを参照してください。
私は物事を正しく理解していませんか、それともSafariから見たときに別のページをロードし、ホーム画面に追加したときに別のページをロードする方法はありますか?
サイト訪問者がJavaScriptを使用するiOSデバイスを使用しているかどうかを検出し、Cookieに基づいて指示を表示または非表示にすることができます。
デバイスがiOSを実行しているかどうかを確認します。
if(!(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)){ return false; }
現在のビューがすでにwebappにあるかどうかを確認します。
if(window.navigator.standalone == true){ return false; }
このユーザーのCookieをすでに作成しているかどうかを確認します。
if(document.cookie.search("alreadAsked") >= 0){ return false; }
ページに「ホーム画面に追加」要素を表示するか、別のページにリダイレクトして、ユーザーにプロンプトを表示します。
document.getElementById("hiddenPrompt").style.display = 'inherit';
ユーザーが追加した後にユーザーに尋ねないように、Cookieを保存します。代わりに、ユーザーが[完了]ボタンをクリックした後にCookieを保存して、ホーム画面に追加するか、[これを再度表示しない]ボタンをクリックするまでユーザーにプロンプトを表示することもできます。
document.cookie = "alreadAsked=true; expires=Thu, 18 Dec 2099 12:00:00 UTC";
これで、この関数はページの読み込み時に実行されます。
// On page load
(function() {
// Check if iOS
if(!(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)){ return false; }
// Check if already in webapp
if(window.navigator.standalone == true){ return false; }
// Check if you already asked them to add to homescreen
if(document.cookie.search("alreadAsked") >= 0){ return false; }
// Ask user to add to homescreen
document.getElementById("hiddenPrompt").style.display = 'inherit';
});
// After clicking a button to dismiss prompt
function hidePromptInFuture(){
// Do not show prompt again
document.cookie = "alreadAsked=true; expires=Thu, 18 Dec 2099 12:00:00 UTC";
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加