지난번 의 계속입니다.

색인
(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

이번에는 Request 이벤트를 후크하여 자신의 처리를 추가해 보겠습니다.

Request에 따라 Response를 생성할 수 있으므로,
그렇다면 MVC 프레임 워크를 ServiceWorker로 완성 할 수 있습니다.

ServiceWorker

쓰고 있는 대로입니다만, PWA를 실현하고 있는, 오프라인화, Push 통지등은, ServiceWorker 의 기능입니다.

ServiceWorker는 이벤트 중심의 Worker라는 것이 좋다고 생각합니다.
htps : //로 ゔぇぺぺr. 모잖아. 오 rg / an-u S / docs / ue b / ap / r r

요청 이벤트를 후크하여 자체 처리

[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 하면



요청의 경로를 볼 수 있습니다.

ref

2018년 12월 시점의, 움직이도록 개조한 것을, 이하에 일어났습니다.
htps : // 기주 b. 코 m / 코로 히로 / 메모 _p 와_2018
htps : // 기주 b. 코 m / 교로 히로 / p
htps : // 기주 b. 코 m / 코로 히로 / 세 r ゔ ぃ 세 _ r r

PS

htps : // 기주 b. 코 m / 이소오 s / p와이 마스터 브랜치이고,
일부 움직이지 않았기 때문에 포크하고 수정하고 있습니다.
htps : // 기주 b. 코 m / 교로 히로 / p

이번에는 수정한 것을 사용하고 있습니다.

다음 번

Notification이라든지 ServiceWorker라든지,
Dart로 실현하는 방법을 소개하겠습니다.