Babylon.jsを使ってOculus Quest向けのアプリを作ろうとすると、ネットワーク接続が必須になります。そのため、自宅以外では動作確認がしづらくなります。
そこで、Progressive Web App(PWA)で解決ができないかを調べることにしました。
PWAをうまく使うと、Webブラウザで表示したコンテンツをオフラインで動くアプリのように扱えるためです。
まだオフライン動作を確認しきれていませんが、今回はBabylon.jsを使ったときのサイトをPWA化する手順までをまとめました。
1. PWAとは？
Progressive Web Appの略で、Googleが提唱する仕組みです。以下、引用します。
プログレッシブウェブアプリは、デスクトップとモバイルの両方でインストール可能なアプリと同等の体験を提供し、ウェブ上で直接構築・配信される高速で信頼性の高いウェブアプリです。
プログレッシブウェブアプリはブラウザタブで実行できますが、さらにインストールすることもできます。
サイトをブックマークしてもショートカットが追加されるだけですが、プログレッシブウェブアプリをインストールすると、見た目も動作も他のインストールされているアプリケーションと同じようになります。
他のアプリを起動するのと同じ場所から起動します。スプラッシュスクリーン、アイコンなどのカスタマイズを含む起動体験も制御できます。
引用元：はじめてのプログレッシブウェブアプリ | Web Fundamentals | Google Developers
詳しくはこの辺りの記事が参考になります。
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を使う方法は色々情報がありますが、例えば以下が参考になります。
cartman0.hatenablog.com
(独自ドメインまで設定したい場合)
2.3 Service Worker、Manifestファイルの作成
この辺りは多数の情報があるのでそれらを参考にすれば作成できます。例えば、以下のサイトがわかりやすいです。
参考までに、私の作成した内容を記載しました。
ServiceWorker
gistfc80128ae411e86c800e3f4f6db11504
新しくjavascriptファイルを作りました。4.1で後述する問題を防ぐため、index.htmlと同じ階層に置きます。
manifest.json
gist904589b9a85b3830e9a9bc7bb67da8a2
2.4 アイコン画像を準備する
256×256と、192×192の画像を準備します。アイコンのサイズについては、いくつか情報があり何が正しいかはまだ把握できていません。少なくとも、今回の２種類の画像を使った限りでは問題は起きませんでした。
2.5 必要なファイルをcommit、push
試行錯誤状態ですが、参考までに記載しました。
3.動作確認
3.1 オンライン状態でのアプリ起動
私の場合このようなサイトを作りました。
アクセスすると、博物館のような3Dモデルの中を見回すことができます。iPhone(Safari)、Androidスマートフォン(Chrome)、Mac(Chrome)で動作を確認しました。
サイトを表示すると、アプリとして本体に保存するための操作をすることができます。各端末での操作方法は以下の通りです。
iPhone/Androidの場合、アイコンをタッチすると、先ほどのWebページと同じ内容が表示されます。
Macの場合、「アプリをインストールしますか？」という通知で「インストール」を選択すると、「.app」データが保存されます。
Chromeの検索バーに「chrome://apps」と入力してEnterキーを押すと、そこから起動できます。
3.2 オフライン状態のアプリ起動
現時点では、機内モードにした上でアプリ化したアイコンから起動しても、見た目は表示されます。ただし、glbファイルのロードに失敗、あるいはマテリアル関係に問題があり、このような表示になってしまいます。
まだオフライン用の処理をほとんど読めていないので、次回検討予定です。
確認した結果はこちらです。
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. "
このように対応して解決しました。
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に変更します。
4.3 Chrome v77(Mac)では、検索バーに表示されたアイコンでアプリ化する
この記事では、Chrome Developer Tool(CDT)から操作することが書かれていましたが、スクリーンショットにあったAdd to Homescreenはなくなっていました。代わりに、PWA対応ページにアクセスすると、検索バーにボタンが増えていました
5. おわりに
とりあえず、Babylon.jsで作ったサイトであってもPWAとして扱えることがわかりました。 次回はオフラインで利用するための方法を調べたいと思います。
