現在、ベータ版での提供ですが、Monaca で PWA アプリのビルドができるようになりました。
また、Monaca で提供しているデプロイサービスに PWA アプリの検証として利用できる Firebase が追加されました。
Monaca で PWA アプリのビルドをした後に Firebase の Hosting 用プロジェクトにアップロードすることで、PWA アプリを検証することができるようになります。
PWA アプリの設定
Monaca プロジェクトを開き、設定 > PWAアプリ設定から、必要事項を設定し、保存ボタンをクリックすると、wwwフォルダー配下にmanifest.jsonファイルが作成されます。
このmanifest.jsonファイルをindex.htmlに設定します。
<head>
<link rel="manifest" href="/manifest.json">
</head>
Firebase デプロイサービスの設定
Monaca の Firebase デプロイサービスを利用する場合は、はじめに Firebase コンソールからHosting 用のプロジェクトを作成する必要があります。
Firebase プロジェクトの作成については、Google から提供されているドキュメント等を参照してください。
Firebase コンソールからプロジェクトを作成後、プロジェクトの設定 > 全般に記載されている プロジェクト ID を確認します。
次に、Monaca で PWA アプリのビルドをしたファイルを Firebase プロジェクトにアップロードするためには、認証用トークンを取得する必要があります。
この認証用のトークンを取得するためには、PC に Firebase CLI をインストールし、login:ciコマンドを実行する必要があります。
firebase login:ci
Firebase CLI コマンドについては、Firebase CLI リファレンス を参照していください。
login:ci コマンドを実行すると、ブラウザーが起動します。
起動したブラウザーからログインすると、コマンドを実行したターミナル上に、
Success! Use this token to login on a CI server:
と表示され、下に認証用トークンが表示されるので、表示された認証用トークン確認します。
プロジェクト IDと認証用トークンの確認ができたら、Monaca プロジェクトの設定 > デプロイサービスを開き、新しく追加するボタンをクリックします。
「サービス名」で「Firebase」を選択し、下記の項目を入力後、追加ボタンをクリックします。
| 項目名 | 説明 |
|---|---|
| エイリアス名 | デプロイサービスで使用する名前 |
| APIトークン | login:ci コマンドで取得した認証用トークン |
| プロジェクトID | Firebase コンソールで作成したプロジェクト ID |
firebase.json を設定する
Firebase デプロイサービスを利用するためには、Monacaプロジェクトのルートにfirebase.jsonファイルが必要になります。
新しい Monaca テンプレートからは、firebase.json が追加される予定になっていますが、現在は、firebase.json を新規に作成する必要があります。
firebase.json の作成は、Monacaプロジェクトのファイル > 新規ファイル を選択し、
| 項目名 | 入力内容 |
|---|---|
| フォルダ | / |
| ファイル名 | firebase.json |
を入力後、OKボタンをクリックします。
firebase.json の記述例です。
{
"hosting": {
"public": "www",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
確認してみる
Firebase デプロイサービスの設定を行なっている場合、PWA アプリのビルドを実行し、ビルドが成功すると Firebase プロジェクトにアップロードするためのボタンが表示されます。
Firebase プロジェクトと Firebase デプロイサービスの設定が正しく行われている場合は、ビルドされたファイルが Firebase プロジェクトにアップロードされます。
Firebase プロジェクトの Hosting 項目に記載されているドメインにアクセスすることで、動作確認をすることができます。
おわりに
最近は、PWA に対応したサイトも増え、注目度も上がっています。
Googleが公開しているはじめてのプログレッシブ ウェブアプリ のソースコードを利用することで、Monaca でも簡単に PWA アプリを作成することができますので、一度試してみてはいかがでしょうか。