「プッシュさん」を使ってChromeのブラウザプッシュに対応した話。

昨年から興味を持ちつつつも、諸々の理由で導入を諦めていた「ブラウザプッシュ」。
かなり手軽に導入できるツールが登場したので、サクッと導入してみました。

Contents

1 Chromeのブラウザプッシュ通知とは？
2 「プッシュさん」というサービスを使えば超簡単にプッシュを導入できる！
3 プッシュを送るのも1分くらいで行けますね！
4 どうせなら、AndroidのChromeのバージョン43以上にだけ導線を設置しよう！
- 4.1 ちょっと解説

Chromeのブラウザプッシュ通知とは？

Chromeのバージョン42から導入されたプッシュ機能です。
Service Workerという仕組みによって、アプリのプッシュ通知のようにサービス側からお知らせを届けることができます。

ちなみにChromeはiPhone版もリリースされていますが、Google Cloud Messaging(GCM)という仕組みを使っているため、iPhone版にプッシュ通知を送ることはできません…。

というわけで、サイトオーナー的にはめちゃめちゃメリットがある「ブラウザプッシュ」機能ですが、導入には以下のハードルが。
・SSL(HTTPS)に対応したウェブサーバーの用意
・JavaScriptを使ったクライアントのプログラム
・プッシュ通知の送信を行うサーバーサイドプログラム

私は、現在契約しているサーバーではSSL化が難しいのと、サーバーサイドプログラムを走らせる環境も用意できていなかったため、導入を諦めていました。

「プッシュさん」というサービスを使えば超簡単にプッシュを導入できる！

プッシュさん

ほんの5分くらいでプッシュ通知を導入できる、超お手軽ツール「プッシュさん」。
超すてきなサービスがリリースされていました！！！

導入の手順はこちらにまとまっているのでご参考に↓↓
<a href="http://qiita.com/honmaaax/items/99bd6e1d5c05fc1e2de4" target="_blank">プッシュ通知 – WEBプッシュサービス「プッシュさん」アカウント登録の流れメモ – Qiita</a>

プッシュの登録ページはプッシュさん側にあるので、サイト側でやることは登録ページへのリンクを設置するだけです。
ちなみに、登録ページのデザインや、プッシュに表示するアイコンなどもカスタマイズ可能です。

なお、現在プッシュが送れるのはAndroidのChrome 43以上のみ。PC版のChromeへのプッシュにはまだ対応していません。

プッシュを送るのも1分くらいで行けますね！

プッシュさんのダッシュボードから「配信予定日時」「タイトル」「メッセージ」「遷移先URL」を入力するだけでプッシュが作成できます。
本当に超カンタン！！！

こんな感じでプッシュが届きます。マジでお手軽です。

プッシュさんのURLが表示されるのがちょっと微妙。。。
全然関係ないけど、あんしんスキャンで1件の脅威が検出されとる！！

プッシュのメッセージをクリックすると遷移先URLに飛びます。
ダッシュボードから送信数が送れないのがちょっと微妙ですが、URLは任意に設定できるのでトラッキングパラメータを仕込んでおけば効果測定もある程度できますね！

どうせなら、AndroidのChromeのバージョン43以上にだけ導線を設置しよう！

プッシュを送れないiPhoneやPC版に導線を置いても仕方ないので、AndroidのChromeバージョン43以上にだけ導線を置いてみることにしました。

こんな感じでどーーーーんと表示させてます。

表示はjQueryを使って、動的に行っています。
ソースコードは以下。
デザイン部分はサイトのベースに使っているBootstrapに依存しています。
jQueryと、jquery.cookie.jsを使っているので、以下のjsファイルより前に読み込ませておいてください。

var url = "https://pushsan.com/applications/GDo569ef20cd70cb"

/** cookie */
var closable = true
var cookie_name ="pushsanbanner"
var cookie_expires = 3650

var string = ""
string += ""
string += "Androidをお使いのみなさん！このサイトのお役立ち情報を
プッシュ通知で受け取ってみないか！！"
string += "プッシュ通知を受け取る"
string += "ウインドウを閉じる"
string += ""
string += ""

