前回の続きです。
Index
(1) Hello World PWA
(2) Add to Home
(3) Standard Web Notification
(4) Hook request and Do original processing
(5) Post message
Code
https://github.com/kyorohiro/memo_pwa_2018
今回は Web Push の クライアント側を、Dartで実現してみます。
といった、通知を送ることができるようになります。
Web Pushとは
Push 通知ができるようになったので、エンドユーザーにメッセージを送ることができます。
気になる情報を、届けてくれる、とても便利な機能です。
-
Push通知は便利なもので、緊急のメールがきた時など、通知機能のおかげで、即座に反応することができますし。
-
仕事でチャットで質問がきたり、質問に答えてもらえたら、その事を即座にすることができます。
-
オークションサイトに、欲しい商品が出品された時など、気づかせてくれて便利です。
悪い面としては、Push通知を受けて、Backgroundで仮想通貨のマイニングするのに使用されるとか。
※ 意図しないでの利用
https://stackoverflow.com/questions/39544963/is-there-any-limit-on-execution-time-for-background-sync-and-message-event-in-se
スパムのように通知が飛んでくるとかでしょうか?
正直、Chromeとかだと、手軽に不要なServiceWorkerを削除できるようになっていないように思えます。
Dartで Push 通知をしてみます。
今回利用するコードです
https://github.com/kyorohiro/memo_pwa_2018/tree/master/05_notification_with_dart_at_standard
[1] public key / private key を生成する
https://web-push-codelab.glitch.me/ に行く
[2] Push 通知 を受け取る Webページを作る
pwa.dart を依存関係に追加
..
dependencies:
pwa:
git:
url: https://github.com/kyorohiro/pwa.git
..
.
.
Push 通知を受け取る、ServiceWorker を作成する
import 'package:pwa/worker.dart' as pwa;
void main() {
pwa.Worker worker = new pwa.Worker();
worker.offlineUrls = <String> [];
worker.pushHandler = (pwa.PushContext context) async {
await context.showNotification(new pwa.Notification("pushed"));
};
worker.run(version: "v0.0.1");
}
Manifest を追加
.
<link rel="manifest" href="manifest.json" />
{
"name": "hello",
"short_name": "PWA Example",
"start_url": "./index.html",
"display": "standalone",
"background_color": "#3E4EB8",
"theme_color": "#2F3BA2"
}
Subscribe リクエストを出すコードを追加
.
pwa.Client client = new pwa.Client(scriptUrl: './pwa.dart.js');
pwa.PushPermission p = await client.getPushPermission(applicationServerKey: "..PUBLIC KEY..");
await p.unsubscribe();
.
.
[3] 試してみる
subscribe する。
[3-1] [2]で作成したアプリを起動する
[3-2] subscribe ボタンを押す
[3-3] info ボタンを押す
{"endpoint":"https://fcm.googleapis.com/fcm/send/eWV1CqjHVU0:APA91bHzZrIZGOdOkvM9T51nFBlmOPr_MOGEkGAYYO-rVVwc626kQI_Dv5Giv3y14WTCWgASUlZmbZ4x2V7Mg2Oyv_oeEIITePnE6mixuRR2qOdarL3mQeCoiwUjUoSfHMN454Rxw1tK","keys":{"p256dh":"BFLh_-F0oT8fb5DhUee0g9U0zcgp2D4x9Anjs79WIGKdSfeKQjje_zPdi5Xl7I9LGAVE6nABc64rEitKYLfISeo","auth":"Fy1dqyQ0X-kjeJnYtDh1aA"}}
Push通知を 送信する
取得したSubscription を https://web-push-codelab.glitch.me/ にて、
指定の場所に貼り付けて、送信ボタンを押すと、
無事 Notification が表示されます。
ref
https://developers.google.com/web/fundamentals/web-app-manifest/
https://developers.google.com/web/fundamentals/app-install-banners/
https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle?hl=ja
2018年12月の時点の、動くように改造した物を、以下に起きましたしました。
https://github.com/kyorohiro/memo_pwa_2018
https://github.com/kyorohiro/pwa
https://github.com/kyorohiro/service_worker
PS
https://github.com/isoos/pwa が masterブランチで、
一部、動かなかったので、フォークして修正しています。
https://github.com/kyorohiro/pwa
今回は、修正したものを使用しています。
次回
Notification とか ServiceWorker とか、
Dart で 実現する方法を紹介していきいます。