Push.jsを使ってサイトに10分でブラウザプッシュ通知を導入する #JavaScript

最近、仕事でWebサービスにブラウザプッシュを導入することになり、まずは効果検証のために、最小限のプッシュ通知を導入してみようということになりました。

ユーザーデータを送ってセグメントプッシュができるサービスなど多機能なものは探せばいろいろと出てきますが、まずはサクッとブラウザプッシュを試したかったので、今回はさくっと実装できそうなPush.jsを使用することにしました。

この記事では普段はHTML / CSS しか触らない人でも理解できるように説明していきますので、わかる人にとっては冗長に感じるかもしれないので、そのような人は公式サイトをご覧ください。

この記事で説明すること

Push.jsを使った、最小構成のブラウザプッシュ通知が実装の仕方
プッシュ通知を許諾したか、拒否したかの効果測定の仕方

この記事で説明しないこと

ユーザーデータに基づいたセグメント配信など高度なブラウザプッシュ通知

=> 個人的には100%freeなOne Signalがおすすめです。

実装手順

ライブラリの読み込み

Push.jsはブラウザプッシュ通知を送るために必要なNotification APIを簡単に使えるようにしたライブラリです。

まず今回使用するPush.jsを読み込みましょう。
今回は楽をしたいので、CDNを使用します。

検索してみると、執筆した2018.7.28では最新版の1.0.7がありますので、これを使用します。
https://cdnjs.com/libraries/push.js

index.html

<html>
<head>
    <title>Push.js Sample</title>
</head>
<body>

<h1>Push.js Sample</h1>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.7/push.min.js"></script>
</body>
</html>

必要なメソッドの呼び出し

index.html

<script type="text/javascript">
    Push.create('Push 通知だよ！');
</script>

なんと、これだけです!

このHTMLにアクセスすると以下のようなプッシュ通知を送ってもいいかの許諾を求めるポップアップが表示されます。

（追記：下の画像はFireboxでの動作確認です。Chromeは許諾が表示されなくなってしまったので、もしかすると、最近のSSL対応の影響かもしれないです。）

通知を許可すると、このようにぴょこっとブラウザプッシュ通知が表示されます。

実際はもう少しいろいろオプションを設定することになると思います。

index.html

<script type="text/javascript">
    Push.create("Push 通知だよ！", {
        body: "本文だよここに表示されるよ",
        icon: './images/icon.png', // 右側に表示される画像のパス
        timeout: 4000,
        onClick: function () {
            location.href = 'https://yahoo.co.jp';
            this.close();
        }
    });
</script>

コードと画像を見比べれば、対応関係はわかるかと思います。
onClickを使って、ユーザーがクリックしたときの処理を書くことができます。
この例では、ヤフートップページに遷移するようにしています。

例えば、トップページにアクセスしたときに、最新の記事に遷移するプッシュ通知を出すとかに使えますね。

効果測定の仕方について

はい、ちゃんと効果測定しましょう。

index.html

Push.Permission.request(onGranted, onDenied);

function onGranted() {
    console.log('Granted!');
}

function onDenied() {
    console.log('Denied...');
}

Push.Permission.requestによって許諾確認のポップアップを表示します。
このメソッドの第一引数に許諾時のコールバック、第二引数に拒否時のコールバックを指定することができます。

この記事では詳しくは触れませんが、Google Analyticsを使っている方がほとんどかと思うので、イベントトラックキングをするといいかと思います。

例えばこんな感じでいいかと思います。

index.html

function onDenied() {
    ga('send', 'event', 'browser-push', 'denied', 'top', 1);
}

ブラウザの対応状況は？

公式サイトによると、

the Notification API allows modern browsers such as Chrome, Safari, Firefox, and IE 9+ to push notifications to a user’s desktop

とのことで、Chrome, Safari, Firefox, そしてIE9以上のデスクトップブラウザで使用できます。
なおEdgeに関しては、動作確認できているのと、Notification APIは対応しているので、問題なく動作するかと思います。

ページに30秒以上滞在しているユーザーにだけ許諾ポップアップを表示する

便利なブラウザプッシュ通知ですが、いきなり初めて訪問したサイトからプッシュ通知の許諾が表示されると、ちょっと怪しい...と思う人も少なくないかと思います。

渋谷を歩いている知らない人にいきなりLINE教えて？っていうようなもんですよね。

せっかくなので、少し仲良くなってから許諾を求めるようにすれば許諾率は上がるのではないでしょうか？
ということで、30秒以上ページをみているユーザーにだけ表示するサンプルコードをおいておきます。

index.html

<html>
<head>
    <title>Push.js Sample</title>
</head>
<body>

<h1>Push.js Sample</h1>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.7/push.min.js"></script>

<script type="text/javascript">
    setTimeout(function () {
        Push.Permission.request(onGranted, onDenied);
    }, 30 * 1000);

    function onGranted() {
        console.log('Granted!');
    }

    function onDenied() {
        ga('send', 'event', 'browser-push', 'denied', 'top', 1);
    }

    if (Push.Permission.has()) {
        Push.create("Push Notification title here", {
            body:    "Body text here",
            icon:    './images/icon.png', // Image path displayed right side
            timeout: 4000,
            onClick: function () {
                location.href = 'https://yahoo.co.jp'
                this.close();
            }
        });
    }

</script>
</body>
</html>

まとめ　

ブラウザプッシュがここまで簡単に導入できると思っていなかったので、気になっているけどなんだか難しそうだからと避けていた人はぜひまずは導入みてくださいー！