4

So I was exploring PWAs today and followed Your First Progressive Web App. It takes 5 mins and works on my laptop but the problem is, I can't figure out how to browse it through my phone yet. So I searched and found How can I access my localhost from my Android device? But unfortunately, the answers provided there don't work for me.

Why would that be? Does PWA require some different kind of setup? Am I going all wrong about this? Adiitionally I couldn't find any tutorials that take you to actually browsing your PWA in a mobile. Why?

Aditi
  • 1,188
  • 2
  • 16
  • 44
  • Really? what's wrong with this question? No-one can answer it and yet someone has no problem down voting it! – Aditi Mar 19 '18 at 09:35
  • Happens :) I wish people add comment when they down vote. Got your answer and up-vote anyways! – Anand Mar 19 '18 at 15:42
  • said that there is nothing wrong with your question and now you have an answer which might possibly solve your issue, don't you see there is something wrong in not responding over a week for someone who cared to answer! – Anand Mar 22 '18 at 15:16

3 Answers3

6

While the Your First Progressive Web App tutorial tells you to start a server in your localhost. So as mentioned by @Anand, you won't be able to simply access the PWA in your phone.

The most simple solution is to use ngrok. Using it will expose a public URL for your web app which you can access in any device you want.

Simply install ngrok from here and follow through. Cheers ;)

Ankit Gaurav
  • 86
  • 5
1

I had a similar problem . I installed ngrok and accessed the URL it provided from the device. It worked completely fine. Later I went through the link

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

In the settings, I enabled "discover USB devices and set up Port forwarding. Then, I was able to browse and debug the PWA ( which was running on my laptop), in the actual device. I understand if you have device next to your development machine, you can use remote devices USB debugging. If you want to show some demo from a remote place, you can use ngrok. Hope this helps!!!

VIJAY U
  • 23
  • 3
0

Accessing PWA in any device browser is same as accessing any other web site. You simply access with the URL.

Problem in your case seem to be because you are accessing it as "localhost" in your mobile device. If you are running your web app in your desktop and if your mobile is also connected to the same network, access it using its IP address. Say

https://192.168.1.1/myapp/ instead of https://localhost/myapp/. When you put localhost in any device, what it refers to is local device (your android phone in your case), which is not actually running the web app and its your laptop, which is not local, but remote for your android phone.

You can also pack your android app as a apk and side load it. Try this site.

Anand
  • 9,672
  • 4
  • 55
  • 75
  • Nope. Obviously I did not try to access my laptop as localhost in my phone. I tried using the IP, being on the same wifi, also tried connecting the laptop to my phone's hotspot but bone of it works. I also turned off the firewall to see if that was the problem. – Aditi Mar 26 '18 at 06:47
  • I access our local PWA apps in mobile browser without any issues. Both workstation and Android device connected to common WiFi(not hotspot from the same android phone) Issue should be network related i believe. You can try removing any USB connection, connect to common WiFi, make sure your web server is open to network(some web servers restrict anything other than local machine by default, test it with another PC/Laptop in the network). If it works in another PC, no reason for it to not work in your Android browser. – Anand Mar 26 '18 at 15:31