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.
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 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.
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'm using getUserMedia() in my web app which works fine when I test my app on localhost. But if I treat my laptop as server and launch app in Google Chrome browser of my android phone, it gives me the error:
getUserMedia() no longer works on insecure origins. To use this
feature, you should consider switching your application to a secure
origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
When I checked [https://goo.gl/rStTGz][1] I got to know that getUserMedia() is deprecated on insecure origins. It is written that for development mode,
You can run chrome with the
--unsafely-treat-insecure-origin-as-secure="example.com" flag (replacing "example.com" with the origin you actually want to test)
How and where can I set this flag? Is there any other alternative?
This can be done from chrome://flags/ or about://flags.
Go to about://flags, search for unsafely-treat-insecure-origin-as-secure flag, and enable it. You will have to provide the origin which you want to be treated as secure.
Multiple origins can be entered as comma-separated values.
Relaunch your browser after making this change.
Note that the protocol part is also important, and specifying the IP address, or the domain name isn't enough. eg. http:// in http://192.168.43.45. If you are not using port 80, then you may have to specify that too.
The following is a screenshot from my mobile phone.
Mobile: Samsung Galaxy S10e
Android version: 10 (Android 10)
Google Chrome version: 79.0.3945.136
For local testing of a website I am building, geolocation was needed.
Geolocation is allowed in secure locations. I do have a production server with HTTPS certificate, but the development and the debugging process would become too slow if I have to upload content to it every time.
More info
https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features
Move localhost to the device
One method is to run an HTTP server on your Android device. The consensus in answers to this question is that NanoHTTPD is worth trying. If you want a ready-made application, a web search for http server for android turned up Simple HTTP Server on Google Play Store. After copying the client side of your web application to the device and starting the server, you should be able to open http://localhost:12345 in Chrome for Android.
Or make your test server secure
You can test secure-context-only features without using --unsafely-treat-insecure-origin-as-secure by turning your existing test server into a potentially trustworthy origin. Follow these steps:
If you do not already own a domain at a registrar that bundles DNS hosting compatible with the dehydrated ACME client, register one. This incurs a fee, which recurs as long as you keep the domain active.
Point a subdomain at your test web server's internal IP address. It need not be reachable from the Internet.
Configure your test web server to respond to HTTPS on port 443 of this subdomain, using NameVirtualHost or the like.
Use the dehydrated ACME client with the appropriate dns-01 hook for your DNS host to obtain a certificate from Let's Encrypt for your test web server.
Install this certificate into your test web server.
I faced with this problem too, but in Chromium, Ubuntu. I solved the problem with running this command in console:
chromium-browser --unsafely-treat-insecure-origin-as-secure="http://localhost.dev:3000" --user-data-dir=~/.config/chromium/Profile 1
where localhost.dev:3000 is your website.
For other systems information there:
where is data directory
how to launch chrome and set keys
Short information about --unsafely-treat-insecure-origin-as-secure flag:
Treat given (insecure) origins as secure origins. Multiple origins can
be supplied. Has no effect unless --user-data-dir is also supplied.
Example:
--unsafely-treat-insecure-origin-as-secure=http://a.test,http://b.test --user-data-dir=/test/only/profile/dir
I didn't check, but for android you maybe can also set flags on chrome://flags page.
I have setup with VS2012, running an ASP.net web service which talks to an SQL database. I also have an android app being developed (using Cordova, so using javascript) which talks to this web service via ajax.
Everything works fine when I run the javascript on a desktop browser, and most most calls to the web service work fine between the app (loaded onto a phone) and the production server (when I upload the server files there). But there is one service call that doesn't work, and it depends data from Cordova plugins so I have to debug it using the phone and I need to see what's happening at the server end in VS2012 instead of on the production server. I have installed Chrome Dev Tools, and set up port forwarding as described here but can't make the connection; every json call results in "net::ERR_CONNECTION_REFUSED" in the Chrome console. I have tried turning off the firewall on the PC (Windows 7) but no effect.
This must be a common requirement and it seems from the Chrome Dev page that it is all straightforward so what am I doing wrong?