iOSWebアプリの「ホーム画面に追加」の説明ページを作成するにはどうすればよいですか

魚オタク

iOSデバイスのホーム画面に簡単に追加できる派手なアイコン付きのWebアプリがあります。

ただし、一部のアプリケーションでは、ユーザーがホーム画面に追加する前にSafariから表示すると、完全に別のページのように見えるものを読み込むことができることに気付きました。

この「特別な」ページは、ホーム画面に追加する方法をユーザーに指示します。追加すると、別のページになります。

Notibly、http://darksky.net 使用彼らは実際にアプリを作った前にこれを行うこと。ワークフローアプリは、ホーム画面にワークフローを追加するときにこれを行います。以下のスクリーンショットを参照してください。

説明書ページ

私は物事を正しく理解していませんか、それともSafariから見たときに別のページをロードし、ホーム画面に追加したときに別のページをロードする方法はありますか?

タイラー

サイト訪問者がJavaScriptを使用するiOSデバイスを使用しているかどうかを検出し、Cookieに基づいて指示を表示または非表示にすることができます

  1. デバイスがiOSを実行しているかどうかを確認します。

    if(!(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)){ return false; }
    
  2. 現在のビューがすでにwebappにあるかどうかを確認します。

    if(window.navigator.standalone == true){ return false; }
    
  3. このユーザーのCookieをすでに作成しているかどうかを確認します。

    if(document.cookie.search("alreadAsked") >= 0){ return false; }
    
  4. ページに「ホーム画面に追加」要素を表示するか、別のページにリダイレクトして、ユーザーにプロンプ​​トを表示します。

    document.getElementById("hiddenPrompt").style.display = 'inherit';
    
  5. ユーザーが追加した後にユーザーに尋ねないように、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]

編集
0

コメントを追加

0

関連記事

分類Dev

Magentoのブレッドクラムページにカテゴリの説明を表示するにはどうすればよいですか?

分類Dev

アプリからウィジェットをAndroidホーム画面に追加するにはどうすればよいですか?

分類Dev

yahooホームページのトップパネルでリンク/アイテムの数を取得するにはどうすればよいですか?

分類Dev

カスタムテンプレートをWordのホーム画面のリボンに追加するにはどうすればよいですか?

分類Dev

アプリのホームページのレイアウトをバイパスするにはどうすればよいですか?

分類Dev

アプリケーションアンドロイドからペイパルの説明を報告するにはどうすればよいですか?

分類Dev

アプリケーションアンドロイドからペイパルの説明を報告するにはどうすればよいですか?

分類Dev

iOS 7アプリを透明にして、ユーザーのホーム画面の画像を表示するにはどうすればよいですか?

分類Dev

ホーム画面にFireTVの「アイコン」を設定するにはどうすればよいですか?

分類Dev

アプリのホーム画面のグループ名を定義するにはどうすればよいですか?

分類Dev

プログラムでホーム画面アプリアイコンAndroidにバッジ番号を設定するにはどうすればよいですか?

分類Dev

Windows Phone 8.1ランタイムアプリのxamlページ自体に複数のAppBar / CommandBarを追加するにはどうすればよいですか?

分類Dev

アプリを再度開いたときにiOSホーム画面のPWAを更新するにはどうすればよいですか?

分類Dev

アプリを再度開いたときにiOSホーム画面のPWAを更新するにはどうすればよいですか?

分類Dev

アプリのようにWebページを実行するにはどうすればよいですか?

分類Dev

このgrepの動作をスペースで説明するにはどうすればよいですか?

分類Dev

ホーム画面アプリアイコンの通知カウンターを制御するにはどうすればよいですか?

分類Dev

ウェブサイトのショートカット(ホーム画面)のアプリ名を設定するにはどうすればよいですか?

分類Dev

検索フォームをショップページとカテゴリページのみに追加するにはどうすればよいですか?

分類Dev

ホームページにのみロゴを表示するにはどうすればよいですか?

分類Dev

ToDoアプリ用のJavaScriptカスタム子犬ボックスを追加するにはどうすればよいですか?(+ビデオ説明)

分類Dev

ホームページの直接の子を一覧表示するにはどうすればよいですか?

