前回の続きです。

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 を依存関係に追加

pubspec.yaml

..
dependencies:
  pwa: 
    git: 
      url: https://github.com/kyorohiro/pwa.git
..
.
.

Push 通知を受け取る、ServiceWorker を作成する

pwa.dart

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 を追加

index.html

.
    <link rel="manifest" href="manifest.json" />

manifest.json

{
    "name": "hello",
    "short_name": "PWA Example",
    "start_url": "./index.html",
    "display": "standalone",
    "background_color": "#3E4EB8",
    "theme_color": "#2F3BA2"
}

Subscribe リクエストを出すコードを追加

main.dart

.
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 ボタンを押す

Subscription

{"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 で実現する方法を紹介していきいます。

Dart で PWA (3) Push 通知