HTMX + PWAで作るSPA -- 軽量モダンWebアプリの実験

最近注目の HTMX と PWA（Progressive Web App） を組み合わせた学習プロジェクトを作りました。

ボトムナビゲーションを備えたSPA（シングルページアプリケーション）風のUIで、Service Workerによるキャッシュファースト動作にも対応しています。

このプロジェクトの特徴

要素	内容
SPA風ナビゲーション	ボトムナビゲーションバー（ホーム・検索・保存・プロフィール）＋ハンバーガーメニュー
HTMX	クリックでコンテンツを動的差し替え（ページ遷移なし）
Service Worker	キャッシュファースト戦略でオフラインでも動作可能
Webアプリマニフェスト	スタンドアロンモードでホーム画面に追加可能
モバイルファースト	下部固定ナビでスマホに最適化

HTMXって何？

HTMX は、HTMLに属性を追加するだけで非同期通信や動的コンテンツの差し替えを実現するライブラリです。

通常のSPAのようにReactやVueを使う必要がなく、サーバーサイドのHTMLをそのまま活用できます。

今回のデモでは、ボトムナビの各アイコンをクリックすると、hx-get 属性で該当セクションのコンテンツを動的に読み込みます。

HTXMの主な属性

hx-get / hx-post -- GET/POSTリクエストを非同期で送信
hx-target -- レスポンスを挿入する要素を指定
hx-swap -- 挿入方法を指定（innerHTML, outerHTML など）
hx-trigger -- トリガーイベント（click, load, mouseenter など）

Service WorkerとPWA

Service Workerを登録することで、以下のPWA機能を実現しています：

キャッシュファースト戦略

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

まずキャッシュを確認し、なければネットワークにフォールバック。一度訪れたページはオフラインでも表示できます。

マニフェスト（スタンドアロンモード）

{
  "short_name": "HTMX PWA",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

スマホのホーム画面に追加すると、ブラウザのUIを隠したフルスクリーンアプリのように動作します。

技術スタック

HTML / CSS -- モバイルファーストのレスポンシブデザイン
HTMX -- 動的コンテンツ差し替え（CDN読み込み）
Font Awesome -- ナビゲーションアイコン
Service Worker -- キャッシュファーストのオフライン対応
manifest.json -- スタンドアロンPWA動作

ファイル構成：index.html + service-worker.js + manifest.json の3ファイルのみ。

さいごに

HTMXは「HTMLに戻ろう」というムーブメントの中で注目されている技術です。ReactやVueのような重たいフレームワークを使わずとも、十分にリッチなSPA体験を提供できます。

PWAと組み合わせると、オフライン対応・ホーム画面追加・プッシュ通知など、ネイティブアプリに近い体験をWebだけで実現可能。小〜中規模のWebアプリには十分すぎる構成です。

興味があれば、デモページをスマホのホーム画面に追加して試してみてください。