Vue.jsプロジェクトのPWA対応

Vue CLI3では、GoogleのWorkbox webpack Pluginsをラップしたプラグイン @vue/cli-plugin-pwa を使うことで簡単にPWA対応ができる。（2以前は vuejs-templates/pwa というテンプレートが提供されていたのみで、既存プロジェクトに組み込みが手間であった。）

プラグインの追加方法

vue add @vue/pwa

プラグインを追加するとプロジェクトに以下の変更が適用される。

• register-service-worker が依存関係 (package.json) に追加される。
• src/main.js に import './registerServiceWorker' が追記される。
• マニフェストファイル・アイコン画像ファイルなどが追加される。
  • public/manifest.json
  • public/robots.txt
  • public/img/icons/*.*

ビルド方法

通常のビルドを実行すれば、PWA対応に必要なリソースが組み込まれる。

npm run build

ローカルでのテスト方法

開発用ビルドでは service-woker が登録されないため、リリース用にビルドしたリソースをローカルで実行したWebサーバーを経由でアクセスしてテストするのが良い。Web Server for ChromeというGoogle Chromeプラグインを使うと簡単にローカルのディレクトリを公開するWebサーバーを立てられる。

サブディレクトリへのデプロイ

アプリのデプロイ先がドメイン直下でない場合は manifest.json 内のパスを manifest.json からの相対パスで指定する必要がある。

{
  ...
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png",
      ...
    }, 
    ...
  ],
  "start_url": "./index.html",
  ...
}

参考：https://www.w3.org/TR/2018/WD-appmanifest-20180719/#start_url-member