Step 10 - Use an Android Emulator

In this step, we're going to test our PWA's behaviour on an emulated device environment.

In order to use an emulator, we have to install Android Studio first.

Download Android Studio

Navigate to Android Studio download page and download the latest version for your OS.

Install Android Studio

You need to customize the installation and select Android Virtual Device during the setup.

Configure Android Studio SDK

Launch Android Studio, click Configure toggle with the gear icon and select Preferences.

Install Android Emulator

Search for sdk in Preferences pane. And, using the search results, navigate to Appereance & Behaviour > System Settings > Android SDK menu.

Within SDK Tools pane, click the download icon next to Android Emulator to install the emulator library.

Create a Virtual Device using AVD

Launch Android Studio and launch AVD Manager from Configure toggle.

Click Create Virtual Device button on Android Virtual Device Manager.

Select a hardware

From Select Hardware panel, search for Pixel 2 and click Next to install and configure the hardware profile.

Launch the installed virtual device

Now you can see your installed hardware in the list of devices shown at AVD Manager.

Click on the Play/Launch icon in the actions column to launch the emulator.

Your emulator is now ready to use.

Enable developer mode on your virtual device

Navigate to Settings > About emulated device screen on your emulated device.

Tap on Build number at the bottom of the screen 7 times to enable developer mode :)

You can find more information about Android Developer Mode and USB debugging on the article: Enable Developer Mode and USB debugging

Inspect Chrome via USB debugging

When developer mode is enabled, USB debugging is enabled for the emulated device automatically.

You can start inspecting the Chrome tabs on your emulated device by opening DevTools on your desktop Chrome, and navigating to Remote devices panel.

Once you click Android SDK built for x86 device on the left sidebar, you'll be able to see all the chrome processes on the device.

Click on Inspect button next to the process you'd like to inspect and that's it!

To find out more about Chrome DevTools remote device debugging, visit official docs: https://developers.google.com/web/tools/chrome-devtools/remote-debugging#discover

Good to go 🎯

Now you can continue to Step 11 -> Serve a secure local server.