個人開発者向けのサービスの開発記録 #37 20240222

本日の作業

• 🚴 Remix + Service Workerの実装

  • 🚴 個人開発では今のところ使わないけど仕事の方でGoogle Identity Platform（Firebase Authentiction）を使うので対応した。

• Repository Patternの雛形を作成

• 分報に関する設計・実装

  • Model・Repository実装

  • UseCase Hooksと結合実装

  • Domain EventとPrismaの実装

• 🛑 🚴 イベントストーミングとサービスブループリンの融合についてzennにまとめる（休日にやる）

Remix + Firebase Auth + Service Workerの準備

Service Workerを使う理由

Service Worker によるセッション管理  |  Firebase

firebase.google.com

Firebase Authenticationのセッション管理術

speakerdeck.com

• バックグラウンド同期

  • オフライン時でも認証状態を同期させることが可能になり、オンライン復帰時にセッションを復元しやすくなる。Cookieはブラウザがオフラインになると機能の制限があるため同じことはできない。

• パフォーマンスの向上

  • Service Workerはネットワークリクエストをキャッシュできるため、認証情報のアクセス面でパフォーマンス向上できる。

• セキュリティの向上

  • Service WorkerはHTTPS経由でのみ動作するためセキュリティ面ではCookieセッションより強化できる。

RemixはSSRメインなのでCookieでもいい様にも思うが、バックグラウンド同期やセキュリティの向上の面ではService Workerの方が良いと思う。あと、Push通知を使う際にService Workerを使うなどあれば寄せるという意味でも良いはず。

過去にNext.jsで導入したことがあるが、Service Workerがサーバサイドへのネットワークリクエストとクライアント（フロントエンド）との間に介入するのでその点では通信の見通しが良くなる面があった。ただし、Service Workerが（サブ）ドメイン単位で登録されるので、localhost:{PORT}で作成すると他のプロジェクトに影響してしまう。多岐にわたって仕事している人はその管理に注意を払わないといけない。

実装方法について

現在実装中なのでそれについては明日まとめます。手順的にはService Workerの登録は次の記事を見れば良いはず。

Using Service Workers with Remix by sergiodxa

sergiodxa.com

service worker自体は以下のコード（以前作ったもの）。尚、Firebaseの関連記事にあるコードではgetBodyContentでファイルバイナリーの処理が抜けているので画像アップロードなど扱う場合は動作せずハマります。

以下、その辺踏まえたコード↓

Ray.so - Create beautiful images of your code

ray.so

その他、メモ

• remix devのport指定がうまくいかない。--portオプションを指定してもそのポートで起動しない。ただ、PORT環境変数を渡せば指定のportで起動はする。が、monorepo環境でremix devを複数起動するとうまくいかないぽい。

  @remix-run/dev CLI

  remix.run

  • 調べても解決方法が見当たらない…。localhost:3000とlocalhost:3001とかにすればいいんだけど、3000を使うとService Workerがlocalhost:3000で登録されてしまうので別のプロジェクトでlocalhost:3000を使う際にSWが残っていて動作に影響してしまう。

  • 開発環境だとSWを毎回消せばいいんだけど…どうしたものか。。

← #37　#38 →