前回、PWAを使ってBabylon.jsで作られたWebサイトをアプリのようにする方法をまとめました。
PWA(Progressive Web App)の特徴の１つにオフライン動作というのがあります。うまく使えればWebXRアプリをネットワーク接続不要で動作できるので、デモ展示などで役立ちます。
試したところ、Oculus Questのブラウザでオフライン動作をさせることはできました。最低限動いただけで気になる点がいくつかありますが、ひとまず現状の構築手順をまとめました。
2019/12/3 追記
Service Workerの処理を変更することで、時間が経ってもオフラインを保持できるようになりました。
この記事で紹介しているGithubリポジトリを新しくしているので、ご確認ください。
- 1. httpsサイト準備、manifest.json定義、serviceworkerを動かすjavascriptファイルを準備する
- 2. service-worker.jsを修正する
- 3. 動作確認する
- 4. 残課題
- 5. Tips
- 6. おわりに
- 参考にさせていただいた記事
1. httpsサイト準備、manifest.json定義、serviceworkerを動かすjavascriptファイルを準備する
これは前回の記事の2.1、2.2、2.3、2.4、2.5と同一です。2.3で書いたservice-worker.jsだけ修正が必要なので、次で解説します。
2. service-worker.jsを修正する
2.1 オフラインで動かしたいファイルを全て定義する
PWAでオフライン動作させるには、オフラインでも動いてほしいファイルをあらかじめ定義する必要があります。 たとえば、今回はindex.html、Babylon.jsのコード、glb形式の3Dデータ、WebVRの表示処理を書いたjavascriptファイルが必要です。
gista0e6c5fee92d41ad4492a211c4b4f14e
パスはindex.htmlを起点として書きます。今回のフォルダ構造はこの通りです。
まだ確認しきれてないのですが、ServiceWorkerの仕組みについて書かれている色々なサイトでは、必要なファイルを全て書いていました。"/js/*"のようにフォルダ以下を全て指定してもよいのかは今後調べてみます。
2.2 キャッシュ登録処理を書く
gist3c1ca27a38bbd92e1f0158b1cdfc2807
オフラインだったとき、ServiceWorkerは最初のcache.addAllで、定義したファイル一式をキャッシュとして登録します。cacheNameとして定義した変数はあとで使います。
2.3 オフライン時のキャッシュ読み込み処理を書く
gista58f320487de4a83eabe74a08637388b
オフラインだったとき、ServiceWorkerはあらかじめキャッシュを登録しているとfetch処理によって読み込みをします。サイトによっていくつかの書き方がありました。
ただ、glbファイルをキャッシュ登録が失敗したり、そもそもオフラインにならなかったりとうまくいきませんでした。（まだ理由は追えていません）
2.4 service-worker.js全体を確認する
完成版のservice-worker.jsを貼っておきます。
3. 動作確認する
Oculus Quset標準のWebブラウザで試しました。下記のURLにアクセスすると確認できます。
https://flushpot1125.github.io/bjs_pwa_example/
このようになります。
動画だと見づらいですが、WiFi接続はしていません。
ところで、iPhone、Android、Mac(Chrome)では、初回アクセス時にインストールを促す通知画面が出ます。
Oculus Questの場合は何も出なかったのでブックマークしました。その後Oculus QuestのWiFi接続を切ってから、先ほどのブックマークにアクセスした結果が動画の通りです。
ソースコード一式です。
使用した3Dモデル：The Entryway - Museum Diorama (by Joshua Johanson)
リファクタリングができてませんが、必要あればご参考ください。
使い方ですが、自分のリポジトリにforkして、Github pagesの機能でhttpsサイト対応してアクセスするだけです。
4. 残課題
4.1 一定時間オンライン接続がないと、オフライン動作しない可能性がある
今回のコードは、他にもAndroidスマートフォンで確認できました。しかし、14時間ほど経ってから再度オフラインにしたところ接続できなくなっていました。
iOSは失敗しましたが、原因はまだ調べられてません。
Mac(Chrome)は.app拡張子のファイルを消したら、Webサイト画面に「インストール」という表示が出なくなってしまい、確認できていません。こちらも原因は未調査です。
キャッシュ保持時間など、まだ設定が必要なのかもしれません。わかったら追記します。
4.2 キャッシュクリアやChrome再起動をしても、変更が反映されないことがある
Webサイト構築全般にありそうですが、サイト側を変更した後にアクセスしても変更が反映されないことがあります。今回も変更が反映されないことがありました。
そういうときはキャッシュをクリアするとよいですが、キャッシュクリア、ブラウザ再起動をしてもpushしたコンテンツが表示されないことがありました。
おそらくServiceWorkerの使い方の問題と思いますが、まだ調査が必要そうです。 わかったら追記します。
5. Tips
5.1 Oculus Quest/Goは開発者モードをオフにしないと、Macで画像/映像の転送ができない
本題とはあまり関係ないですが、確認結果整理に必要だったので少し困りました。開発者モードはオンにしたままなので、それでうまくいったときもあったのですが謎です。
こちらを参考にさせていただきました。
この記事を閲覧している人は開発者モードをオンにしている人が多いと思うが、オフにしないとファイル転送が出来ないらしい。 マジかよ！とオフにして転送完了したが、本当かな？と思って開発者モードに戻して見たところ、普通にファイル転送出来た。
引用元：Oculus Questのスクリーンショットや録画をmacに取り込む - Oculus Quest / Unity もろもろ
5.2 iOSの場合は別途対応が必要
iOSの場合、モーションセンサが効かないのが基本状態なので、ユーザ許可をとるコードを追記する必要があります(iOS13以降)。
この辺りは下記のまとめがわかりやすいのでご参考ください。３行で言うとこのようになります。
iOS 13でどうなったのか3行で
iOS 13でもデフォルトでモーションデータを取得できない
ユーザーに変更してもらうSafariの設定項目がなくなった
新APIの DeviceMotionEvent と DeviecOrientationEvent を叩く必要がある
引用元：iOS 12.2で半ば終わったWebVRとWebARがiOS 13でどうなったか - Qiita
6. おわりに
やりたかったことはできましたが、まだ原理的にできることを確認したというレベルです。私自身、PWAやService Workerについてわかってないことが多いので、これを機会に勉強してみようと思います。
参考にさせていただいた記事
PWA 入門 〜iOS SafariでPWAを体験するまで〜 2019年7月更新 - Qiita
How to install Progressive Web Apps in Google Chrome - gHacks Tech News
15分PWAクッキング -オフラインで動くページを作ってみよう- - Qiita
PWA / Service Worker を使ってオフラインでもサイトを表示できるようにする | Workabroad.jp
PWA形式のWebサイトを構築してAndroidスマートフォンにインストールする - Qiita
Adding a Service Worker and Offline into your Web App
