勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

iPhoneにホーム画面登録を促すダイアログを表示

   2024/01/13  JavaScript

スマホ用のサイトでお気に入り登録を促すというのは以前に無理という結論が出たけれども、ホーム画面登録を促すダイアログなら「Mobile Bookmark Bubble」というライブラリでいけるみたい。

 

Mobile Bookmark Bubble

https://code.google.com/p/mobile-bookmark-bubble/source/browse/

※zipのところでダウンロード出来る。

 

使い方

bookmark_bubble.jsを読み込む。あと、ホーム画面用の画像を用意して以下で呼び出しておく。

<link rel="apple-touch-icon-precomposed" href="ホーム画面用の画像" />

呼び出したいページで以下を記述する。

window.addEventListener('load', function() {
  window.setTimeout(function() {
    var bubble = new google.bookmarkbubble.Bubble();

    //var parameter = 'bmb=1';
    var parameter = '#';

    bubble.hasHashParameter = function() {
      //return window.location.hash.indexOf(parameter) != -1;
      return location.hash == "" && location.href.indexOf(parameter) == location.href.length-1;
    };

    bubble.setHashParameter = function() {
      if (!this.hasHashParameter()) {
        //window.location.hash = parameter;
        location.href = parameter;
      }
    };

    bubble.getViewportHeight = function() {
      window.console.log('Example of how to override getViewportHeight.');
      return window.innerHeight;
    };

    bubble.getViewportScrollY = function() {
      window.console.log('Example of how to override getViewportScrollY.');
      return window.pageYOffset;
    };

    bubble.registerScrollHandler = function(handler) {
      window.console.log('Example of how to override registerScrollHandler.');
      window.addEventListener('scroll', handler, false);
    };

    bubble.deregisterScrollHandler = function(handler) {
      window.console.log('Example of how to override deregisterScrollHandler.');
      window.removeEventListener('scroll', handler, false);
    };

    bubble.showIfAllowed();
  }, 1000);
}, false);

 

参考サイト 

http://d.hatena.ne.jp/a_kimura/20110507/1304801259

 

その他

残念ながらAndroidは対応してないみたい。あとAndroidは解像度が機種によって多様だったりで難しいのかも。

 - JavaScript

  関連記事

Leafletで「Leaflet.markercluster」プラグインを導入してマーカークラスタ機能を追加する方法

LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で ...

無料でシンプルなアイコンを設置できる「Feather」の利用方法

ページ上にアイコンを表示したい場合Font Awesomeを使うことが多いが、個 ...

JavaScript / jQueryにてページ表示時に指定したテキストボックスにフォーカスさせる方法

ページを開いた際に指定したテキストボックス(input type="text") ...

javascriptやjQueryで画像を書き換えても変わらない場合

けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...

jquery.cookie.jsで「$.cookie is not a function」エラー

フロントエンド側でCookieを利用したい場合jquery-cookieを用いる ...