Claude Codeで1人開発：1日で終わるはずが3ヶ月の地獄。PWAの沼にハマったAI開発の末路。

※この記事は、Claude Codeで1人開発しているSNS運用SaaS「ThreadPost」の開発日記です。

SNS運用を自動化しませんか？

ThreadPostなら、投稿作成・画像生成・スケジュール管理まで全てAIにお任せ。

PWA対応はなぜ地獄なのか

Webアプリをスマホアプリのように使えるPWA化は、本来なら数日で終わる作業だ。しかし、僕の環境では総コミット32件を費やす泥沼と化した。原因はNext.jsのApp Routerと古いPWAライブラリの相性、そしてSafariのUI仕様変更だ。結論として、既存のライブラリに頼らず、ブラウザごとの挙動を泥臭く吸収する実装が必要だった。

PWAの沼に沈む開発者の苦悩と、Service Workerの複雑性を表現した抽象的なビジュアル。

楽観的すぎたService Worker導入

PWA対応はライブラリを入れてmanifest.jsonを置くだけだと思っていた。まずは定番の「next-pwa」を導入した。Claude Codeに任せれば数分で終わるはずだった。ブラウザのコンソールを開くと、赤いエラーメッセージが画面を埋め尽くしていた。

Service Workerの登録に失敗している。「next-pwa」は開発が止まっており、最新のReactエコシステムとは相性が悪い。設定を削れば削るほど機能も失われる。僕は「next-pwa」を削除した。ライブラリを消すことでエラーを直す。見事な解決策だ。

しんたろー:
12回コミットして元の状態に戻った。Claudeの提案を鵜呑みにした僕の負け。ライブラリの最終更新日を確認しないと数時間をドブに捨てる。

気を取り直して、モダンな後継ライブラリ「Serwist」に乗り換えた。今度は一発で動いた。Service Workerが正常に登録され、インストールバナーが表示された。しかし、UIの崩壊が待っていた。PWAのstandaloneモードでは、Z-indexの基準が親要素に依存する。ダイアログが画面の裏側に潜り込んだ。

「Apply Portal to all dialogs for PWA compatibility」を実行した。ReactのPortalを使って、すべてのダイアログをDOMの最上位にレンダリングする。これでZ-indexの呪縛から解放された。PWA対応は、UIアーキテクチャの全面改修を要求してくる。

しんたろー:
Z-indexを9999にすれば直ると思ってた。PWAのstandaloneモードはCSSの常識が通用しない。Portal化で5つのダイアログを全部書き直した。

Safariの気まぐれとUI崩壊

iOS SafariはPWAのインストール手順が異常に分かりにくい。ツールバーの共有ボタンを押してホーム画面に追加するよう案内する必要がある。画面下部の中央に矢印を出し、「ここを押してね」と表示した。実機で確認すると、矢印が何もない空間を指している。

Safariのバージョンによって共有ボタンの位置が違うのだ。中央にある人もいれば、右下のメニューの中にある人もいる。僕は中央と右下、両方のパターンを並列で説明する狂気のUIを実装した。absolute positioningで、ピクセル単位で矢印の位置を固定する。泥臭いハードコーディングだ。環境依存を排除するにはこれしか方法がなかった。

しんたろー:
SafariのUI変更のたびに僕のコードが壊れる。Appleの気まぐれに付き合わされるWeb開発者の末路。矢印の座標調整だけで2時間消えた。

ここまで読んだあなたに

今なら無料で全機能をお試しいただけます。設定後は完全放置でプロ品質の投稿を毎日生成。

無料で始める

落とし穴

PWAのインストールバナーを全画面に出そうとした。ユーザーの目につくところに置けばインストール率が上がると信じていた。しかし、LINEやInstagramのアプリ内ブラウザはPWAのインストール機能を持たない。ユーザーを「絶対にインストールできない場所」へ誘導する無意味なバナーを量産した。インストールボタンは、OS標準のブラウザで開いている時だけ表示する条件分岐が必須だ。