Dart で PWA (5) PostMessage

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


今回は、Vue.dart を紹介する予定でしたが、
※ 当初はBuildRunner を 紹介して、　同等のものが作れる知識を得てもらった上で、Vue.dart の　コードを解説しようと思っていたのですが.. 

PWA.dart解説のキリが良さそうなので、PWAの解説をします。
一応、これが、　最後の予定



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 


今回は、 Background で動作している ServiceWorker と、　　Front で動作している JavaScript と　通信する方法について紹介します。


# Worker
 https://developer.mozilla.org/en-US/docs/Web/API/Worker

 Workder を使うことで、 Background Task を 簡単に作ることができます。 Front と通信して、別Thread でアレコレすることができます。
　ServiceWorker も Worker なので、 Front ろと通信することが可能です。



# 通信してみる

https://github.com/kyorohiro/memo_pwa_2018/tree/master/03_post_message_with_dart


### ボタンを押すと、Backgroundにメッセージを送信する

```dart:main.dart
import 'package:service_worker/window.dart' as sw;
import 'dart:html' as html;
 main() async {
  if(!sw.isSupported) {
    print(">> service worker is not support ");
    return;
  }
  print(">> service worker is support ");
  await sw.register("sw.dart.js");
  sw.onMessage.listen((sw.MessageEvent e) {
    print(">> receive: ${e.data} ");
  });
  html.querySelector("#btn").onClick.listen((html.MouseEvent e){
    sw.controller.postMessage("Hello,World");
  });
}
```


### ECHOサーバーを作成する

```dart:sw.dart
import 'package:service_worker/worker.dart' as sw;

void main() {
  String cacheName = "v0.0.1";

  sw.onInstall.listen((sw.InstallEvent e) async {
     e.waitUntil(sw.skipWaiting()); // Activate worker immediately
  });

  sw.onActivate.listen((sw.ExtendableEvent e){
    print("##>> activate");
    // https://stackoverflow.com/questions/38168276/navigator-serviceworker-controller-is-null-until-page-refresh
    e.waitUntil(sw.clients.claim()); // Become available to all pages
  });


  //
  // message
  //
  sw.onMessage.listen((sw.ExtendableMessageEvent e){
    sw.clients.matchAll().then((List<sw.ServiceWorkerClient> cls) {
      cls.forEach((sw.ServiceWorkerClient cl){
        print("receive: ${e.data} : ${e.source.toString()}");
        cl.postMessage(e.data);
      });
    });
  });
}

```


# 確認

https://github.com/kyorohiro/memo_pwa_2018/tree/master/03_post_message_with_dart


### サーバーを起動

```
webdev serve --release
```

### ブラウザーでアクセス

<img width="268" alt="スクリーンショット 2018-12-11 2.21.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/54192/f9e16742-3932-92a4-0607-eb75d48e9123.png">



### ボタンを押す


<img width="637" alt="スクリーンショット 2018-12-11 2.21.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/54192/96b0c918-f965-65f3-db1d-4b0b8a73f70a.png">






# Ref

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

今回は、修正したものを使用しています。



## 次回

Firebase とか　WASMとの連携とか
Web Bluetooth とか
PWA用のStorage とか

おわり