前回の雪かき事故を知らせるアプリの通知先はiPhoneアプリでしたが、AndroidやパソコンのChrome, Firefox, Edgeでは、W3Cでオープンに規格化が進む WebPushこと「Push API」が使用可能とのことで、実験してみました。 コマンドラインから、webから、結構手軽に通知が送れるのでなかなか楽しく、便利です！うまく使えば、気になる情報のチェックや、リマインドに大きく力を発揮してくれそうです。 本ブログにもそのうち追加しようと思いますが、ひとまず、実験できるプログラム一式ができたので、公開します。 WebPushは、各ブラウザベンダーが運用している通知サーバーにデータを送って、そこから各ブラウザへと通信される仕様のようです。 Node.js 用のライブラリを使って、通知用の設定と、コマンドラインで送信するツール、Deno で作ったサンプル通知管理サービスと、クラ
Web Pushを実装したまとめ。動作確認済のデモソース付。 2018/08/24 公開されたRFCに準拠し、内容をアップデートしました。 旧仕様のaesgcmから、新仕様のaes128gcmに説明を変更しました。 2017/04/22 初公開 WebPushとは WebPushに使用される暗号の話 楕円曲線暗号（ECC）とは ServiceWorker APIについて WebPushを実装するための手順 HKDF 登録 通知メッセージの暗号化 VAPIDの生成と署名 ヘッダの生成とデータ送信 補足 URL safe Base64（base64url encode）について ASN1 DER formatについて WebPush実装に必要なライブラリ JavaScript側の実装 ServiceWorker API ServiceWorkerの登録 ServiceWorkerスクリプト（登
![[RFC]WebPush実装まとめ（Chrome/Firefox/Android/Edge）](https://cdn-ak-scissors.b.st-hatena.com/image/square/799c3c05a41d460421726aaa1584e104e2982f63/height=288;version=1;width=512/https%3A%2F%2Fadiary.adiary.jp%2Fpub-dist%2Fdefault-logo.png){kind=logo}
なお、HTTP/2 ServerPushというものがありますが、これはブラウザの先読みキャッシュをサーバからPUSHするものであり、任意のメッセージをPUSHするものではありませんでした。 これに対して、HTTP WebPushは、HTTP/2 ServerPushをベースにしつつ、APNS/GCMを標準化したものとして位置付けられています。そのため、APNS/GCMの特長を維持しながら、到達性（HTTPS利用）と汎用性（標準方式で特定クライアントに依存しない）を兼ね備えた、万能な解決策になる可能性があると、期待されています。 2. HTTP WebPush (RFC8030)の概要 2016年12月に、RFC8030 draft standardが公開されています。 https://tools.ietf.org/html/rfc8030 この内容をもとに、概要を紹介します。 2.1. タ
ネイティブ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も動くようだが試していない
serviceworkerでwebpush！ - メグリ株式会社
gem 実装にあたっては以下のgemを使用します。 https://github.com/zaru/webpush https://github.com/rossta/serviceworker-rails VAPIDの生成 インストールしたらプッシュ配信用にpublic_keyとprivate_keyを生成します。 VAPIDについては以下。 http://qiita.com/tomoyukilabs/items/9346eb44b5a48b294762#%E5%85%A8%E4%BD%93%E3%81%AE%E6%B5%81%E3%82%8C 生成したpublic_keyとprivate_keyはdotenv-rails等で環境変数に設定しておきます。 manifest.jsonの宣言 次にmanifest.jsonを宣言します。詳細な仕様は以下。 https://developer.
https://webpush-scala.herokuapp.com 世間に、JavaScript(Node.js)で全部やるサンプルはいくつかあったけど、(コレ作った時点で)JavaやScalaのサンプルがほぼ見当たらなかったので。 https://github.com/xuwei-k/webpush-scala うまくいくと、以下のような感じで、右上にぴょこっと出ます webpushといえば、個人的に身近なところ(?)だと、gitterのwebのクライアントとかでしょうかね。 webpush自体の説明は、あまり詳細な説明しませんが(ググったほうが正確でわかりやすい説明あるのでは)、一応適当に簡単に説明すると、 最近標準化されつつある*1やつで、コレ書いてる2016年9月時点では、ChromeとFirefoxしか対応してません。 一度登録すれば、ブラウザさえ開いてあれば、そのwebペー
WebPush libraries
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - zaru/webpush: webpush, Encryption Utilities for Web Push protocol
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
VAPIDと呼ばれる仕組みを使ってWebPushを実装する。VAPIDの仕組みそのものは下記記事を参照。 https://qiita.com/tomoyukilabs/items/9346eb44b5a48b294762 処理の流れ 大雑把な流れは クライアントでアプリケーションサーバから公開鍵の取得 サービスワーカーをブラウザへ登録 アプリケーションサーバの公開鍵をPushサーバに登録して、クライアント公開鍵・クライアント秘密乱数・エンドポイントを取得 クライアント公開鍵・クライアント秘密乱数・エンドポイントをサーバに登録 アプリケーションサーバで任意のタイミングでエンドポイントに向けてリクエストを送信 PushサーバからブラウザにPush送信 サービスワーカーでpushイベントをハンドルして通知 設計 VAPIDでPushを行うに当たって、下記の値が必要になる。 アプリケーションサーバ
【Docker + Laravel】WebPushでプッシュ通知機能作成中のエラー 【WebPush gmp extension is not loaded but is required for sending push notifications with payload . You can fix this in your php.ini】 - Qiita
【Docker + Laravel】WebPushでプッシュ通知機能作成中のエラー 【WebPush gmp extension is not loaded but is required for sending push notifications with payload . You can fix this in your php.ini】PHPerrorLaravelDockerWebPush はじめに 突然ですが、、、、 アプリケーションにメッセージのポップアップ通知機能を実装することになりました。 実装したい機能のイメージはこんな感じです。 (Gigazine様の記事から引用させていただきました。) 画像引用元：Google ChromeがMac OS Xでネイティブ・プッシュ通知に対応 Google Chrome使ってると出てくるアレです。 嫌いな人が多いのではないでしょうか
はじめましての方ははじめまして。 またお前かな方はこんにちは。 Nな人（えぬなひと）と申します。 普段はQiitaや自前ブログ「Nな人のWeb示録」で記事を投稿しておりますが、 今回はノリでZennに記事を書いていこうと思います。 では、やっていきましょうか。 目的 service workerなるものを使えば、ブラウザでPush通知が使える！（iPhone以外） アプリケーションではなく、Webの技術で作れるってすごい！先進的！（iPhone以外） ということで、ServiceWorkerで個人的に一番やってみたかった、WebPushを実装していこうと思います。 これでアプリを作らなくてもPush通知が送れるようになりますね！（iPhone以外） とても便利な世界になってきました。（iPhone以外） お断り ServiceWorkerには 「manifest.json」や「servic
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オープンな技術で開発進む通知システム「WebPush」を簡単に使ってみるJavaScriptプログラム
[RFC]WebPush実装まとめ（Chrome/Firefox/Android/Edge）
HTTP WebPushがIoTで使えない3つの理由 - Qiita
Scalaでwebpushのサンプルを作った - xuwei-k's blog
Sending VAPID identified WebPush Notifications via Mozilla’s Push Service
VAPIDでWebPushを実装してみた - Qiita
JSとPHPでWebPushを送信するWebアプリケーションを作ってみる