Dart에서 PWA (5) PostMessage

지난번 의 계속입니다.

이번에는 Vue.dart를 소개 할 예정이었지만,
※ 처음에는 BuildRunner를 소개하고 동등한 것을 만들 수있는 지식을 얻은 후 Vue.dart의 코드를 설명하려고했습니다.

PWA.dart 해설의 키리가 좋을 것 같기 때문에, PWA의 해설을 합니다.
일단 이것이 마지막 예정입니다.

색인
(1) Hello World PWA
(2) Add to Home
(3) Standard Web Notification
(4) Hook request and Do original processing
(5) Post message

코드
htps : // 기주 b. 코 m / 코로 히로 / 메모 _p 와_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);
      });
    });
  });
}