Build Progressive Web Apps (PWAs) from Scratch

Installing the App on Android

Maximiliano Firtman

Maximiliano Firtman

Independent Consultant
Build Progressive Web Apps (PWAs) from Scratch

Check out a free preview of the full Build Progressive Web Apps (PWAs) from Scratch course

The "Installing the App on Android" Lesson is part of the full, Build Progressive Web Apps (PWAs) from Scratch course featured in this preview video. Here's what you'd learn in this lesson:

Maximiliano demonstrates how to test an unpublished PWA on an Android device using port forwarding in the Chrome DevTools. Installing a PWA on the device will compile the app in Google's servers.


Transcript from the "Installing the App on Android" Lesson

>> So now we are back on Android and I wanna try my PWA here because we haven't installed PWA in Android yet. So how can we run this, if I open Chrome and type local host 5000, we may have a problem. The problem is that this is a full Linux stack, the Android, and local host is actually pointing to the Android itself.

So and this happens with an emulator, because it's a built-on machine. So without publishing this on the Internet, how can we test my PWA or our PWA directly in the Android phone? Well, we have a trick. Going back to Chrome, I will go to chrome://inspect. Here we can see that our phone, in this case my Pixel, is connected with Chrome 94.

And what I can do is enable port forwarding. Port forwarding will actually let us select a port inside the Android, such as 5000. And then IP address or host, and port on my computer. So that means, that if I try localhost 5000 on the Android phone or on the Android emulator.

If we localhost 5000 in my host computer, it doesn't need to be the same port number. So, now if I refresh, I can see this here, I can install the app from here or from the little menu that appear at the bottom. So now I can install the app, we see the icon, and I can click install.

Remember, this is going to compile an app in Google servers. In fact, that's known as a web APK Mint server. It's minting like s coin, it's minting an APK. Now we need to wait because it takes a couple of seconds. And now finally it's done, it's added to the home screen, Codepad.

So now if I go to the home screen, I have Codepad. And if I open here, I have Codepad. But it feels weird, Codepad is only available in landscape. I'm not sure if anyone remembers why. I'm trying to go portray with my phone it doesn't work. Let's go back to VS Code.

Web manifest, look at this orientation landscape, we actually asked for this. And this was not compatible with iOS. So in this case, I don't want this, so I'm going to remove this or I can keep it with any, it's the same. And now I need to reinstall the apps, so I'll need to uninstall the app.

On Android there is no way to install more than one APK from the same app. So if I try to install it again, on the menu, you can see that instead of install I have open, that will actually open the app instead of installing the app again. So I need to uninstall the app as any other app so I go to Codepad > Uninstall, okay, like that, refresh.

So we're going to try to install this again, We can see it's adding the Codepad, this is compiling this on the server. And finally, we have our app on Android that works on portrait, of course this should work such as, finish the app And if these should be saved offline as well.

So I actually my PWA is installable on Android, it has a nice icon. And even if you don't believe that, we can actually go to Settings > Apps, and our app code bar appears there with the right icon. And it even says, that it was installed from the Play Store, okay?

But we all know it's not true. But it was actually compiled by the Play Store. The web APK was compiled by the Play Store. So now our PWA Is working on Android. However, we wanna improve the installation experience. And also we wanna add some little integration with OS, so that's the next step.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now