In this tutorial we shall develop a PWA (Progressive Web App) withing short time. We will try to keep this tutorial shorter, clear and will focus only on the basic building blocks PWA.

Also, You can follow the attached links for the details.

Details about PWA will be found here .

Technologies

For this tutorial I’ve used following tools and technologies :

Ubuntu 18.04 (also it will for in Windows or Mac) Node (v8.10.0) npm (3.5.2) ngrok Lighthouse Google Chrome VS Code (as IDE)

Project Creation

We shall create our PWA project using create-react-app .

Installation of create-react-app :

npm install -g create-react-app

Let’s create our project

create-react-app my-awesome-site

Running application

Let’s run our application :

Run the following commands in your terminal/command prompt :

cd my-awesome-site

npm start

Navigate to http://localhost:3000/ and see our awesome site!

Check current situation of our project

To audit our site we can use Lighthouse . Lighthouse is an open source tool for testing applications against various criteria (including the PWA checklist) .

After adding Lighthouse to Google Chrome browser (from chrome store) click the Lighthouse icon from the top right corner in Chrome and then click on the “Generate Report” button. Mostly the generated report will look like this:

As you see, our site is not PWA at this moment.

Developing PWA

To convert our application to PWA we need to complete this important steps .

But luckily, React does most of them for us.

Go to src/servicewWorker.js and see that react completed most of the tasks for us in advance!

Then go to src/index.js :

Look at line 12, we need to register our service worker here. Change that line into serviceWorker.register() .

Now, navigate to public/manifest.json file. To achieve PWA title (at least) we need to complete the following tasks:

Set short_name , name of our application

, of our application Add at least one 192x192 icon, and one 512x512 image (for splash screen).

Here I’ve created two images of size 192x192 and 515x512. And placed them inside public folder. This is my manifest.json :

Achieving https

To get facilities of PWA we need to serve our application using https . We can use ngrok for this purpose. Ngrok is a multi-platform tunneling and reverse proxy software that establishes secure tunnels from a public endpoint to a locally running network service.

Create minified build folder

To create minified build folder run npm run build command in our project folder.

Serving our Awesome PWA

Serve minified project (build folder) : serve -s build

Create a tunnel through ngrok at port 5000 (I’ve already downloaded ngrok from here)

command : ngrok http 5000 (for my case it was : ./ngrok http 5000 )

NOTE : I strongly suggest creating an account for ngrok and connecting the authentication credential to you local copy of ngok. You will get details here .

Now navigate to https://3cfb5a53.ngrok.io (Notice, I’m using the https one.)

Note : your generated link can be different.

Testing Awesome Site

Navigate to https://3cfb5a53.ngrok.io from you phone (For Android use chrome and for ios use Safari browser).

You’ll get an installation prompt at the bottom of your screen (I’m using Android) :

Installation prompt

Tapping on the the banner you’ll face the permission prompt :

Permission prompt

If you tap on “ADD” then the website will be installed as an application in your phone! Great, NO?

This is the icon in my phone (Please notice : I’m not a great designer till now ! :P ) :

icon

This is splash screen :

Splash Screen

And this is our mobile application!

App home screen

Also, if you navigate this site from your computer (I’m using ubuntu and google chrome browser) you’ll get an option to install this site to your device :

Install option

Permission prompt :

Permission prompt

Installed application :

Searching the application from my all applications

Running application :

Our native homescreen

Analyzing our PWA using Lighthouse is up to you now!

Project Link

All code of this project will be found here :

Conclusion

This is a step by step brief description of developing a basic Progressive web application. I prefer reading the details from the corresponding documentation.

You can also read :