前回の雪かき事故を知らせるアプリの通知先はiPhoneアプリでしたが、AndroidやパソコンのChrome, Firefox, Edgeでは、W3Cでオープンに規格化が進む WebPushこと「Push API」が使用可能とのことで、実験してみました。 コマンドラインから、webから、結構手軽に通知が送れるのでなかなか楽しく、便利です!うまく使えば、気になる情報のチェックや、リマインドに大きく力を発揮してくれそうです。

本ブログにもそのうち追加しようと思いますが、ひとまず、実験できるプログラム一式ができたので、公開します。

WebPushは、各ブラウザベンダーが運用している通知サーバーにデータを送って、そこから各ブラウザへと通信される仕様のようです。 Node.js 用のライブラリを使って、通知用の設定と、コマンドラインで送信するツール、Deno で作ったサンプル通知管理サービスと、クライアント動作するプログラム、すべてJavaScriptです。 便利ですね、JavaScript。(src on GitHub

<script type="module"> import { WebPush } from "./WebPush.js"; window.onload = () => { btnSubscribe.onclick = () => { WebPush.subscribe(); }; btnUnsubscribe.onclick = () => { WebPush.unsubscribe(); }; btnTest.onclick = async evt => { const data = { title: "webpush test", body: "本文本文...........", url: "https://fukuno.jig.jp/3093", // 拡張 開くアドレス timeout: 5000, // 拡張 通知を消すまでの長さ msec (デフォルト0:消さない) delay: 1000, // 拡張 表示するまでの時間 msec(デフォルト0) }; console.log(await WebPush.push(data)); }; }; </script>

クライアント側クラス WebPush の使い方は簡単。
1. 登録ボタンを押してもらって WebPush.subscribe()
2. 後は、ユーザーが許可してもらった後、pushすることでブラウザからも通知が可能です
3. 通知を止めるときは WebPush.unsubscribe()

サーバー側では、まず準備。data/mailaddress.txt にメールアドレスを記入したテキストファイルを置き、下記コマンドで、data/vapidKeys.json が生成されます。

$ node push.mjs

webサーバーをDenoで起動します

$ deno run -A webpushserver.js

https://localhost:3004/ にアクセスすると、上記画面が開きます。
登録すると、サーバーの data/subscription 内に通知用のデータがたまります(uuid + .json がファイル名)
この uuid 宛に通知がコマンドで送れます。(uuidを記載します)

$ node push.mjs xxxx-uuid-xxx 'push test'

これでOK!(文字列の代わりにJSONでアイコンなど細かな指定も可能です)
コマンドをラップして、Denoで使えるコンポーネントにもしました。

import { push } from "./push_cmd.js" await push("xxxx-uuid-xxx", "push test in Deno");

サーバーから各人へデータを送って見てもらいたいというシンプルなユースケースですが、現状webではなかなか大変なシステムになってしまいますね。 とはいえ、WebPush、今の所、各ブラウザベンダーによる運用で無料かつ無制限で使えるようなので、いろいろ遊んでみましょう!
src on GitHub

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS