Vue でのプログレッシブ Web アプリ

Vite を使用して Vue アプリを PWA にする

PWA の主な要件は、Service Worker と Web アプリケーションマニフェスト の 2 つです。これら両方をアプリに手動で追加することも可能ですが、代わりに Vite PWA プラグイン を使用することをお勧めします。

まず、vite-plugin-pwa パッケージをインストールします

npm install -D vite-plugin-pwa

次に、vite.config.js または vite.config.ts ファイルを更新し、vite-plugin-pwa を追加します

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

export default defineConfig({
  plugins: [vue(), VitePWA({ registerType: 'autoUpdate' })],
});

この最小限の構成により、アプリケーションはビルド時に Web アプリケーションマニフェストと Service Worker を生成できます。

Vite PWA プラグインの構成の詳細については、Vite PWA 「はじめに」ガイド を参照してください。

PWA のデプロイ方法については、Vite PWA 「デプロイ」ガイド を参照してください。

Vue CLI を使用して Vue アプリを PWA にする

注

Ionic CLI v7 以降、Ionic Vue スターターアプリは Vue CLI の代わりに Vite を搭載しています。Vite の手順については、「Vite を使用して Vue アプリを PWA にする」を参照してください。

PWA の主な要件は、Service Worker と Web アプリケーションマニフェスト の 2 つです。これら両方をアプリに手動で追加することも可能ですが、Vue CLI にはこれらを追加するためのユーティリティがいくつかあります。

既存のプロジェクトの場合は、vue add コマンドを実行して Vue 用の PWA プラグインをインストールできます。

vue add pwa

注

すでに変更が加えられている場合は、Git でコミットしてください。

これが完了すると、Vue の CLI によって新しい registerServiceWorker.ts ファイルが作成され、main.ts にインポートされます。

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
// Added by the CLI
import './registerServiceWorker';

createApp(App).use(router).mount('#app');

registerServiceWorker.ts ファイルは、CLI がビルド時に作成するサービスワーカーを指します。ここには、サービスワーカーが更新を検出したり、ネットワーク接続が変更されたり、エラーを受信したりした場合にユーザーが体験する内容をカスタマイズできます。

import { register } from 'register-service-worker';

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready() {
      console.log(
        'App is being served from cache by a service worker.\n' + 'For more details, visit https://goo.gl/AFskqB'
      );
    },
    registered() {
      console.log('Service worker has been registered.');
    },
    cached() {
      console.log('Content has been cached for offline use.');
    },
    updatefound() {
      console.log('New content is downloading.');
    },
    updated() {
      console.log('New content is available; please refresh.');
    },
    offline() {
      console.log('No internet connection found. App is running in offline mode.');
    },
    error(error) {
      console.error('Error during service worker registration:', error);
    },
  });
}

生成されるサービスワーカーは、Workbox の webpack プラグイン に基づいており、デフォルトでは GenerateSW() を使用するように設定されています。つまり、ビルド時に Workbox は処理するすべてのファイルのサービスワーカーキャッシュを自動的に生成します。

この構成を変更し、デフォルトの動作を変更する場合は、GitHub の PWA プラグインのドキュメント を確認してください。

マニフェスト

サービスワーカーに加えて、Vue PWA プラグインはアプリのマニフェストファイルの作成も担当します。デフォルトでは、CLI は次のエントリを含むマニフェストを生成します。

{
  "name": "pwa-test",
  "short_name": "pwa-test",
  "theme_color": "#4DBA87",
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-maskable-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "./img/icons/android-chrome-maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "background_color": "#000000"
}

public/img/icons 内のアイコンを自身のブランドに合わせて更新してください。テーマの色や名前をカスタマイズする場合は、GitHub の PWA プラグインのドキュメント を必ずお読みください。

デプロイ

Firebase、Vercel、Netlify、さらには Azure Static Web Apps など、さまざまなホストを使用できます。すべてに完了する必要がある同様の設定プロセスがあります。このガイドでは、ホスティングの例として Firebase を使用します。このガイドに加えて、Vue CLI のドキュメント には、さまざまなプロバイダーにデプロイする方法に関するガイドもあります。

Firebase

Firebase Hosting は、CDN による高速な応答時間、デフォルトで有効になっている HTTPS、HTTP2 プッシュ のサポートなど、プログレッシブ Web アプリに多くのメリットを提供します。

まず、まだ利用できない場合は、Firebase で プロジェクトを作成 します。

次に、ターミナルで Firebase CLI をインストールします

npm install -g firebase-tools

注

firebase-tools を初めて使用する場合は、firebase login コマンドで Google アカウントにログインします。

Firebase CLI をインストールしたら、Ionic プロジェクト内で firebase init を実行します。CLI プロンプトが表示されます

「このフォルダーで設定する Firebase CLI の機能はどれですか？」 「Hosting: Firebase Hosting のファイルを構成し、(オプションで) GitHub Action デプロイを設定する」を選択します。

新しい Firebase プロジェクトを作成するか、既存のプロジェクトを選択します。

「このディレクトリのデフォルトの Firebase プロジェクトを選択してください:」 Firebase Web サイトで作成したプロジェクトを選択します。

「パブリックディレクトリとして使用するものは何ですか?」 「dist」と入力します。

注

次の質問に答えると、ルーティング、ハードリロード、およびアプリでのディープリンクが機能するようになります

「シングルページアプリとして構成しますか（すべての URL を /index.html にリライトしますか）？」 「はい」と入力します。

「ファイル build/index.html はすでに存在します。上書きしますか？」 「いいえ」と入力します。

Github での自動ビルドとデプロイを設定しますか？ 「はい」と入力します。

どの GitHub リポジトリの Github ワークフローを設定しますか？ プロジェクト名を入力します。

すべてのデプロイの前にビルドスクリプトを実行するようにワークフローを設定しますか？ 「はい」と入力します。

すべてのデプロイの前に実行するスクリプトは何ですか？ npm ci && npm run build と入力します。

PR がマージされたときにサイトのライブチャネルへの自動デプロイを設定しますか？ 「はい」と入力します。

サイトのライブチャネルに関連付けられている get hooked ブランチの名前は何ですか？ プロジェクトのメインブランチ名を入力します。

firebase.json 構成ファイルが生成され、アプリのデプロイ用に構成されます。

最後に必要なのは、キャッシュヘッダーが正しく設定されていることを確認することです。これを行うには、headers スニペットを firebase.json ファイルに追加します。完全な firebase.json は次のようになります

{
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000"
          }
        ]
      },
      {
        "source": "precache-manifest.*.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      },
      {
        "source": "service-worker.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      }
    ]
  }
}

firebase.json プロパティの詳細については、Firebase のドキュメント を参照してください。

次に、以下を実行してアプリの最適化されたバージョンをビルドします

ionic build

最後に、以下を実行してアプリをデプロイします

firebase deploy

これが完了すると、アプリがライブになります。