PWA Night_vol.33での発表資料です。 ここで紹介しているGitHubリポジトリは以下です。 https://github.com/flushpot1125/bjs_pwa_example

1. プレゼンテーションの
表紙のタイトル
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
| Limes
| 2021.11.17
PWAを使ってWebXRコンテンツをオフラインで動く
ようにする⼿順について

2. ⾃⼰紹介
・2013年よりUnity+VR系の活動開始。2014年頃より、⼦育てで外向き活動削減。
執筆や登壇メインで活動中。
・2018年頃からJavaScriptの勉強を始めて、WebGLフレームワークのBabylon.js
を中⼼に活動中。(その過程でPWAについても学びました)
・最近はWebXRについても情報発信中
Microsoft MVP (Unity :2016/10-2018/7)
(Windows Mixed Reality :2018/7-)
Blog : Cross Road
https://www.crossroad-tech.com/
2

3. 本⽇の概要
・どうしてPWAに注⽬したか︖
・そのとき調べたPWAで困ったことと解決⽅法
・WebVRからWebXRへ
3

4. どうしてPWAに注⽬したか︖
4

5. PWAは便利︕
・No app installation
・No app store
・Offline web experience
Oculus Quest1向けに作ったBabylon.jsのコンテンツを勉強会で⾒せたくても、ネッ
トワーク接続が必須となり不便でした。
解決⽅法を探す中でPWAのことを知り、Oculus Quest1でオフライン起動をさせる⽅
法を調べることになりました。
5

6. そのとき調べたPWAの作り⽅で困ったこと
6

7. 作ったWebコンテンツをPWAにする⼿順
・httpsのサイトを準備 (たとえばGitHub PagesでOK)
・Service Worker、manifestファイルを準備
調べた時の多くのサイトでは、概ねこのように書いてありました。
7

8. 作ったWebコンテンツをPWAにする⼿順
8
試した結果です。ちゃんとアプリインストール相当の処理が表⽰されるようになりました。

9. 作ったWebコンテンツをPWAにする⼿順
9
しかし、これだけだとデバイスを機内モードにすると起動が失敗します。

10. 解決⽅法
10

11. オフライン起動を可能にする⼿順
11
ServiceWorker.jsを少し修正しました。MozillaのHPにやり⽅がありました。
[before] [after]
オフライン起動に使⽤する
ファイルを全て書き出す
fetch処理を⼊れて、ネット
ワーク接続できないときは
キャッシュから起動させる
Making PWAs work offline with Service workers - Progressive
web apps (PWAs) | MDN (mozilla.org)

12. 12
オフラインで動いた例 (2019)
動画だと⽰せてませんが、2⽇後に機内モードのままOculus Questを起動させたときも表⽰されました。

13. WebVRからWebXRへ
13

14. WebVRとは
MozillaやGoogleによって策定された規格。ブラウザでVRを体験できるようにするもの。
Three.js、Babylon.js、A-frameなどが対応。
現在は、ARも含んだWebXR Device APIに置き換わることになってWebVRの規格
⾃体は廃⽌となった。
14
WebVR (immersive-web.github.io)
WebXR Device API (immersive-web.github.io)
また、Oculusの開発者サイトでは、”WebVR is no longer supported as of
Oculus Browser 9.0.”とある。今使っているQuestのブラウザは17.2。
当時のソースコードはWebVRの規格に沿って書いていたので、VRモードが動かない。

15. 15
2019年に作ったコードそのままをQuest2で動かした例
・サイトの表⽰︓OK
・機内モードでの起動︓OK
・VRモード︓NG。⼆眼表⽰になってしまう

16. WebVRからWebXRに対応する時の、今回の主な変更箇所
16
1. 基本の関数を変更。また、async/await で呼び出し
var vrHelper =
scene.createDefaultVRExperience();
var experience = await
scene.createDefaultXRExperienceAsync({});
2. 前回同様にテレポート機能を使うため、テレポート対象のメッシュをWebXR規格に沿って指定
vrHelper.enableTeleportation({
floorMeshName: "floor_primitive1"
});
vrHelper.enableInteractions();
experience.teleportation.
addFloorMesh(floor[i]);
3. async/awaitの影響で、今回使っているmuseum.glbのimport⽅法を変更
var meshTask =
assetsManager.addMeshTask("museum", "",
"./model/", "museum.glb");
assetsManager.load();
BABYLON.SceneLoader.
ImportMeshAsync("", "./model/",
"museum.glb", scene).
then(function(result) {});
補⾜︓addMeshTaskを使うと、onFinishのコールバック関数が使える

17. 17
今回の修正版をQuest2のブラウザで動かした例
・サイトの表⽰︓OK
・機内モードでの起動︓OK
・VRモード︓OK
・VRモード中のテレポート移動︓OK
https://youtu.be/vA-4ZSTiAj4
You Tube動画のリンクです

18. ご参考︓今回の発表に関するブログやGitHubリポジトリ
18
PWAでWebXRアプリをオフラインで使うための方法 -
CrossRoad (crossroad-tech.com)
flushpot1125/bjs_pwa_example (github.com)

19. ご参考︓WebXR アドベントカレンダー 2021
19
WebXR ( WebVR/WebAR ) Advent Calendar 2021 - Adventar
ここでもWebXRについて書く予定です。よかったらぜひご覧ください。
投稿も受付中とのことです︕

20. ご清聴ありがとうございました。
Limes
flushpot1125 (Limes2018) (github.com)
Limes (@limes2018) / Twitter
https://www.crossroad-tech.com/