分類Dev

Tomcatホームページの代わりにlocalhost:8080でWebアプリケーションを直接開くにはどうすればよいですか

分類Dev

Reactのシングルページスクロールアプリに404ページを追加するにはどうすればよいですか?

分類Dev

Reactアプリの別のページにリンクするハイパーリンクを作成するにはどうすればよいですか?

分類Dev

Expressで別のホームページを提供するにはどうすればよいですか?

分類Dev

Firefoxでホームページの背景画像を変更するにはどうすればよいですか?

分類Dev

アプリ用にこのような「バージョン情報」ページを作成するにはどうすればよいですか?UIViewの下にUITableView(グループ化)を配置するにはどうすればよいですか?

分類Dev

Flexsliderの横にあるMagentoホームページに2つのバナーを追加するにはどうすればよいですか?

Related 関連記事

  1. 1

    Magentoのブレッドクラムページにカテゴリの説明を表示するにはどうすればよいですか?

  2. 2

    アプリからウィジェットをAndroidホーム画面に追加するにはどうすればよいですか?

  3. 3

    yahooホームページのトップパネルでリンク/アイテムの数を取得するにはどうすればよいですか?

  4. 4

    カスタムテンプレートをWordのホーム画面のリボンに追加するにはどうすればよいですか?

  5. 5

    アプリのホームページのレイアウトをバイパスするにはどうすればよいですか?

  6. 6

    アプリケーションアンドロイドからペイパルの説明を報告するにはどうすればよいですか?

  7. 7

    アプリケーションアンドロイドからペイパルの説明を報告するにはどうすればよいですか?

  8. 8

    iOS 7アプリを透明にして、ユーザーのホーム画面の画像を表示するにはどうすればよいですか?

  9. 9

    ホーム画面にFireTVの「アイコン」を設定するにはどうすればよいですか?

  10. 10

    アプリのホーム画面のグループ名を定義するにはどうすればよいですか?

  11. 11

    プログラムでホーム画面アプリアイコンAndroidにバッジ番号を設定するにはどうすればよいですか?

  12. 12

    Windows Phone 8.1ランタイムアプリのxamlページ自体に複数のAppBar / CommandBarを追加するにはどうすればよいですか?

  13. 13

    アプリを再度開いたときにiOSホーム画面のPWAを更新するにはどうすればよいですか?

  14. 14

    アプリを再度開いたときにiOSホーム画面のPWAを更新するにはどうすればよいですか?

  15. 15

    アプリのようにWebページを実行するにはどうすればよいですか?

  16. 16

    このgrepの動作をスペースで説明するにはどうすればよいですか?

  17. 17

    ホーム画面アプリアイコンの通知カウンターを制御するにはどうすればよいですか?

  18. 18

    ウェブサイトのショートカット(ホーム画面)のアプリ名を設定するにはどうすればよいですか?

  19. 19

    検索フォームをショップページとカテゴリページのみに追加するにはどうすればよいですか?

  20. 20

    ホームページにのみロゴを表示するにはどうすればよいですか?

  21. 21

    ToDoアプリ用のJavaScriptカスタム子犬ボックスを追加するにはどうすればよいですか?(+ビデオ説明)

  22. 22

    ホームページの直接の子を一覧表示するにはどうすればよいですか?

  23. 23

    Tomcatホームページの代わりにlocalhost:8080でWebアプリケーションを直接開くにはどうすればよいですか

  24. 24

    Reactのシングルページスクロールアプリに404ページを追加するにはどうすればよいですか?

  25. 25

    Reactアプリの別のページにリンクするハイパーリンクを作成するにはどうすればよいですか?

  26. 26

    Expressで別のホームページを提供するにはどうすればよいですか?

  27. 27

    Firefoxでホームページの背景画像を変更するにはどうすればよいですか?

  28. 28

    アプリ用にこのような「バージョン情報」ページを作成するにはどうすればよいですか?UIViewの下にUITableView(グループ化)を配置するにはどうすればよいですか?

  29. 29

    Flexsliderの横にあるMagentoホームページに2つのバナーを追加するにはどうすればよいですか?

ホットタグ

アーカイブ