ネイティブPushとWebPushとWeb Notificationの3つの通知方法を整理してみた

Push通知はスマホでは当たり前の機能になって来ましたね。
それにともなってスマホじゃないサービスでもPush通知したいんじゃ!みたいな相談を受けることも多くなりました。
そこでそれっぽく見せる代替技術とかについて整理してみます。

現在通知系の仕組みは大きく3つあります。

  • Web Notification

 単一のブラウザ内で通知を行う

  • Web Push

 単一のブラウザに対しWebサーバからPush通知を行う

  • ネイティブPush

 スマートホンに対しWebサーバからPush通知を行う

それぞれ詳しく説明していきます。

Web Notification

単一のブラウザ内で通知を行う方式
W3Cのページ:https://www.w3.org/TR/notifications/
2013年ぐらいからあり、Firefox 22、Chrome26 以後であれば動く。Safariも動くようだが試していない。
デバイスの対応はAndroidのみ。MaxOSは対応しているがiOSは対応しておらずiPhoneで動かすことは出来ない。

Note: This document pertains to OS X only. Notifications for websites do not appear on iOS.

https://developer.apple.com/library/mac/documentation/NetworkingInternet/Conceptual/NotificationProgrammingGuideForWebsites/Introduction/Introduction.html


PCブラウザ用だが裏の通信もなんもなくてJSの世界のみで実装可能。とりあえずそれっぽい画面をデモで作りたければこれでいい。

サンプルソース
function notify(message) {
    if (!("Notification" in window)) {
        alert("ブラウザが未対応です");
    } else if (Notification.permission === "granted") {
        // 通知が許可されているか確認し、許可されていれば通知を出す
        makeNotification(message);
    } else if (Notification.permission !== 'denied') {
        // 通知がまだ許可されていなかった場合に許可を求める
        Notification.requestPermission(function (permission) {
            //ユーザが許可したら通知を出す
            if (permission === "granted") {
                makeNotification(message);
            }
        });
    }
}
function makeNotification(message) {
    var notification = new Notification("お試しアプリ", {body: message, icon: "logo.png"});
    notification.onclick = function () {
        notification.close();
        window.open("http://garapon.hatenablog.com/");
    };
}

Web Push

単一のブラウザに対しWebサーバからPush通知を行う方式
見た目はWeb Notificationと同様だが、サーバーからPush通信を行えることが凄い!
Chrome 42 からAndroid含みで対応した画期的な仕組み。FireFoxだと44以後で対応。
デバイスはやっぱりAndoridのみでiOS版のChromeでは使えない。

W3Cのページ:http://w3c.github.io/push-api/
対応ブラウザ:Push API - Web APIs | MDN

サンプルソース

以下のページがわかりやすい。デモページもあるのでぜひ見てみてほしい。
qiita.com

デモ: https://labs.othersight.jp/webpushtest

ネイティブPush

スマートホンに対しWebサーバからPush通知を行う方式。圧倒的な開封率とCVRを誇る。
Pushとか通知といわれたらほぼこれのこと。
WebアプリじゃなくてスマホアプリをリリースするNo1の理由なのではなかろうか。
Pushに対抗すべくBotがこれから増えていくと思うが数年は優位性を発揮するであろう必須技術。

現状APNS(Apple Push Notification Service)とGCM(Google Cloud Messaging)の2つの仕様がありiOSAndroidで微妙に違う。
ペイロードデータの上限やマルチキャスト等異なるので、対象のデバイス、OSバージョンにあわせてちゃんと調べたほうがよい。
たとえば通信サイズや表示制限はこんな感じで異なる。

ペイロード
 iPhone
  iOS7以前:256バイト
  iOS8:2048バイト
 Android
  4096バイト

表示
 iPhone
  iOS6    :全角22文字 
  iOS7    :全角35文字
  iOS8 iPhone5:全角38文字
  iOS8 iPhone6:全角48文字
 Android
  カスタマイズ次第(でふぉだと20文字で切れる。)

実装方法や例はたくさんあると思うので省く。
中継してくれるサービスも多々ある。