Monaca の PWA 対応について

6269 ワード
monaca monaca テキストリンク

現在、ベータ版での提供ですが、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　の記述例です。

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 アプリを作成することができますので、一度試してみてはいかがでしょうか。