I am able to test serviceworkers over http with localhost but I would like to testg on a mobile browser. Because it is a separate device I cannot use localhost so I use the name of the PC. So now I need to use https, which is causing SSL related errors in my service worker:
Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope ('https://xxx:5500/app/') with script ('https://xxx:5500/app/service_worker.js'): An SSL certificate error occurred when fetching the script.
I have properly configured liveServer to use self-signed certs and I've successfully enabled "edge://flags/#unsafely-treat-insecure-origin-as-secure" but it is not enough.
I'm also concerned about how to test PWA on the mobile device as I presume I cannot make use of the "unsafely" feature on mobile. I assume this is a common scenario but I am not finding any answers.
You can test your PWA on mobile via chrome developer tools:
the method called remote debugging (works only for android)
open developer tools in mobile - allow usb debugging
connect via usb to laptop or pc
go to chrome dev tools open remote devices
set port forwarding in remote device
run local host in mobile chrome browser.
for detailed info follow : https://developers.google.com/web/tools/chrome-devtools/remote-debugging
this provides localhost in a mobile devices so no need for https or ssl.
I think this is the best way to test your PWA, I have personally used it.
Another working solution than is to use ngrok which will create a live https-server for the project you want (and then you'll be able to access it on your mobile device)
A very simple solution is to install Termux on your Android phone, then use socat to port-forward from a local port to your development host:
socat tcp-l:8000,fork,reuseaddr tcp:192.168.1.170:8000
This will run in the background while the terminal is open. Then in Chrome you can connect over plain HTTP to http://127.0.0.1:8000 and you should get the "Add x to Home screen" notice.
Works great over the local network and no certs, apps or services needed.
Related
Having a hard time debugging from mobile device my local development web app which connects to a GraphQL node server and another service using web sockets. All three services running on HTTPS to the below ports.
Web Reactjs app: https://localhost:3335
Node server: https://localhost:3334
Web socket server: wss://localhost:4443
From my macOS machine, everything works as expected but when trying to access the reactjs from Chrome Android and using the inspect desktop devtools and USB cable navigating to https://localhost:3335 works but I get the error POST https://localhost:3334/dev/graphql net::ERR_CERT_DATE_INVALID.
My iOS device doesn't even connect to localhost:3335 or 192.168.2.3:3335.
I am open to any tips, tricks, services, and ideas to debug using my local development machine and mobile devices.
I was able to make it work by navigating to all addresses in the mobile browser and accept the risk of a self-signed certificate.
https://localhost:3334/dev/grapqhl -> accept
https://localhost:4443 -> accept
Now https://localhost:3335 will work fine.
Struggling with iPhone debugging due to localhost not binding to the machine IP address (Pending solution, might create another SO question for reference).
I am developing an app for android (with react-native) which is running in android studio emulator. This app should connect to a server, but I am in the testing phase and I run the server in a localhost port. but the localhost of another machine (which is in the same network that I am)
let's say the (local) IP of the other machine is 172.17.240.223 and the port which the server is running on is 8080
when I type 172.17.240.223:8080 in my browser (laptop browser), I get the response and there is no problem. Even when I type this in my browser in the emulator I get the response, but this won't happen in app. why is that?
More generally, it's not possible to customize the URL and how the bundle gets loaded. This flexibility is useful to have.
check issue on github here
in this case ,you can use testflight for IOS testing and for android just create apk.
I have a Chromebook that I've set up in Developer Mode, with a crouton-installed version of Linux running alongside. Within the Linux crouton, I'm running a simple web server.
My question is whether it's possible to access that server using any Android apps that are also running on that Chromebook?
Android apps have been installable natively on ChromeOS for some time, but everything that I've read says that they run in some kind of sandbox. ChromeOS itself is pretty tight with its firewall rules as well.
Just to get a start, I'm trying to use the Android version of the Chrome browser to load up a page that's running on a web server in the Linux crouton. I've tried localhost,127.0.0.1, and the Chromebook's current IP address.
I followed the instructions at https://developer.android.com/topic/arc/index.html to enable Developer Mode on the Android side and also, I think, loosen up those firewall rules on the ChromeOS side.
Is there some secret sauce that I'm missing? Is this even possible at all?
I had the exact same question and found this:
https://developer.android.com/topic/arc/index.html#network
It seems that in essence there is no IP traffic allowed from local Chrome to the Android web servers..
Update (thanks jlb for the ping)
However, you can run ifconfig in crouton. And then you can access your content via that IP address. I wonder if Firefox takes that shortcut for you..
Leveraging #tomdemuyt's post, his citation source says that android apps will be assigned a private IP address, so you can access local IP traffic, just not with localhost or 127.0.0.1.
For example, from termux execute ifconfig and look for the local IP address. Then run your service, e.g. node from termux, or kWs, any Android app.... and point Chrome to http://<your-local-ip-address>:<your-service-port>
127.0.0.1 and localhost will work from other Android apps, just not Chrome.
The solutions by jlb and tomdemuyt are for accessing a android app from chromeos (i.e. an ftp server)
However, I needed the opposite way (accessing an node server running in the linux virtual environment from android chrome browser) and that was basically the question ChillyPenguin asked for.
I finally solved it:
Start your webserver and ensure that you can access it with localhost (in my case http://localhost:8080
Within the chromeos terminal run
hostname -I
100.115.92.203 (and an ip:v6:adress:...)
(or ip addr show which is more verbose)
Now I was able to access the web server from android chrome with http://100.115.92.203:8080
I was trying to debug a service worker served from my dev machine and running inside chrome android on the smartphone.
I was using the usb connection and remotely debugging from my dev machine. The service worker works only in https and I can live with that, both chrome and firefox where refusing to register the SW.
Then I used a self signed certificate on my dev machine, which obviously was not trusted by the mobile browsers. They warned the certificate was not good but gave the option to proceed with that certificate. I clicked yes and, while firefox from that point was able to register the SW chrome was still compaining that the certificate was not good and refused to register the SW.
I tried to include the self signed CA in the smartphone trust list but didn't find a way to do that. In the end I had to serve the app from a production server with a regular certificate, which I didn't like at all, but I could not waste a whole day on this issue.
How is it possible to remote debug a service worker on android served from a dev machine in a LAN? localhost cannot be used because they are 2 separate devices. I found a setting to ignore the https waring for chrome but desktop version, I am using android chrome, how can I disable this boring blocking error?
Thanks
I was also facing same issue. I have written service worker for push notification for my personal use. It was running perfectly on my desktop browser as I was running it on localhost. But I wanted notification on mobile so I tried many options to accomplish same, Running remote IP as localhost on mobile, USB debugging, adding ssl certificates and many other hacks but nothing worked for me. But then "Kick Web Server" app for android mobile came to my rescue, It took only few minute to run my application on mobile browser with localhost and register service worker. So no need of SSL and USB debugging any more.
Steps
Goto playstore and search for "Kick Web Server" app (Note: after serching results will show "Web Server PHPMyAdmin/MySql" with icon like this).
Do not afraid you do not need PHP or Mysql with this app, you can run your web site with ease written in any technology stack.
Open app it will ask you for permission to access storage, you have to grant permission to it.
Get back to app and click on stopped button to start web server.
It will create directory/folder named htdocs in your mobile storage.
Delete existing content(two existing files) from htdocs directory.
Copy content of your build with index.html in htdocs directory.
Visit http://localhost:8080 in your mobile browser and you will see your site is up and running with service worker registered.
I'm trying to develop my first REST Service using ASP.NET following this guide.
I'd like to test my services in localhost using my android and wp devices without using android and WP simulator (too slow).
Is there a way to do that?
If you deploy the ASP.NET app on IIS, the services will be reachable as long as the phones are connected on the same network (via Wifi for example). Just use the IP adress of the server instead of localhost.
Another idea is to use fiddler's proxy option. (This also assumes you have set up your app in IIS). Check out this article.
This approach is especially useful if you want to test using custom host headers over SSL.
With this approach you can simulate production dns (by altering hosts file on the fiddler host) rather than using IP addresses and machine names from the mobile device.