PWA Emulating on Device

So I am taking the plunge and going to build a PWA. That seems like a more practical way for our limited client base. Thanks to the guys that recommended https://progressier.com/. Looks like it will be ideal for us.

My questions is though when building, how are you previewing in device? Or are you simply using a web browser and making the screen as narrow as possible. This project will be mobile only.

I build/dev as any other web app, as that is what a PWA is, but then I add another testing environment once built, to deal with the very few styling items that are device specific. For example I make use of the full screen possibilities on modern devices so I use the css env variables for safe area and like to test those directly on a couple devices.

The pwa device specific testing can also be done with dev console, I just usb a device to my computer and open dev console (safari for ios and chrome for android.)

2 Likes

Thanks Ken. I am sure I will have lots of questions as I explore this new option.

Ken did you use progressier for your pwa?

When building a mobile app you will be using capacitor and then you can just click on the bottom toolbar to preview it in emulator or if you have a real device attached you can preview it there as well.

Thanks George. This won't be a native app. Been there done that won't do it again. This will be a Progressive Web App. So no need for capacitor so no access to emulator.

Yes, I have about a dozen tenants on progressier representing a few thousand end users. I launched in Q1 and everybody is very happy with it. I no longer offer the app store hybrid app and I could not be happier.

3 Likes

If you are using MAMP Pro as your development server like I am, there is a mobile app called MAMP Viewer.

Works pretty dang slick!

@brad remember you can also use Android Studio / xCode and use the emulator for download and use the PWA, like a real device and inspect anything there

Really, it doesn't have to be a native app? I gotta give that a try. Thanks!

Update: Nope doesn't work. Expects Gradle, etc to be installed.

So you can't use the emulator and open safari/chrome from there?

Won't run the project at all. Won't even let me set up. the project in Android Studio. Haven't tried xCode as I have an iPhone.

Edit: Apparently it is possible although with over an hour of trying to research and figure it out I have yet to be successful. There is a lot of hoops to jump through and will only emulate from a live server. So pretty much useless for testing purposes. Dang, it would have been great to emulate on different devices. Thanks for the suggestion.