Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[Service worker] プッシュ通知の使い方

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

  • Login to see the comments

[Service worker] プッシュ通知の使い方

  1. 1. Push Notifications for the web Eiji Kitamura | April 4th 2015
  2. 2. なぜウェブのプッシュ通知は重要なのか? ● ユーザーエンゲージメントの手法 ○ メール ○ ソーシャルメディア ○ ネイティブアプリ ● モバイルウェブのプッシュ通知 ○ 登録・インストール不要 ○ ページにアクセスし、パーミッションを許可するのみ ○ いつでもどこでも、通信さえできれば届けられる ○ 通知受信時にブラウザが立ち上がっている必要はない
  3. 3. Demo https://simple-push-demo.appspot.com/
  4. 4. How it works HTTPS HTTP Push Mobile Browser Service Worker Server Google Cloud Messaging Server HTTP + XMPP POST
  5. 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. 6. How to implement (1) ● manifest.json に gcm 関連のプロパティを追加 プロジェクト番号 常に
  7. 7. ● フロント側コードで service worker を register する How to implement (2) の登録完了
  8. 8. ● フロント側コードで subscribe する How to implement (3) ボタンクリックなどのタイミングで するとユーザーに許可を求める これらの情報をサーバーに送り、プッシュに備える の
  9. 9. ● Service Worker 側コードで 通知を受け取る How to implement (4) 通知を出す 通知の種別を示すタグ
  10. 10. ● 通知クリックでの動作 How to implement (5)
  11. 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. 12. 現在の実装における制約 ● Push メッセージにデータを乗せられない ● Push されたら通知を出さなければならない ● 通知にデータを乗せられない

×