Dart で PWA (4) Requestイベントをフックして独自処理

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

前回の続きです。

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

今回は、Requestイベントをフックして独自の処理を追加してみます。

Requestに応じてResponseを生成できるので、
やろうと思えば、 MVCフレームワーク的なものを ServiceWorker で完結することも可能でしょう。

ServiceWorker

書いている通りですが、PWAを実現している、オフライン化、Push通知などは、 ServiceWorker の機能です。

ServiceWorker は、　イベントドリブンな Worker ということで良いと思います。
https://developer.mozilla.org/en-US/docs/Web/API/Worker

Requestイベントをフックして独自処理

[1] サービスワーカーを追加するだけのスイクリプトを書く

main.dart
import 'package:service_worker/window.dart' as sw;

void main() {
  if(!sw.isSupported) {
    print(">> service worker is not support ");
    return;
  }
  print(">> service worker is support ");
  sw.register("sw.dart.js");
}

[2] Requestをフックする ServiceWorker を書く

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

void main() {
  sw.onInstall.listen((sw.InstallEvent e){
    print("#>>on install");
    e.waitUntil(sw.skipWaiting());
  });

  sw.onFetch.listen((sw.FetchEvent e) {
    print("##>> fetch");
    Future<sw.Response> responseTask = new Future(() async {
      String path = e.request.url.replaceFirst(RegExp(r"(http|https)://[^/]*"), "");
      return new sw.Response.custom("### ${path}",status: 200,statusText: "OK");
    });
    e.respondWith(responseTask);
  });
}

確認

webdev serve --release

として、サーバーを起動したあと、ブラウザーでアクセスすると

Reload すると

Request の Path を表示できます。

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

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

次回

Notification とか ServiceWorker とか、
Dart で 実現する方法を紹介していきいます。