本記事はVueCLI3で作成したVue.jsプロジェクト（雛形のまま）を、スマホアプリとして使えるようにGitHubPagesで公開するまでを目的としています。

せっかく作ったWebアプリ、スマホアプリとして使いたいよね

最近Vue.jsを勉強しています。
せっかく作ったWebアプリはPCブラウザだけじゃなくてスマホで触りたいですよね。
そしてアプリのようにアイコンから起動できて、見た目もネイティブアプリのようになれば嬉しいですよね。

スマホアプリの開発は大変そう… PWAがあるじゃない！

WebアプリをiOSやAndroidアプリにするには、それぞれのネイティブ開発環境で作り直したり、クロスプラットフォーム開発とかをしないといけないみたいです。
ただでさえ勉強中の身、まずはVue.jsだけでそれっぽくできたら嬉しいのだけど…

そんな私にはPWA(Progressive Web Apps)があります！
PWAとはWebアプリをスマホアプリのようにできる技術です。これならとりあえず新しいことはそんなに覚えなくてすみそうです。

VueCLI 3 からPWA対応しています

ありがたいことにVueCLI 3でPWAに対応しました。
プロジェクト作成時にオプションとしてPWAを選択するだけで雛形を作ってくれるようです。
なお、VueCLI2ではPWAは対応していませんのでご注意ください。

参考にさせていただいたページ

ありがとうございます！

やってみよう

手順

PWAに対応したVue.jsプロジェクトを作る
GitHubPages用にちょっと実装
GitHubPagesで公開する
スマホアプリ化

PWAに対応したVue.jsプロジェクトを作る

vue create vue-pwa-sample で Vueプロジェクトを作成します。
この時、 Manually select features を選択して Progressive Web App (PWA) Support　を◉にしてあげましょう。

# Vue.jsプロジェクト作成
vue create vue-pwa-sample

# マニュアル設定時の画面
Vue CLI v3.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◉ Progressive Web App (PWA) Support
❯◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

このあと色々と聞かれてきますが、全てデフォルト設定（Enter連打）でOKです。

🎉  Successfully created project vue-pwa-sample.
👉  Get started with the following commands:

 $ cd vue-pwa-sample
 $ npm run serve

無事にcreateが終わるとこんな感じのログが出ます。

ローカル環境で起動

さて、プロジェクトフォルダに移動して、npm run serve で起動しましょう。

# 起動
cd vue-pwa-sample
npm run serve

# 起動後に表示されるアクセスするためのURL情報
  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.3.9:8080/

問題なく起動できると上記のようにアクセス用のURLが表示されますのでアクセスして見ましょう。

こんな感じの画面が表示されたらOKです。

GitHubPages用にちょっと実装

作成したWebアプリをPWAとして扱うためにはHTTPS接続でないとダメだそうです。
手軽かつ無料でHTTPSで公開できるのはGitHubPagesですので、ありがたく使わさせてもらいましょう。

vue-pwa-sample/vue.config.js

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production' ? '/vue-pwa-sample' : '/',
  outputDir: 'docs',
}

vue.config.jsファイルを新規作成します。上のソースをそのまま貼り付けましょう。

vue-pwa-sample/public/manifest.json

diff --git a/vue-pwa-sample/public/manifest.json b/vue-pwa-sample/public/manifes
t.json
index 17a7f03..25c5506 100644
--- a/vue-pwa-sample/public/manifest.json
+++ b/vue-pwa-sample/public/manifest.json
@@ -3,17 +3,17 @@
   "short_name": "vue-pwa-sample",
   "icons": [
     {
-      "src": "/img/icons/android-chrome-192x192.png",
+      "src": "./img/icons/android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "/img/icons/android-chrome-512x512.png",
+      "src": "./img/icons/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
     }
   ],
-  "start_url": "/index.html",
+  "start_url": "./index.html",
   "display": "standalone",
   "background_color": "#000000",
   "theme_color": "#4DBA87"

既存ファイルである public/manifest.json 内の絶対パスになっている箇所を相対パスに変更しましょう。

この2ファイルの実装でGitHubPagesで表示させることが可能になります。
では npm run build　コマンドでビルドしましょう。
この時に生成される docs フォルダがGitHubPagesでの表示先となります。
無事 docs フォルダが生成されたらローカルリポジトリにコミットしましょう。

# ビルド
num run build

# ローカルリポジトリにコミット
git add .
git commit -m "Add docs"

さて、いよいよ作成したWebアプリ（Vue.jsプロジェクト)をどこからでもアクセスできるように、GitHubで公開しましょう。

GitHubPagesで公開する

GitHubに空リポジトリを作成する

GitHubにログインして、以下の手順で空リポジトリを作成します。

右上の方にある + から　 New repository を選びましょう。
Repository name に vue-pwa-sample と入力します。
下の方にある create repository ボタンをクリックします。

リポジトリを作成後に切り替わった画面の Quick setup の下に https://github.com/msrx9/vue-pwa-sample.git という感じのURLが記載されています。これをコピーして、以下のようにGitHubへpushしましょう。

git remote add origin https://github.com/msrx9/vue-pwa-sample.git
git push --set-upstream origin master

GithubPages設定

リポジトリのページの Settings メニューを選択します。
GitHubPages の Source を None から master branch/docs folder に変更して Saveボタンをクリックします。

すると GitHub Pagesメニューのところに Your site is published at https://msrx9.github.io/vue-pwa-sample/ というメッセージが表示されてます。
アクセスして見ましょう。

ローカル環境で起動と同じくVueのロゴが表示されたら無事デプロイ成功です。

スマホアプリ化

スマホで https://msrx9.github.io/vue-pwa-sample/ にアクセスして、ホーム画面に追加をして上げましょう。
スマホアプリのようにアイコンがホーム画面に追加されましたね。
このアプリを起動してあげるとブラウザで開いた時のように画面の上にアドレスバーは表示されず、ネイティブアプリのような見た目になります。

ブラウザ起動

上部にアドレスバーや下部にメニューがありますね。これではスマホアプリとは言えません。

ホーム画面に追加したアイコンからの起動

アドレスバーやメニューが消えています！　これならスマホアプリと見分けつきませんね！（雛形のままなのでWebサイトにしか見えないのは気にしないでください）

終わりに

Vue.jsやFirebaseの勉強してますと周りに伝えた時に、それってスマホアプリにもできるの？と聞かれたのがキッカケでクロスプラットフォーム開発ではなく、PWAを使う方法があると知る事ができました。
質問してくれた方、ありがとうございます。

作ってるWebアプリをスマホアプリとしても使えるようにしよう