I am currently trying to develop a PWA, however, I can't work out how to get it hosted over the local network? It works fine when connecting to localhost from the host machine but will not connect from any other devices on the local network. I believe it might be to do with the fact that the PWA is served over HTTPS and I have tried setting up Open SSL but I'm not too sure whether this is actually the correct idea to get it served over the local network? Thanks in advance.
I mostly use two options:
a) Chrome Remote Debugging + Port Forwarding: This will allow you to port forward your website to your mobile device
b) Netlify Dev: This will give you a temporary URL with https you can use to access from mobile device
Related
How can I allow my application to access mobile camera when trying to access http://ip-address:8080 from my mobile phone.
Side note: It works fine when I run it on my computer where application is running.
Try to run it on server. Because your browser can block some operations on localhost to make your privacy better.
I deployed this on heroku server and it responded properly
The getUserMedia() is only allow on secure (https) connections or localhost.
This is why it does work on your pc in localhost.
If you want to access your application by the ip on your phone you must enable https on your application to use your camera/microphone.
Many modern Web APIs are gated by the browser to be HTTPS only. This is good for users but can make developing painful. During development I'd like to be able to turn off that requirement just for testing.
Is there a flag I can set (about:config in firefox, about:flags in chrome) or a command line parameter I can pass in to turn off that requirement so I can test without having to setup https certs and add them to the browser?
Note: I understand the https requirement is dropped for localhost but I'm often hosting on one machine (like a laptop) and testing on another (like an Android device) or a different desktop. I know I can generate a local cert and run a server that supports https. I then have to deal with security warnings on the browsers (invalid cert) and/or add the private certs to all the devices OR I have to register a domain solely for the purpose of getting a valid cert via letsencrypt. For my own dev I'd just like to temporarily turn off that check in the browser if possible. Of course what I actually serve to users will be https but during dev if I could turn off that requirement things would be so much easier.
In my particular case I'm trying to use WebXR so dev happens on my laptop but actual testing happens on an Android device where the page is served from my laptop.
One solution suggested here is to use Chrome's port forwarding
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server
That works for Chrome desktop to Android
On your desktop you tell desktop chrome what site at what port to forward to your android device at another port. That site can be a server on the internet or a server running locally on your desktop. On the android device you can then access that site at http://localhost:<port-you-specified>. https requirements are dropped for locahost host so you can now use the APIs that were restricted otherwise.
Chrome has a developer setting Insecure origins treated as secure in chrome://flags/, this is a text field where you can add a list of origins treated as secure for development purposes. (Via https://github.com/immersive-web/webxr/issues/60)
I am developing a web app, that needs to run on android mobile device's browser and, communicate with a mobile app which is installed on that device.
The web app need to communicate through ajax calls to localhost (to the android mobile device) to retrieve data from the mobile app.
So far I tried fetching from: http://localhost, http://127.0.0.1, http://10.0.2.2 and none of them worked.
I succeeded only by getting the device IP using webRTC and fetching from this IP.
Is there another way to do this?
If I understand correctly you are trying to inspect development on your android device, you need to use Google Chrome, just open localhost on your mobile device and connect via usb to your computer, then use the remote device tool.
Follow the tool link: https://developers.google.com/web/tools/chrome-devtools/remote-debugging
If you're on the same network you can use your internal IP address. If you're using windows you can use ipconfig and if you're a MAC user you can use ifconfig.
After you found your internal IP address append the port number that your server is running on internalipaddress:port and start making requests there.
This question is about the basic feasibility of this project but you are welcome to recommend ideas on how it could be done. I would like to create a hosted Java web application that creates a Server in the local network of the device.
For example: You can go to example.com in your Browser and start the application that creates a server in the local network of the device (Windows-PC). Other devices (Android) can connect to the server (UDP) with an installed Android-App.
Is this concept possible? I am afraid browser security renders this level of access impossible..
As others have pointed out it is not possible.
I will instead choose a local Java application that has to be installed.
I'm trying to test out Google's PaymentRequest api on a local website running in my android emulator. However, when I do
var paymentRequest = window.PaymentRequest(//some object here//);
I get the following error
"Error: Failed to construct 'PaymentRequest': Must be in a secure context
Now, PaymentRequest DOES run on localhost and https, but running it from a port on an android emulator, where the uri is 10.2.2.01:8000/myUrlHere will fail becuase that's not localhost. Any ideas as to how to get around this?
PaymentRequest must be used on secure context, which is one of:
HTTPS.
Localhost.
Local file on disk.
http:// 10.2.2.01:8000 is not a secure context, so you can't use PaymentRequest there. Try one of the following:
https: //10.2.2.01:8000. (The SSL certificate must be valid. This means the lock icon in the URL bar should be green. You can get one from https://letsencrypt.org/, for example.)
https: //localhost:8000.
file:///sdcard/index.html
If you own an Android device, there's a way to test your site by connecting the device via USB cable and serve from localhost. Try this:
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
If you don't, you may want to try this tool with the emulator:
https://ngrok.com/
ngrok allows you to serve from localhost proxying from ***.ngrok.com domain.