LoginSignup
3

More than 5 years have passed since last update.

Monaca の PWA 対応について

Posted at

現在、ベータ版での提供ですが、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_button01.png

Firebase プロジェクトと Firebase デプロイサービスの設定が正しく行われている場合は、ビルドされたファイルが Firebase プロジェクトにアップロードされます。

firebase_button02.png

Firebase プロジェクトの Hosting 項目に記載されているドメインにアクセスすることで、動作確認をすることができます。

おわりに

最近は、PWA に対応したサイトも増え、注目度も上がっています。

Googleが公開しているはじめてのプログレッシブ ウェブアプリ のソースコードを利用することで、Monaca でも簡単に PWA アプリを作成することができますので、一度試してみてはいかがでしょうか。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3