📱
ViteアプリのPWA化

2025/02/22に公開
JavaScript
 これは何先日思い立って個人開発してるWebアプリをPWA化したので、その時に調べたことを諸々まとめてみました！

 そもそもPWAってご存知の方も多いかもしれませんが、そもそも PWAって何なのという部分にさらっと触れておきます！
PWAはProgressive Web Applicationの略称
Webサイト・アプリケーションをネイティブアプリのように使えるようにする仕組み
Service Worker、Web App Manifest といった技術を利用して、次のような機能がWebサイト・アプリケーションでも使えるようになります
✅ アプリのインストール（アプリのようにホーム画面に追加できる）
✅ オフライン対応 （ネットがなくてもoffline cacheを利用して動作させることができる）
✅ ネイティブアプリに近いUIの提供
✅ プッシュ通知対応


 PWA化のための技術的要件そんないいことづくめのPWAですが、ブラウザからWebアプリをPWAとしてインストールするためにはいくつかの技術的な要件を満たしてる必要があります。

 Web App ManifestJSON形式のmanifestファイルで、インストールされたアプリがデバイスの中でのどのような見た目になるか、挙動をするかといった情報をブラウザに伝える役割を担っています。
設定可能なプロパティは色々ありますが、ChromiumをベースにしたブラウザではPWA化のために以下の項目の設定が必須となっています。

name: インストールしたデバイス上で表示するアプリの名前

icons: インストールしたデバイス上で表示するアプリアイコン。192x192, 512x512はマストで用意する必要があります

start_url: インストールしたアプリをユーザーが起動した際に表示するページURL

display: インストールしたアプリがどのような見た目になるかの設定。standaloneが一番一般的なネイティブアプリに近い見た目の表示になり、ブラウザ固有のナビゲーションバーとかが消える。

prefer_related_applications: PWAではないネイティブのアプリが存在し、そちらのダウンロードを推奨するかどうか

 HTTPS/localhostPWAを有効にするには、ページがHTTPS、もしくはlocalhostで提供される必要があります。

これはMan in the Middle Attack（中間者攻撃）を回避するためのセキュリティ的な懸念からこのような仕様となっているようです。

 Service Worker⚠️ PWAではoffline cacheなどの利用を可能にするService Workerを使用するケースが多いですが、Service Workerを利用すること自体はPWAとしてWebアプリをインストールできるようにする技術要件には含まれていません。

 ViteアプリをPWA化する方法それでは今回の本題でもある、ViteアプリをPWA化する方法について見ていこうと思います！
Viteアプリの場合はPWA化のためのvite-plugin-pwaというプラグインが存在し、そちらを利用することで簡単にPWA化を行うことができます。
https://vite-pwa-org.netlify.app/
以下がざっくりとした手順になります。
vite-plugin-pwaをインストール
vite.config.tsに記述を追加
ビルドを実行🚀

 vite.config.tsに記述を追加vite-plugin-pwaのインストールができたら、実際にvite.config.tsに記述を追加していきましょう。
import { defineConfig } from "vite";
import { VitePWA } from "vite-plugin-pwa";

export default defineConfig({
  plugins: [
    VitePWA(),
  ],
});
vite-plugin-pwaから提供されているVitePWAというモジュールをpluginsの中に追加します
実はこの記述だけでもmanifestの生成やService Workerの読み込みなどを行ってくれるのですが、このままだとmanifestの内容はプラグインが用意するデフォルト情報になってしまうため、カスタマイズしたい場合はオプションを指定する必要があります
import { defineConfig } from "vite";
import { VitePWA } from "vite-plugin-pwa";

export default defineConfig({
  plugins: [
    VitePWA({
      devOptions: { enabled: true },
      manifest: {
        name: "Test App",
        icons: [
          {
            sizes: "192x192",
            src: "icon-192x192.png",
            type: "image/png",
          },
          {
            sizes: "512x512",
            src: "icon-512x512.png",
            type: "image/png",
          },
          {
            sizes: "512x512",
            src: "icon-512x512.png",
            type: "image/png",
            purpose: "maskable",
          },
        ],
      },
    }),
  ],
});

追加でカスタマイズしたい場合は上記のようにVitePWAの引数にオプションを指定してあげることで設定を変更することができます
前項で触れたmanifestにおける必須設定項目が上記の内容には含まれていませんが、これはプラグインがデフォルトで挿し込んでくれるためです


VitePWAに渡している引数の中にdevOptionsというプロパティがありますが、こちらを{enabled: true}でセットしてあげることで開発環境でも確認ができるようになります。
Viteアプリの場合ここで指定するアイコンはpublicディレクトリに配置しておけば上記のようにsrcにファイル名を記述するだけでアイコンを指定することができます
複数指定しているアイコンの一番最後にpurpose: "maskable"というプロパティを追加していますが、これはマスク可能なアイコンとして指定するための記述です。マスク可能なアイコンとは何かについてはMDNの説明が参考になりますので、興味がある方はぜひご参照ください
以上vite.config.tsに記述を追加する際のポイントでした！

あとはこの状態でアプリをビルドすると、PWA化されたアプリが生成されるようになります。
アプリを立ち上げ開発者ツールのApplicationタブを開くとManifestという項目があり、そこから設定した内容が反映されていることが確認できます。

 終わりに駆け足でしたが以上ViteアプリをPWA化する方法についての解説でした！

実際個人開発しているWebアプリをこの方法でPWA化してみましたが、やはりネイティブアプリのようなUIでの動作やホーム画面からアプリを起動して使えるようになるとテンションが上がりますね笑
GitHubで編集を提案
これは何

そもそもPWAって

PWA化のための技術的要件

Web App Manifest

HTTPS/localhost

Service Worker

ViteアプリをPWA化する方法

vite.config.tsに記述を追加

終わりに

Discussion
