Progressive Web Applications (PWAs) are web applications (duh!) that use emerging web APIs and modern technologies to make the web app behave similar to a native application on any platform / operating system. They can be installed on your phone or PC, and even be distributed through App Stores.
I will link some articles related to PWAs at the end.
The capability to be installed on a mobile device is very important for a PWA, and to test those mobile-specific features even more important. PWAs can only be served over Secure Contexts (HTTPS). It isn't a big deal today due to services like Let's Encrypt, which provide free SSL Certificates. The HTTPS restriction isn't a problem but makes testing the PWA difficult. Most browsers treat localhost as a Secure Context, and testing PWA on your own machine isn't a problem. The problem arises when you access your web app from your phone (over local network), and it won't work because usually, you won't have an SSL Certificate for debugging on your own machine. One of the solutions to this problem is to get an SSL certificate, but it can be a complicated process for those not having experience with such stuff.
In this blog post, I will explain two methods which will help you test your PWAs on your phone.
Host a site on your machine, access the content from an Android Device (over Android Debugging Bridge). By using Port Forwarding, the browser on your mobile will be able to access the site on its own localhost, thus in a Secure Context.
Most of the tutorials on internet use Wired ADB, which discourages many people from using this method. I will be using Wireless ADB, which isn't very difficult to setup.
- Go to your Phone Settings > System > Developer Options (This might vary in different phones, so if it is not the same in your's, look it up on the internet)
- Turn on Android Debugging and ADB over Network.
- Note the IP Address and Port shown under ADB over Network
- Install ADB on your computer
- Go to your command-line / command prompt and enter
adb connect <ip-address>:<port>(Use the IP Address and Port from Step 3)
- When connecting for the first time, you will need to authorize the connection on your phone.
- Your device should be connected to your PC over WiFi.
- Make sure your development server is running on your PC
- Go to
chrome://inspect/#devices. You should see your device along with a Connected status indicator
- Enable Port Forwarding
- Click Add Rule
- In the Device Port, enter the port number on which you want to access the site on your device
- In the Local Address field, enter the address and port of your development server. (e.g, localhost:1313)
- Click Add
Port Forwarding should be setup and you will be able to access your server on your Android Device on localhost:port (which you set in Step 5.)
- Faster Deployment and Testing
- Already using ADB and Chrome, which will also be used if you want to use the Dev Tools on your mobile device
- Can only be used for Android Devices
- The devices need to be on the same network
Netlify Dev is part of the netlify-cli, and is a great choice if you are already using netlify-cli, or need to showcase your work live without deploying it to production. Netlify Dev also allows you to use many features from the Netlify Ecosystem like Netlify Functions, Custom Headers, etc.
First of all, you will need to setup netlify-cli and authorize it. You will need an account on Netlify for it.
- Install netlify-cli
npm install netlify-cli -g
Authorize it in the browser window that opens.
Setup your repository using
a. Automated Setup (if your repository is on Github)
b. Manual (for other Git Providers, or if you wise to do it like this)
netlify init --manual
You can do a lot of stuff with this cli, but I will skip directly to Netlify Dev
To start a Netlify Dev server, you can use
netlify dev, but since we want to Start a Public Live Session, we will use
netlify dev --live
You will get a URL that looks like
https://clever-cray-2aa156-6639f3.netlify.live/. This URL will be accessible by everyone on internet.
netlify-cli has many more features you should read about in the documentation.
Now that you can access the PWA on your mobile, you need to find a way to test it properly. The Dev Tools available in PC Browsers help in debugging and testing, but unfortunately, I have yet to find a similar feature on phone. Fortunately, Chrome provides a solution by allowing us access to the Dev Tools for a page on mobile devices using ADB.
- Setup ADB, as shown in the Chrome Port Forwarding
chrome://inspect/#devices, you will see a list of all pages opened on your mobile device.
- Click on the inspect button to launch the Dev Tools for that page
- Progressive Web Apps -Mozilla
- Netlify Dev
- Access Local Servers - Google Tools for Web Developers
- Remote Debugging WebView