本日の作業
Remixのバージョンアップは終わったのでRemix PWAのバージョンアップ作業です。変更自体は難しくはないですがドキュメントがないので@remix-pwa/swのコードを追っかけながら対応しました。
✅ Remix, Remix PWAのバージョンアップ作業
🚴 画面設計・実装
🚴 全体のレイアウトデザインと実装
🚴 日報の画面設計・実装
🚴 設計
🚴 実装
サインインの実装
認証画面実装
認証ロジック実装（主にClient側）
Server側の認証チェック実装
Client側の認証チェック実装
🛑 🚴 イベントストーミングとサービスブループリンの融合についてzennにまとめる
🛑 🚴 Feature-Sliced Designについてzennにまとめる
Remix PWA v4へのアプデ対応
昨日の続きでRemix PWAのアプデ作業です。
おさらいすると、Remix PWAのパッケージで不要になったもの、バージョンアップが必要なものとあるので再掲しておきます。
バージョンアップするもの
remix-pwa
@remix/worker-runtime
@remix/dev
@remix/sw
不要になったもの（remix-pwaにまとめられたぽいです）
@remix/strategy
@remix/cache
また、その後に色々分かったことがあります。まず、Remix PWA v4は「npx remix-pwa@latest init」でウィザード形式でエンドポイントを作成するのではなく、「npx remix-pwa@latest sw」（Service Worker）と「npx remix-pwa@lates webmanifest」（webmanifest）とそれぞれのコマンドで生成する方式に変わったそうです。詳しくはhelpを参照してください。
$ npx remix-pwa@latest help
ただ、これで実行してもウィザードはなくデフォルトTypeScriptでシンプルなentry.worker.tsが生成されるだけです。
というわけなのでやはりRemix PWAのGithubリポジトリにあるサンプルコードを参考にして修正する必要があります。
Remix PWA 各種ファイルの修正
古いRemix PWAについてはzennにまとめています。
tsconfig.jsonとremix.env.d.tsの変更
まず、remix.env.d.tsはenv.d.tsにリネームし、内容を次の様にします。
そして、tsconfig.jsonのincludesにenv.d.tsを追加します。
"includes": ["env.d.ts", "**/*.ts", "**/*.tsx"]
entry.worker.tsの修正
先にコードです。
まずはimport周りを修正。まずcache, strategyは不要になるので削除。
import { Storage } from "@remix-pwa/cache";
import { cacheFirst, networkFirst } from "@remix-pwa/strategy";
@remix-pwa/swに諸々集約されてるぽいが名前や振る舞いが変わっているので注意。
次にlogger周りです。loggerはglobalに充てておく必要があるのでself.loggerとして代入しておきます。
次にCache周りです。Cacheは以前は@remix-pwa/cacheのStorageで定義していたdocumentCach, assetCache, dataCacheをEnhancedCacheクラスのインスタンスとして変更。
次に、「matchRequest」も廃止されているので、「isDocumentRequest」, 「isLoaderRequest」に変更しリクエストの種類の判別を変更します。
あとは「RemixNavigationHandler」も廃止されているので「NavigationHandler」に変更します。引数などはcacheをとりあえず渡しておけば良いですが気なる方は@remix-pwa/swのコードを追ってみてください。
あとはmessageイベントリスナー内のhandlerを「handleMessage」に変更します。これで、entry.worker.tsの変更は一応終わりです。
entry.client.tsxの変更
変更したコードです。といってもentry.client.tsxはそれほど変更はありません。loadServiceWorkerの内容を少し変更します。
root.tsxの変更
変更したコードです。変更は@remix-pwa/sw周りのみです。そもそもRemix viteでLiveReloadが廃止になっているのでこちらも廃止です。
vite.config.ts
Remix viteだとremix.config.jsからvite.config.tsになるので次のように設定します。
尚、このvite.config.tsの設定はビルドなどの設定なのでpackage.jsonのbuildを変更します。
旧）
"build:worker": "npm run gen:firebase && remix-pwa build",
新）
"build:worker": "npm run gen:firebase",
変更は以上になります。いやー、この作業で2日削ってしまった。辛い。
その他、メモ
Framerで3D Transform機能が追加されました。さっそく仕事で制作したサービスのLPに取り入れました。これはFramerなら以前からCode Componentで実装できたものですがプリセットな機能として追加されたのでかなり捗るんじゃないかと。