How to test local server on Mozilla WebXR Viewer on iOS

🌵 Needle Engine
1

When using the local server ip address in Mozilla WebXR Viewer on iOS, the screen is always blank as it can’t seem to show the ‘secure website’ popup that Chrome usually shows when you first access a local build.

I may have asked about this ages ago but I’m not sure how to get around that on iOS to actually see the webpage… is there any way to get past that warning popup when Mozilla WebXR Viewer on iOS glitches out trying to show it?

Original Post on Discord

by user 103054507105067008

2

We’ve seen this as well, but the workaround was always force-killing the WebXR Viewer browser and starting it again

3

When you open it again it will show the security warning as usual.

4

That’s the trick, I’ll make note this time

by user 103054507105067008

5

Would be great if you mark this post as answered if that worked for you :slightly_smiling_face:

6

I can’t see where to do that on Discord mobile :sweat_smile:

by user 103054507105067008

7

No prob, just did it if you say it’s answered, just wasn’t sure if it worked for you this way :slightly_smiling_face:

8

In the #needle-engine-questions list hold down on the post for a second, a menu pops up to edit (at least for me here^^)

9

I’ll triple check on monday with another export I had this issue on to just verify but should be okay thanks for the help :raised_hands:

by user 103054507105067008

10

The close/reopen Mozilla WebXR Viewer doesn’t seem to fix it on iPhone 6, trying out mkcert plugin that Marcel recommended, it is installed but I can’t seem to get rootCA.pem file in the folder printed by mkcert -CAROOT.
I get the error The term 'mkcert' is not recognized as a name of a cmdlet so continuing to figure out why

by user 103054507105067008

11

https://www.npmjs.com/package/vite-plugin-mkcert

by user 103054507105067008

12

You can also go the regular way on creating a cert with OpenSSL or others, doesn’t need to be throught that mkcert package

13

As soon as you have the files it should be as easy as this:

export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync('./.cert/key.pem'),
      cert: fs.readFileSync('./.cert/cert.pem'),
    },
  },

Haven’t found a great flow to do that automatically yet but it’s planned as you know :slightly_smiling_face:

14

We found a nice plugin for vite I sent Rob - but it’s not part of the default template because it behaves differently on OSX (requires terminal input which we dont support right now from Unity)

15

On Wednesday I’ll be giving the plugin @Marcel_Wiessler1 :cactus: sent me another try, there seems to be something not working with it after following the setup instructions on Windows. It’s definitely installed but VS Code terminal doesn’t seem to find mkcert as a cmdlet to run a command to get the .pem file to send to test phones

by user 103054507105067008

16

wait
webxr on iOS works?

i tried using Mozilla webxr viewer today for threejs example scenes and it said it doesn’t support it

last update was ages ago so i assumed it doesn’t work anymore

by user 389432819056771072

17

We made sure it does work for three - there were a few issues were WebXR viewer deviated from the spec

Should generally work for the sample scenes too; which one didn’t work?

18

ar cones

by user 389432819056771072

19

Okay so to use mkcert properly, the instructions on the Vite plugin do not specify that you need to navigate to C:\Users\###USERNAME###\.vite-plugin-mkcert and run mkcert -CAROOT in a terminal there :roll_eyes:

by user 103054507105067008

20

Which should then give you a path the the certificate for mobile at somewhere like C:\Users\###USERNAME###\AppData\Local\mkcert

by user 103054507105067008