emiko

建設現場で働く人たちに向けた業務管理アプリ.TASK(ドットタスク)を開発中⛏️ プログラミングと個人開発を始めて１年目の初心者ですが、AIに教えてもらいながら勉強&開発を行っています💻 普段は家の手伝いで建設現場の仕事と業務委託で経理をしています。

[emiko @emiko_dev]

MVPを実際に触ってもらって気づいたこと。

ページ初回遷移時に一瞬出る「読み込み中…」が、思った以上にチラついて見える😅

次はこれを、
・上部に細いローディングバー(nextjs-toploader導入）
・遅い時だけ出るカード型スケルトン
に変えて、体感を少しでも自然にしていく予定です。
#個人開発

[emiko @emiko_dev]

MVP後の課題（改善案）
・PWA初回起動時の「数秒の真っ黒画面」については、manifest.webmanifestのbackground_colorとtheme_colorが何色になってるか確認する
・JSが動く前に最初に描画される部分に.のロゴや背景色だけの簡易スプラッシュ的なものをCSSだけで先に出す

[emiko @emiko_dev]

MVP後の課題②
・黒画面→各ページ初回遷移チラつき → 一度開いたページでは出ない、という挙動からiOSがバックグラウンドのPWAプロセスを回収して、次に開いた時はゼロから再起動してる。
・Router Cacheが効いてる

[emiko @emiko_dev]

MVP後の課題①
・iPhoneのPWAでは、初回起動・時間経過後に再度アプリを開くと黒画面が数秒出る
・黒画面後、トップページが表示される
・各ページ初回遷移「読み込み中」がチラつく
・数時間後に開いた時も「黒画面→各ページ初回遷移チラつき」がもう一度セットで出る
・AndroidのPWAでは起きない

[emiko @emiko_dev]

建設現場で働く人たち向けの業務Webアプリを半年かけてMVPまで作りました！
【構成】
Next.js / NestJS / Prisma / PostgreSQL Googleログイン / JWT認証 / Organization設計 / PWA対応

現場で働く父に触ってもらったら、第一声は「動きが重い」でした（白目）
明日から修正します。
#個人開発