CrossRoad

AR、MR、VR、Babylon.jsを中心とした技術ブログ。 If you're non-Japanese native guys, check "English" category.

Babylon.jsで動くサイトをPWA化する手順について

Babylon.jsを使ってOculus Quest向けのアプリを作ろうとすると、ネットワーク接続が必須になります。そのため、自宅以外では動作確認がしづらくなります。

そこで、Progressive Web App(PWA)で解決ができないかを調べることにしました。

PWAをうまく使うと、Webブラウザで表示したコンテンツをオフラインで動くアプリのように扱えるためです。

まだオフライン動作を確認しきれていませんが、今回はBabylon.jsを使ったときのサイトをPWA化する手順までをまとめました。

1. PWAとは?

Progressive Web Appの略で、Googleが提唱する仕組みです。以下、引用します。

プログレッシブウェブアプリは、デスクトップとモバイルの両方でインストール可能なアプリと同等の体験を提供し、ウェブ上で直接構築・配信される高速で信頼性の高いウェブアプリです。

プログレッシブウェブアプリはブラウザタブで実行できますが、さらにインストールすることもできます。
サイトをブックマークしてもショートカットが追加されるだけですが、プログレッシブウェブアプリをインストールすると、見た目も動作も他のインストールされているアプリケーションと同じようになります。
他のアプリを起動するのと同じ場所から起動します。スプラッシュスクリーン、アイコンなどのカスタマイズを含む起動体験も制御できます。

引用元:はじめてのプログレッシブウェブアプリ  |  Web Fundamentals  |  Google Developers

詳しくはこの辺りの記事が参考になります。

qiita.com

press.monaca.io

developer.microsoft.com (トップページ以外原則英語ですが、既存のサイトをPWA化する手順、デバッグ方法、Microsoft Storeに提出する手順など情報量は多いです)

2. Babylon.jsで作ったWebサイトをPWA化する手順

2.1 Babylon.jsで構築

以前作ったこちらを使いました。

GitHub - flushpot1125/babylonjs_gui

関連記事:Babylon.jsでglb形式の建物モデルを読み込み、Oculus Questでテレポート移動させる方法 - CrossRoad

2.2 httpsが使えるサイトを作成

色々方法はありますが、Github Pagesを使うのが簡単だったので、GithubのPublicリポジトリを新しく作って必要なファイルを入れました。

Github Pagesとは、自分の作ったpublicリポジトリのindex.htmlを使ってwebサイトのようにできる仕組みです。httpsに対応しているのも特徴です。Github Pagesを使う方法は色々情報がありますが、例えば以下が参考になります。

qiita.com

cartman0.hatenablog.com
(独自ドメインまで設定したい場合)

2.3 Service Worker、Manifestファイルの作成

この辺りは多数の情報があるのでそれらを参考にすれば作成できます。例えば、以下のサイトがわかりやすいです。

qiita.com

参考までに、私の作成した内容を記載しました。

ServiceWorker

gistfc80128ae411e86c800e3f4f6db11504

新しくjavascriptファイルを作りました。4.1で後述する問題を防ぐため、index.htmlと同じ階層に置きます。

manifest.json

gist904589b9a85b3830e9a9bc7bb67da8a2

2.4 アイコン画像を準備する

256×256と、192×192の画像を準備します。アイコンのサイズについては、いくつか情報があり何が正しいかはまだ把握できていません。少なくとも、今回の2種類の画像を使った限りでは問題は起きませんでした。

2.5 必要なファイルをcommit、push

試行錯誤状態ですが、参考までに記載しました。

github.com

3.動作確認

3.1 オンライン状態でのアプリ起動

私の場合このようなサイトを作りました。

PWA test

アクセスすると、博物館のような3Dモデルの中を見回すことができます。iPhone(Safari)、Androidスマートフォン(Chrome)、Mac(Chrome)で動作を確認しました。

サイトを表示すると、アプリとして本体に保存するための操作をすることができます。各端末での操作方法は以下の通りです。

PWA installation for iPhone, Android, and Mac(Chrome)

iPhone/Androidの場合、アイコンをタッチすると、先ほどのWebページと同じ内容が表示されます。

Macの場合、「アプリをインストールしますか?」という通知で「インストール」を選択すると、「.app」データが保存されます。

Chromeの検索バーに「chrome://apps」と入力してEnterキーを押すと、そこから起動できます。

3.2 オフライン状態のアプリ起動

現時点では、機内モードにした上でアプリ化したアイコンから起動しても、見た目は表示されます。ただし、glbファイルのロードに失敗、あるいはマテリアル関係に問題があり、このような表示になってしまいます。

a failure case of PWA offline runnning

まだオフライン用の処理をほとんど読めていないので、次回検討予定です。

4. Tips

4.1 "No matching service worker detected."が表示される

PC版のChrome Developer Tools(CDT)を使った場合です。CDTを使うと表示したサイトがPWA対応しているかを確認できます。しかし、私が最初に試した時は以下のエラーメッセージが表示されました。

"No matching service worker detected. You may reload the page,or check that the service worker for the current page also controls the start URL from the manifest. "

no matching service worker detecef

このように対応して解決しました。

service-worker.jsをindex.htmlと同じ階層に移動し、register処理のファイルパスを変更

//index.html
if ('serviceWorker' in navigator) {
      //navigator.serviceWorker.register('js/service-worker.js').then(function() { console.log('Service Worker Registered'); });
      navigator.serviceWorker.register('service-worker.js').then(function() { console.log('Service Worker Registered'); });
   }

manifest.jsonのstart_urlをシンプルなものに変更

     //必要箇所のみ抜粋
     "start_url": "./?utm_source=homescreen",  //最初の記述
    "start_url": ".",//変更後

4.2 Chrome(Mac)でアプリ化できない場合、chrome://flagsで設定変更が必要

このようにDesktop PWAs local updatingをDefaultからEnabledに変更します。

PWA settings of chrome flags

4.3 Chrome v77(Mac)では、検索バーに表示されたアイコンでアプリ化する

この記事では、Chrome Developer Tool(CDT)から操作することが書かれていましたが、スクリーンショットにあったAdd to Homescreenはなくなっていました。代わりに、PWA対応ページにアクセスすると、検索バーにボタンが増えていました

PWA local icon on Chrome v77

5. おわりに

とりあえず、Babylon.jsで作ったサイトであってもPWAとして扱えることがわかりました。 次回はオフラインで利用するための方法を調べたいと思います。