Dart で PWA (3) Push 通知

[前回](https://qiita.com/kyorohiro/items/33303398bac6e2be0887)の続きです。

Index
(1) [Hello World PWA](https://qiita.com/kyorohiro/items/4ab34f17a5eec8ca811c)
(2) [Add to Home](https://qiita.com/kyorohiro/items/33303398bac6e2be0887)
(3) [Standard Web Notification](https://qiita.com/kyorohiro/items/bb7736ae86fc1113ca80)
(4) [Hook request and Do original processing](https://qiita.com/kyorohiro/items/d76c3cf96f4e76ae70ec)
(5) [Post message](https://qiita.com/kyorohiro/private/cbd6ed32d13b0fc43021)

Code
https://github.com/kyorohiro/memo_pwa_2018 


今回は Web Push の クライアント側を、Dartで実現してみます。

<img width="342" alt="スクリーンショット 2018-12-07 12.35.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/54192/b7e5d7ae-025b-6175-42b5-ef8077b9048b.png">


といった、通知を送ることができるようになります。



#  Web Pushとは
https://developer.mozilla.org/en-US/docs/Web/API/Push_API/Best_Practices

https://developers.google.com/web/updates/2016/07/web-push-interop-wins#introducing_vapid_for_server_identification


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

```yml:pubspec.yaml
..
dependencies:
  pwa: 
    git: 
      url: https://github.com/kyorohiro/pwa.git
..
.
.
```

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

```dart: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 を追加

```html:index.html
.
    <link rel="manifest" href="manifest.json" />


```

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

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

```dart: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] 試してみる

https://github.com/kyorohiro/memo_pwa_2018/tree/master/05_notification_with_dart_at_standard

## 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/ にて、
指定の場所に貼り付けて、送信ボタンを押すと、

<img width="342" alt="スクリーンショット 2018-12-07 12.35.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/54192/2820397a-a2d5-044d-2ac4-9163d455f2df.png">


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