Dart で PWA (5) PostMessage

10222 ワード
ServiceWorker worker PWA Dart Dart テキストリンク

前回の続きです。

今回は、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);
      });
    });
  });
}

確認

サーバーを起動

webdev serve --release

ブラウザーでアクセス

ボタンを押す

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 とか

おわり