先程のプッシュ通知をシェアします。

1. Push Notifications for the web
Eiji Kitamura | April 4th 2015

2. なぜウェブのプッシュ通知は重要なのか？
● ユーザーエンゲージメントの手法
○ メール
○ ソーシャルメディア
○ ネイティブアプリ
● モバイルウェブのプッシュ通知
○ 登録・インストール不要
○ ページにアクセスし、パーミッションを許可するのみ
○ いつでもどこでも、通信さえできれば届けられる
○ 通知受信時にブラウザが立ち上がっている必要はない

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

4. How it works
HTTPS
HTTP Push
Mobile Browser
Service Worker
Server
Google Cloud Messaging Server
HTTP + XMPP POST

5. How to set up GCM
● console.developers.google.com にアクセス
● 「プロジェクトを作成」
● 「概要」から「プロジェクト番号」をメモ
● 「API」から下記を enable する
○ Google Cloud Messaging for Android
○ Google Cloud Messaging for Chrome
● 「認証情報」でサーバーキーを作成
○ localhost で試す場合は IP アドレスは指定しない
○ 「API キー」をメモ

6. How to implement (1)
● manifest.json に gcm 関連のプロパティを追加
プロジェクト番号
常に

7. ● フロント側コードで service worker を register する
How to implement (2)
の登録完了

8. ● フロント側コードで subscribe する
How to implement (3)
ボタンクリックなどのタイミングで
するとユーザーに許可を求める
これらの情報をサーバーに送り、プッシュに備える
の

9. ● Service Worker 側コードで 通知を受け取る
How to implement (4)
通知を出す
通知の種別を示すタグ

10. ● 通知クリックでの動作
How to implement (5)

11. ● 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
…

12. 現在の実装における制約
● Push メッセージにデータを乗せられない
● Push されたら通知を出さなければならない
● 通知にデータを乗せられない