Open4

nest: coi-serviceworkerを読む会

okuokuokuoku

純粋にWebAssemblyアプリをホストするだけならservice workerを挟む必要性は無いが、そもそも論としてWebAssemblyでSharedArrayBufferを使うためにはCOEPのヘッダを足す必要はあるので coi-serviceworker が何をやっているのか見てみることにした。

https://github.com/gzuidhof/coi-serviceworker

例えばHonoはService Workerでも動くので、前書いたHTTP経由のWebRTCセッションと組み合わせてWebアプリ自体もリモートに置ける気がする(Service Worker内のHonoでルーティングをして、リモート側のアプリはmiddlewareとしてマウントする)が、純粋なSPAじゃないとダメってのがかなり制約になる。例えばJenkinsとかそのままリモート化できると便利なんだけど。。

https://hono.dev/docs/getting-started/service-worker

https://zenn.dev/okuoku/articles/978347df73117f

okuokuokuoku

Service Worker側

https://github.com/gzuidhof/coi-serviceworker/blob/7b1d2a092d0d2dd2b7270b6f12f13605de26f214/coi-serviceworker.js#L36

単に "fetch" イベントのリクエストを fetch し、ヘッダを加工しているだけ。そのまま渡して良いのか。。

エラーはバブルしていない。 ...良いのか。。?

https://github.com/gzuidhof/coi-serviceworker/blob/7b1d2a092d0d2dd2b7270b6f12f13605de26f214/coi-serviceworker.js#L38-L40

status がゼロになるのは no-cors して opaque なレスポンスを受けた場合。これは自分のユースケースには無いはず。。Service Workerではこのresponseオブジェクトの中身を触れないので、単にそのまま返却することになる。

okuokuokuoku

Webページ側

https://github.com/gzuidhof/coi-serviceworker/blob/7b1d2a092d0d2dd2b7270b6f12f13605de26f214/coi-serviceworker.js#L62

Webページ側は他のスクリプトに影響しないように、コードをfunctionで包んでいる(IIFE https://developer.mozilla.org/ja/docs/Glossary/IIFE )。

https://github.com/gzuidhof/coi-serviceworker/blob/7b1d2a092d0d2dd2b7270b6f12f13605de26f214/coi-serviceworker.js#L73

デフォルトのリロード関数。

https://github.com/gzuidhof/coi-serviceworker/blob/7b1d2a092d0d2dd2b7270b6f12f13605de26f214/coi-serviceworker.js#L79

自分にservice workerが居るかをチェックする。

https://github.com/gzuidhof/coi-serviceworker/blob/7b1d2a092d0d2dd2b7270b6f12f13605de26f214/coi-serviceworker.js#L124

window.document.currentScript.src で自分自身をregisterする。

どういう異常ケースをハンドルしたいのかが読み取れないな。。 sessionStorage に値を入れてロード時に読んでいる。