jQuery(document).ready(function(){

  var agent = navigator.userAgent;
  var chrmv = 0;

  if ( (/Android/.test(agent)) && ( /Chrome/.test(agent)) ){
    var t=agent.indexOf("Chrome")
    var n=agent.indexOf(" ",t)
    var a=agent.substring(t+7,n)
    chrmv = Number(a.split(".")[0])
  }

  if(chrmv >= 43){
      if ( (!closable) || ($.cookie(cookie_name) != 1) ){
        jQuery('body>*:first-child').before(string);
      }
    }

  jQuery("#close").click(function () {
    jQuery("#pushsanbanner").slideUp('fast');
    if (closable){
      $.cookie( cookie_name, 1, { expires: cookie_expires } )
    }
    return false;
  })
  .css('cursor','pointer');
});

ちょっと解説

一番最初の

var url = "https://pushsan.com/applications/GDo569ef20cd70cb"

の部分が、「プッシュさん」登録ページのURLです。
アカウント開設するとページが作成されるので、作成されたURLに書き換えておいてください。

/** cookie */
var closable = true
var cookie_name ="pushsanbanner"
var cookie_expires = 3650

導線をかなりデカめに置くので、邪魔に感じる人のために「閉じる」ボタンも置いてます。
閉じるボタンを押したという情報はcookieに保存するので、cookie名（cookie_name）と寿命（cookie_expires）を決めます。
閉じるボタンを押した人には基本二度と出なくていいと思うので、ひとまず10年後(3650日後）を寿命としました。
閉じるボタンを使いたいくない人はclosableをfalseにしておいてください。

var string = ""
string += ""
string += "Androidをお使いのみなさん！このサイトのお役立ち情報を
プッシュ通知で受け取ってみないか！！"
string += "プッシュ通知を受け取る"
string += "ウインドウを閉じる"
string += ""
string += ""

ここが実際に表示するバナーのコード。
htmlを文字列としてもたせていて、cssもインラインで直接記述しています。
ここはお好みにでカスタマイズしてください。
バナー全体のid（id='pushsanbanner'）と、閉じるボタンのid（id='close'）は消さないでね♪

var agent = navigator.userAgent;
var chrmv = 0;

if ( (/Android/.test(agent)) && ( /Chrome/.test(agent)) ){
  var t=agent.indexOf("Chrome")
  var n=agent.indexOf(" ",t)
  var a=agent.substring(t+7,n)
  chrmv = Number(a.split(".")[0])
}

if(chrmv >= 43){
  if ( (!closable) || ($.cookie(cookie_name) != 1) ){
    jQuery('body>*:first-child').before(string);
  }
}

ここが表示の制御部分。user agentからAndroidでChromeでバージョンが43以上であることを判定。
対象のものにだけ、バナーを表示させています。
jQuery.xxxと$.xxxの記述が混在しているのは、wordpressで使用している他のプラグインとのコンフリクト対策です。サイトによっていろいろ状況が異なると思いますので、うまいことやってください！

jQuery("#close").click(function () {
  jQuery("#pushsanbanner").slideUp('fast');
  if (closable){
    $.cookie( cookie_name, 1, { expires: cookie_expires } )
  }
  return false;
})
.css('cursor','pointer');

最後のところが「閉じる」ボタンの処理。閉じるを押した際にcookieを作成します。
これで次回からはバナーが表示されなくなります。
最後にcursor:pointerを指定するのをお忘れなく。なぜかAndroideではこうしておかないとクリックイベントが飛ばないのです。。

以上！！

という感じで超お手軽に導入できるプッシュさんのプッシュ通知。
AndroidでChromeでしかもバージョン43以上って、かなり限定的（ちなみにうちのサイトだと全セッションの8%くらい）ですが、こうもお手軽に試せるのであれば導入しておいてもいいんじゃないでしょうか。

ちなみに、今回設定したバナーは一度でも閉じるを押されると10年間表示されないので、どこかに固定的な導線は設置しておいても良いと思いますよ！

※AndroidでChromeでバージョン43以上の選ばれた8%の皆さん。よろしければプッシュ登録お願いします！多分、ほとんど使わないと思いますが…。
ultimate-ez.com/プッシュさん