MonacaはHTML5/CSS/JavaScriptを使ってスマートフォンアプリを開発します。ネイティブのプラグインも使えますが、基本的にはWeb標準の技術を用います。そのため、アプリのコードをWebサイトでも使いたいという声をよく聞きます。
そこで、アプリとWebサイトをゆるく繋ぐ技術として注目したいのがPWA（Progressive Web Apps）です。PWAは特定の技術ワードという訳ではなく、Webアプリケーションをよりスマートフォンアプリに近づけるためのベストプラクティス集といった位置づけになります。

先日、MonacaがPWA開発に対応しました。今回はその基本的な使い方と、一歩発展させたTipsを紹介します。

MonacaのPWA機能について

MonacaではPWA向けに以下の機能が提供されます。

マニフェストファイルの編集機能

PWAは一般的にmanifest.jsonというファイルで提供されます。MonacaではこのマニフェストファイルをGUI上で編集したり、アイコンの一括適用をしたりすることができます。

Firebase Hostingへのデプロイ

PWAはWebサイトの一種なので、アプリではなくWebサーバ上にデプロイする必要があります。コードをZip形式でダウンロードもできますが、Firebase HostingへMonaca IDEから直接デプロイすることもできます。

MonacaでPWAプロジェクトを作成

ではPWA開発の最初の一歩です。一番お勧めなのはPWAテンプレート（サンプルプロジェクト ＞ 最小限のPWAテンプレート）を用いた方法です。あらかじめ以下のPWA向け設定が組み込まれた状態のプロジェクトになります。

  • Service Workerの読み込み
  • マニフェストファイルの配置

今回はこのテンプレートファイルを用います。

Firebase Hostingの設定

まずは Firebase Hosting の設定を行います。Firebaseの管理コンソールを表示して、プロジェクトを作成します。このとき、プロジェクトIDが生成されます（矢印部）。このIDはMonacaとの連携設定をする際に必要になるので覚えておきます。

Monaca IDEでAPIキーを取得する

次にMonaca IDEのターミナル機能を使ってFirebase CLIをインストールします。フリープランの場合はターミナル機能が使えませんので、ローカルで実行します（Node.jsが必要です）。

npm install firebase-tools -S

そしてAPIキーを取得します。

node_modules/.bin/firebase login:ci --no-localhost

コマンドを入力するとURLが表示されますので、そのURLを開きます。そうするとGoogleのログイン画面が表示されます。

ログインを実行するとAPIキーが表示されます。これを忘れないようにメモしておきます。

デプロイ設定をする

Monaca IDEの「設定」＞「デプロイサービス」を選択し、デプロイ先としてFirebaseを選択します。

そして先ほどメモしたAPIキーとプロジェクトIDを入力します。エイリアス名は分かりやすい任意の名称を設定します。

これで準備完了です。

Firebase Hostingにデプロイする

ではデプロイを試してみましょう。Monaca IDEで「ビルド」＞「PWAアプリのビルド」を選択します。

そしてビルドを開始します。

完了するとZipファイルがダウンロードできる他、Firebaseへのデプロイボタンも表示されます。

ここでFirebaseボタンを押すと、PWAアプリがFirebase Hosting上に反映されます。

GitHub Pagesへのデプロイ

続いてはTipsとしてGitHub Pagesへのデプロイ方法も紹介します。

事前準備として、Monaca IDEのターミナルでプロジェクトをGitHubリポジトリにプッシュしておきます。Monaca搭載のGitHub連携機能では、以下に紹介するデプロイ機能は使えないので注意してください。

次に、「gh-pages」というGitHub Pagesへコードをプッシュしてくれるライブラリをインストールします。

npm install gh-pages -S

package.jsonを編集する

プロジェクトのルートディレクトリにある、package.jsonの scripts 内に、deploy キーを追加します。

"scripts": {
  "monaca:preview": "npm run dev",
  "dev": "browser-sync start --no-open -s www/ --watch --port 8080 --ui-port 8081",
  "deploy": "gh-pages -d www"
},

GitHub Pagesにデプロイする

デプロイの実行は簡単で、以下のコマンドをターミナルで叩くだけです。

npm run deploy

このコマンドはwww以下をGitHubのgh-pagesブランチにプッシュします。これによって、GitHub Pages上にPWAアプリがデプロイされます。

まとめ

PWAはWebサイトをアプリ化するだけでなく、Service Workerを使ったキャッシュによる表示高速化であったり、オフライン対応、Webプッシュ通知など魅力的な機能がたくさんあります。ぜひMonaca IDEを使ってPWA開発をはじめてみてください！