Vue Academy · レッスン

vite-plugin-pwaの設定

プラグイン設定、manifestオプション、アイコン、スクリーンショット、表示モード、scope

レッスン 1/413 ステップ

「vite-plugin-pwaの設定」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

PWA とは

Progressive Web App は、サービスワーカーと Web アプリマニフェストを通じて、Web アプリにインストール可能性、オフライン対応、ネイティブアプリのような機能を追加します。vite-plugin-pwa を使うと、これらを Vue + Vite のビルドに組み込む作業を自動化できます。

プラグインのインストール

vite-plugin-pwa を開発用依存関係としてインストールします。内部では Workbox を使ってサービスワーカーを生成します。

npm install -D vite-plugin-pwa

VitePWA を Plugins に追加する

VitePWA をインポートし、Vite の plugins 配列に追加します。オプションは、1 回の関数呼び出しに渡します。

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

export default defineConfig({
  plugins: [vue(), VitePWA({ /* options */ })]
});

registerType

registerType は更新の動作を制御します。"autoUpdate" は新しいサービスワーカーをすぐに有効化し、"prompt" は再読み込みの前にユーザーへ確認できるようにします。

VitePWA({
  registerType: "autoUpdate"
});

manifest のオプション

manifest オブジェクトは Web アプリマニフェストになります。主なフィールドは name、short_name、theme_color、icons です。

VitePWA({
  manifest: {
    name: "My Vue App",
    short_name: "VueApp",
    theme_color: "#42b883"
  }
});

icons 配列

複数のサイズのアイコンを指定すると、OS がホーム画面やスプラッシュ画面に適したものを選択できます。アダプティブな形状に対応するため、maskable アイコンも含めてください。

manifest: {
  icons: [
    { src: "/pwa-192.png", sizes: "192x192", type: "image/png" },
    { src: "/pwa-512.png", sizes: "512x512", type: "image/png" },
    { src: "/maskable.png", sizes: "512x512", type: "image/png", purpose: "maskable" }
  ]
}

Workbox の設定

workbox オプションでは、生成されるサービスワーカーを設定します。どのファイルを事前キャッシュするかや、実行時のキャッシュルールを指定できます。

VitePWA({
  workbox: {
    globPatterns: ["**/*.{js,css,html,png,svg}"]
  }
});

injectRegister auto

injectRegister: "auto" を指定すると、サービスワーカーを登録するコードが自動的に注入されるため、登録処理を手書きする必要がありません。

VitePWA({
  registerType: "autoUpdate",
  injectRegister: "auto"
});

仮想 Register モジュールの使用

確認ベースの更新では、エントリーファイルに仮想 registerSW モジュールをインポートし、そのコールバックを利用します。

import { registerSW } from "virtual:pwa-register";

const updateSW = registerSW({
  onNeedRefresh() { /* show update toast */ },
  onOfflineReady() { /* show ready toast */ }
});

開発環境で有効にする

デフォルトでは、サービスワーカーは本番環境でのみ実行されます。devOptions を有効にすると、開発中に PWA の動作をテストできます。

VitePWA({
  devOptions: { enabled: true }
});

インストールの確認

ビルドしてサーバーで配信した後、Chrome DevTools の Application タブを開きます。マニフェストが解析済みで、サービスワーカーが有効になっており、アドレスバーからインストールを促す表示が利用できることを確認できます。

クイックチェック

injectRegister: "auto" は何を行いますか？

対話的なレッスンで答える

まとめ

registerType（autoUpdate または prompt）、manifest（name、short_name、theme_color、icons 配列）、workbox オプションを指定して、VitePWA を Vite の plugins 配列に追加します。サービスワーカーを自動的に登録するには injectRegister: "auto" を使い、確認ベースの更新には virtual:pwa-register モジュールを使います。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 42
レッスン: 156

無料で学習を始めるコース全体を表示

よくある質問

「vite-plugin-pwaの設定」レッスンは無料ですか？

はい。「vite-plugin-pwaの設定」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「vite-plugin-pwaの設定」で何を学びますか？

プラグイン設定、manifestオプション、アイコン、スクリーンショット、表示モード、scope ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「vite-plugin-pwaの設定」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る