Dart で PWA (5) PostMessage

Last updated at 2018-12-11Posted at 2018-12-11

前回の続きです。

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

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

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

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

Worker

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

通信してみる

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

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サーバーを作成する

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);
      });
    });
  });
}