CrossRoadスマートフォン用の表示で見るCrossRoadAR、MR、VR、Babylon.jsを中心とした技術ブログ。2019の3日目の投稿です。昨日は@dryttさんの初学者目線でみるPWAでした。本日は、PWAとBabylon.jsで作ったWebXRアプリをオフラインで使う方法を説明します。Babylon.jsとは?Babylon.jsとは、WebGLを使うためのフレームワークです。3DCGを使ったコンテンツを開発できます。VRにも対応しています。雑多ですが、色々書いているのでよかったらご覧ください。PWAとは?Webサイトをアプリのように使うことができる仕組みです。詳しくは、以前書いた記事の冒頭をご覧ください。www.crossroad-tech.comまた、昨日の投稿でもわかりやすく書かれているので、ご参考ください。qiita.com今回は、PWAの利点の1つであるオフラインでも動作させる方法を説明します。Workerという仕組みが必要です。Workerの使い方を探すと、海外も含めてサンプルサイトがたくさん出てきます。これらのサイトにあるPWAをインストールしても、スマートフォンを機内モードにすると、起動に失敗しました。以前試した時はオフライン化できたのですが、数時間経つと起動できなくなっていました。www.crossroad-tech.com最終的に、Mozillaのサイトを参考にすることで、オフライン化に成功しました。Workerを解説したページがあります。developer.mozilla.orgここに書いてあるfetch処理を使って、このように書きました。Worker処理を修正しました。アクセスして、ホーム画面に追加しました。この後、機内モードにして1日放置してから、機内モードのままでホーム画面に追加したPWATestを起動することができました。Toolでみたときの画面です。Storageをみると、ページを開くために必要なデータが登録されていることがわかります。eventが連続して実行され、あらかじめcache_v1として登録しておいたキャッシュリソースを自分自身から引き出せています。Testサイトにアクセスし、ブックマークしました。その後機内モードにしてから電源を切り、2日近く放置しました。Testにアクセスして起動できることを確認しました。オフラインで起動できることを示した動画です。以前作った不完全版のオフライン処理(一定時間経過するとアクセスできなくなる)が動いたときと同じなので、動画としては同一です。キャッシュの容量制限についてオフラインで起動できるのはとても便利ですが、実際は容量制限があるようです。love2dev.comこの記事によると、機器のディスク容量によって異なりますが、iOSのSafariの場合50MBが一つの目安になるようです。Androidについては書かれていませんが、50MBを1つの目安にしてもよいかもしれません。今回作ったサイトのモデルは2.9MBで、htmlやjavascriptのソースコードを合わせても10MB以下でした。詳しく調べられていませんが、あまり大きなデータはオフライン化が難しいかもしれません。Questで動かすことができました。この方法を使えば、Babylon.jsやThree.jsで作った簡単なWebXRアプリはオフラインで手軽に使えそうです。ソースコードは下記で公開しています。そのうち、必要な処理だけまとめたものを作ろうと思います。github.com明日は、@ProjectEuropaさんの投稿です。関連記事2019-10-23プロトタイピングツール「Noodl」でBabylon.jsを表示させる手順について前回の記事では、Noodlの概要を紹介しました。Musicに関する勉強会が開催されました。WebXRの内容をまとめました先日、Facebook主催のカンファレンス「F8」が開催されました。»ProfileAR、MR、VR、Babylon.jsを中心とした技術ブログです。広く色々な技術を勉強するのが好きで、あれこれ書いています。詳細なプロフィールはこちらをご確認ください。2020)■プライバシーポリシー■こちらに記載しておりますのでご確認ください。■お問い合わせ■こちらよりお願いいたします。月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。