VueプロジェクトのPWA化作業
VueCLIの用意
VueCLIが用意できていなかったので
npm install -g @vue/cli
既存のVueプロジェクトをPWA化
vue add @vue/pwawを実行
-> % vue add @vue/pwa 📦 Installing @vue/cli-plugin-pwa... + @vue/cli-plugin-pwa@4.3.1 added 63 packages from 23 contributors, removed 902 packages, updated 1 package, moved 41 packages and audited 1992 packages in 24.967s 32 packages are looking for funding run `npm fund` for details found 100 vulnerabilities (76 low, 9 moderate, 14 high, 1 critical) run `npm audit fix` to fix them, or `npm audit` for details ✔ Successfully installed plugin: @vue/cli-plugin-pwa 🚀 Invoking generator for @vue/cli-plugin-pwa... 📦 Installing additional dependencies... added 1 package from 1 contributor and audited 1993 packages in 13.669s 32 packages are looking for funding run `npm fund` for details found 100 vulnerabilities (76 low, 9 moderate, 14 high, 1 critical) run `npm audit fix` to fix them, or `npm audit` for details ✔ Successfully invoked generator for plugin: @vue/cli-plugin-pwa
色々追加してくれた。
manifest.jsonの作成
/publics配下にmanifest.jsonを作成
{ "name": "the-simplist", "short_name": "the-simplist", "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" } ], "start_url": "././index.html", "display": "standalone", "background_color": "#000000", "theme_color": "#4DBA87" }
index.htmlのhead要素に、manifestの参照を追加
<link rel="manifest" href="/public/manifest.json" />
動作確認で以下エラーがでた。 そもそもwebpackでvueプロジェクトを作成していたのでpwaで作り直してみる
Manifest: Line: 1, column: 1, Syntax error.
