Browser push notifications

1,500
-1

Published on

Published in: Technology
2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,500
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

Browser push notifications

  1. 1. browser push notifications @kanayannet
  2. 2. 今日話すこと 1.push notificationって? 2.何故やろうと思ったか? 3.browser でどこまで可能? 4.実装方法 5.まとめ
  3. 3. push notificationって? push 通知の事です。
  4. 4. 何故やろうと思ったか? 自作のアプリケーションで… (植物の栽培日記) 記録のつけ忘れ や 水のやり忘れ を push通知させたい!
  5. 5. 何故やろうと思ったか? メールだと迷惑メール設定とか面倒だし… ! native アプリから push通知も手だけど… ブラウザで作った方が作りやすいし…
  6. 6. browser でどこまで可能? 3種類あった 1. W3C push notification 2. Google Cloud Messaging for Chrome 3. safari push notifications
  7. 7. browser でどこまで可能? W3C push notification new Notification(‘hello world’,{! ! ! ! ! ! ! ! ! ! ! ‘body': ‘body!’! ! ! ! ! ! ! ! ! ! ! ! });
  8. 8. browser でどこまで可能? 実はこれブラウザが開いてないと動きません。 W3C push notification
  9. 9. これじゃない!!
  10. 10. browser でどこまで可能? Google Cloud Messaging for Chrome と思ったら…
  11. 11. 既にやり方が広く日本語で 公開されている…
  12. 12. browser でどこまで可能? safari push notification ※ここから先の画像は apple社の公式ドキュメントを 引用しています。
  13. 13. 英語ドキュメントばかり.. これだ!!
  14. 14. safari push notification
  15. 15. 電子証明書を取得する safari push notification
  16. 16. Push Package を用意する (zip ファイルにする) safari push notification
  17. 17. 結構面倒くさい.. safari push notification
  18. 18. 便利なライブラリがあります (grocer-pushpackager) safari push notification builder = Grocer::Pushpackager::Package.new({ websiteName: farm-log', allowedDomains: [ https://farm-log.com ], iconSet: {:'16x16' => File.open('./icons/16x16.png'), ……… });
  19. 19. ※連携するライブラリに version依存 がいくつかあります。 safari push notification version 0.0.1…
  20. 20. safari push notification ブラウザ<->サーバ間でやりとりするのは javascript で行う。
  21. 21. safari push notification これに成功すると…
  22. 22. safari push notification apple社に json データを送信する
  23. 23. 便利なライブラリがあります (grocer) safari push notification notification = Grocer::SafariNotification.new(! device_token: '...', ! title: 'Hello world',! body: 'こんにちわ世界', ! action: ‘読む',! url_args: [‘/’] ! )!
  24. 24. 実際にやってみます safari push notification
  25. 25. 失敗用画像です safari push notification
  26. 26. まとめ W3C push notification W3C の push通知 で動くのは local(ブラウザプロセス内) だけか? (金澤 が 知らないだけ?)
  27. 27. まとめ 参考: https://developer.mozilla.org/ W3C push api というのがあるが…今のところ PC は全滅
  28. 28. まとめ 参考: https://developer.mozilla.org/ firefox OS の firefoxは動くらしいが…
  29. 29. まとめ Google Cloud Messaging for Chrome 便利そう やり方が日本語ドキュメントで公開中(@it) いずれ試してみたい
  30. 30. まとめ 便利 まだ日本語ドキュメント少ない ! でも訳せば行ける ! ライブラリも枯れてないけど(version 依存注意) あるよ safari push notification
  31. 31. ご清聴ありがとうございました

×