すごくすごい。フロントエンドミートアップ 〜複雑GUI・アーキテクチャ設計を語ろう〜 に登壇しました

こんにちは、合同会社Steg 代表の keigo (@Kspace_trk) です。

先日、ファインディ株式会社様の会場で開催された「すごくすごい。フロントエンドミートアップ 〜複雑GUI・アーキテクチャ設計を語ろう〜」に、登壇者の一人として参加してきました。

「すごくすごい。フロントエンドミートアップ」とは

本イベントは、AIだけでは対応が難しい "複雑なGUI実装" や "アーキテクチャ設計" にフォーカスしたフロントエンドエンジニア向けのミートアップです。TypeScriptをベースに React (Next.js) や Vue (Nuxt.js) などのモダンフレームワークを使う各社のリアルな取り組みが、ナレッジとして共有されました。

2025年8月20日(水) 18:30 より、東京・大崎の ファインディ株式会社 様のオフィスにて開催されました。フード・ドリンクは サイボウズ株式会社 様のスポンサードでした 🙏

登壇内容

@vite-pwa/nuxt を用いた、PWA実装のリアル

私は @vite-pwa/nuxt を使ったPWA実装の "リアル" について、企業案件で実装したオフライン対応・Push通知の経験をベースにお話ししました。

前提：フルNuxt構成のプロダクト

紹介した案件は、モバイルアプリ・Push通知・オフライン対応・複数管理者向けの管理画面までを、すべて Nuxt エコシステムで構築したものでした。

• フロントエンド: Nuxt (Vue)
• バックエンド: Nuxt (Nitro)
• DB接続: Drizzle (ORM)
• 管理画面UI: Nuxt UI / Nuxt UI Pro

PWA化の基礎と Workbox の役割

PWAを成立させるためには manifest.json / sw.js / HTTPSの3点が必要ですが、Service Workerにはネットワーク戦略やバックグラウンド処理など、自前で書くと骨が折れる部分が多くあります。

この複雑さを抽象化してくれるのが Workbox で、 @vite-pwa/nuxt 経由で利用できます。プリキャッシュ設定 (workbox.globPatterns) によって、初回アクセス時にHTMLやアセット類をまとめてキャッシュすることができます。

ランタイムキャッシュでは、Cache First / Network First / Stale While Revalidate の3戦略を、URLパターンごとに使い分けることができます。

Push通知でぶつかった壁

ところが Push通知の対応で壁にぶつかります。Workbox は Push通知のセットアップ用APIを持っておらず、設定は sw.js に直接書く必要があります。一方で @vite-pwa/nuxt のデフォルトは generateSW 戦略で、 sw.js はWorkboxが自動生成してしまうため、独自実装を差し込む隙間がありません。

解決策：injectManifest 戦略への切り替え

この問題を解くために、戦略を generateSW から injectManifest に切り替えました。これにより、Service Worker を自前で実装しつつ、Workbox の機能も利用できるようになります。

nuxt.config.ts ではおおよそ次のような設定になります。

• strategies: 'injectManifest'
• globPatterns: ['**/*.{js,css,html,png,svg,ico,webp,json}']
• srcDir: './sw'
• filename: 'sw.ts'

カスタム Service Worker (sw.ts) の構成

sw.ts 側では、Workbox のライブラリ (workbox-precaching / workbox-routing / workbox-strategies) でプリキャッシュとネットワーク戦略を実装し、Push通知については firebase/messaging/sw を使って Firebase Cloud Messaging を統合しました。

• プリキャッシュ: nuxt.config.ts の設定をそのまま反映
• ネットワーク戦略: Workbox ライブラリで実装
• Push通知: onBackgroundMessage でハンドリングし、 self.showNotification を呼び出す

結論

セッションの結論はシンプルで、「@vite-pwa/nuxt でPWAは実装できる。オフライン対応とPush通知を両立したいなら、 generateSW ではなく injectManifest を選ぶこと」です。実プロダクトで踏んだ落とし穴と、その回避策を共有することで、同じ構成にチャレンジする方の地雷を一つでも減らせれば、というのが今回の登壇の狙いでした。

他の登壇者・セッション

当日は、複雑GUIやアーキテクチャ設計の現場知が並ぶ、非常に濃いセッションラインアップでした。

• AI疲れに効く、フロントエンドのワークフロー整備
• フレームワークを捨てる
• @vite-pwa/nuxt を用いた、PWA実装のリアル（中尾圭吾）
• XBRLの闇 〜エディタ開発の旅〜
• グラフィックをいじるUI
• サイボウズフロントエンドの横断活動から考えるAI時代にできること

どのセッションも、AIに丸投げできない "難しい部分" にどう向き合うか、という共通の問いを軸にしていて、フロントエンドという領域の奥行きを改めて感じる時間でした。

おわりに

実装の細部にこだわる話を、同じくこだわりを持つ方々と共有できる場は本当に貴重だと感じました。今回の発表内容が、Nuxt でPWA を作ろうとしている方や、Push通知の実装で詰まっている方の手がかりになれば嬉しいです。

貴重な登壇の機会をいただいた運営の皆さま、会場をご提供いただいたファインディ株式会社様、フード・ドリンクをスポンサードいただいたサイボウズ株式会社様、当日参加してくださった皆さま、本当にありがとうございました！