Push Notifications for the webEiji Kitamura | April 4th 2015

なぜウェブのプッシュ通知は重要なのか？

● ユーザーエンゲージメントの手法○ メール○ ソーシャルメディア○ ネイティブアプリ

● モバイルウェブのプッシュ通知○ 登録・インストール不要○ ページにアクセスし、パーミッションを許可するのみ○ いつでもどこでも、通信さえできれば届けられる○ 通知受信時にブラウザが立ち上がっている必要はない

Demo

https://simple-push-demo.appspot.com/

How it works

HTTPS

HTTP PushMobile BrowserService Worker Server

Google Cloud Messaging Server

HTTP + XMPP POST

How to set up GCM● console.developers.google.com にアクセス● 「プロジェクトを作成」● 「概要」から「プロジェクト番号」をメモ● 「API」から下記を enable する

○ Google Cloud Messaging for Android○ Google Cloud Messaging for Chrome

● 「認証情報」でサーバーキーを作成○ localhost で試す場合は IP アドレスは指定しない○ 「API キー」をメモ

How to implement (1)● manifest.json に gcm 関連のプロパティを追加

プロジェクト番号常に

● フロント側コードで service worker を register する

How to implement (2)

の登録完了

● フロント側コードで subscribe する

How to implement (3)

ボタンクリックなどのタイミングで

するとユーザーに許可を求める

これらの情報をサーバーに送り、プッシュに備える

の

● Service Worker 側コードで 通知を受け取る

How to implement (4)

通知を出す

通知の種別を示すタグ

● 通知クリックでの動作

How to implement (5)

● GCM に POST○ https://android.googleapis.com/gcm/send○ Authorization: key=[API キー]○ Content-Type: application/json

■ もしくは www-form-urlencoded○ Body には JSON 文字列

How to push a message

…

現在の実装における制約

● Push メッセージにデータを乗せられない● Push されたら通知を出さなければならない● 通知にデータを乗せられない