Vue3+ViteでアプリをPWA化してスマホでアイコンを表示する方法

Vue3を使ってアプリをPWA（Progressive Web App）化する方法を解説します。

環境

Node.js：20.18.0
create-vue：3.11.1
vite：5.4.9
firebase-tools：13.23.0

Vue3プロジェクトの準備

まずは、Vue3のプロジェクトを作成しましょう。
ハンズオンを参考にしてもいいですし、私が過去に解説している記事も参考にしてみてください。

: Vue3+FirebaseでWebアプリを作成しよう！（前編）
Vue.jsとFirebaseを使ったWebアプリのデプロイ手順を解説。

PWAプラグインの設定

プロジェクトが作成できたら、vite-plugin-pwaをインストールします。
PWAアプリ構築に必要なnode moduleになります。

npm install vite-plugin-pwa

インストールできたらvite.config.tsを開いて、PWAプラグインを設定します。
<Your App Name>の部分は適宜変更してください。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: '<Your App Name>',
        short_name: 'App',
        start_url: '/',
        display: 'standalone',
        background_color: '#ffffff',
        theme_color: '#ffffff',
        icons: [
          {
            src: 'icon-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'icon-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    }),
  ],
});

アイコンの準備

続いてアイコンを作成します。
FigmaのComplete Favicon Generatorなんかだとサイズ別のアイコンをまとめて作成してくれるので便利です。

192x192pxと512x512pxのPNGファイルが用意できたらpublicフォルダに配置します。

この記事ではファイル名は、icon-192x192.png icon-512x512.pngとしています。

HTMLファイルの設定

次に、index.htmlファイルにアイコンへのリンクを追加します。
iOSデバイス（特にSafari）では、PWAのアイコンを表示する際に複数サイズのアイコンを指定することが推奨されているため
iOS向けに複数のサイズを指定します。

詳しくはApple Developer Documentationを確認してみてください。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>"Your App Name"</title>
    <link rel="apple-touch-icon" href="/icon-192x192.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/icon-192x192.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/icon-192x192.png">
    <link rel="apple-touch-icon" sizes="167x167" href="/icon-192x192.png">
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

サーバーの準備

PWAを試すためにはアプリケーションをHTTPSで配信する必要があります。
AWSは従量課金制で敷居が高いと感じたので無料で出来るFirebaseを利用することにします。

Firebase Hostingの利用

Firebaseは無料でPWAの公開ができてHTTPSも自動で設定されます。
設定方法は以前に紹介したFirebaseでのホスティング記事を参考にしてみてください。

: Vue3+FirebaseでWebアプリを作成しよう！（後編）
Vue.jsとFirebaseを使ったWebアプリのデプロイ手順を解説。

スマホでの確認

スマホのSafariブラウザから、作成したアプリのURLにアクセスします。
ページが表示されたら、「共有」ボタンをタップし、「ホーム画面に追加」を選択します。
publicフォルダに配置した画像がアイコンとして表示されるはずです！

おわりに

Vue3とViteを使ってPWAを構築すると、manifest.jsonなどの作成が不要な分シンプルに設定できると感じました。
自分が作ったアイコンがホーム画面に表示されるとモチベーションに繋がりますので是非チャレンジしてみてください！