Progressive Web Apps in Vue
Making your Vue app a PWA with Vite
The two main requirements of a PWA are a Service Worker and a Web Application Manifest. While it's possible to add both of these to an app manually, we recommend using the Vite PWA Plugin instead.
To get started, install the vite-plugin-pwa
package:
npm install -D vite-plugin-pwa
Next, update your vite.config.js
or vite.config.ts
file and add 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' })],
});
This minimal configuration allows your application to generate the Web Application Manifest and Service Worker on build.
For more information on configuring the Vite PWA Plugin, see the Vite PWA "Getting Started" Guide.
See the Vite PWA "Deploy" Guide for information on how to deploy your PWA.
Making your Vue app a PWA with Vue CLI
As of Ionic CLI v7, Ionic Vue starter apps ship with Vite instead of Vue CLI. See Making your Vue app a PWA with Vite for Vite instructions.
The two main requirements of a PWA are a Service Worker and a Web Application Manifest. While it's possible to add both of these to an app manually, the Vue CLI has some utilities for adding this for you.
既存のプロジェクトの場合は、 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 がビルド時に作成する service worker です。ここでは、service worker がアップデート、ネットワーク接続の変更、またはエラーを検出したときのユーザの操作性をカスタマイズできます。
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);
},
});
}
生成される Service Worker は、 Workbox's webpack plugin に基づいており、デフォルトで GenerateSW()
を使用するように設 定されています。つまり、Workbox はビルド時に、処理するすべてのファイルの Service Worker キャッシュを自動的に生成します。
これを設定してデフォルトの動作を変更したい場合は、GitHub にある PWA plugin docs をチェックアウトします。
Manifest
Service Worker に加えて、Vue PWA プラグインはアプリケーションの manifest ファイルも作成します。デフォルトでは、CLI は次のエントリーを含む manifest を生成します。
{
"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 plugin docs のドキュメントを必ず読んでください。
Deploying
Firebase, Vercel, Netlify,さらには Azure Static Web Apps など、さまざまなホストを使用することができる。いずれの場合も、同様のセットアッププロセスを完了する必要があります。このガイドでは、ホストの例として Firebase を使用します。このガイドに加えて、 Vue CLI docs のドキュメントには、さまざまなプロバイダーにデプロイするためのガイドも含まれています。
Firebase
Firebase ホスティングは Progressive Web Apps に多くの利点を提供しており、CDN による高速応答、デフォルトで有効になっている HTTPS、 HTTP2 push のサポートなどがある。
まず、まだ使用していない場合は、Firebase で プロジェクトを作成 します。
次にターミナルで Firebase CLI をインストールします:
npm install -g firebase-tools
If it's the first time you use firebase-tools, login to your Google account with firebase login
command.
With the Firebase CLI installed, run firebase init
within your Ionic project. The CLI prompts:
"Which Firebase CLI features do you want to set up for this folder?" Choose "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys".
Create a new Firebase project or select an existing one.
"Select a default Firebase project for this directory:" Firebase の Web サイト上で作成したプロジェクトを選択します。
"What do you want to use as your public directory?" "dist" を選択ください。
Answering this next question will ensure that routing, hard reload, and deep linking work in the app:
Configure as a single-page app (rewrite all urls to /index.html)?" "Yes" を選択します.
"File build/index.html already exists. Overwrite?" Enter "No".
Set up automatic builds and deploys with Github? Enter "Yes".
For which GitHub repository would you like to set up a Github Workflow? Enter your project name.
Set up the workflow to run a build script before every deploy? Enter "Yes".
What script should be run before every deploy? Enter npm ci && npm run build
.
Set up automatic deployment to your sites live channel when a PR is merged? Enter "Yes".
What is the name of the get hooked branch associated with your sites live channel? Enter your project's main branch name.
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 documentation を参照ください。
次に、次のコマンドを実行して、アプリケーションの最適化バージョンを構築します:
ionic build
最後に、アプリをデプロイします:
firebase deploy
これが完了すると、アプリがライブになります。