Introduction to Progressive Web Apps

  • 0 student
  • 1 lessons
  • 0 quizzes
  • 10 week duration

Building a simple PWA

  1. Make an account on Chrome Developer Tools. Then Login
  2. Chrome provides a sample PWA App called Weather App. Try it out. How?

The Weather App provides information about the weather in places round the world

Register for an API Key. If key is not available don’t worry you can still use it. It will show dummy data.



You will need to register.

Open Glitch now.

Now, we will clone our project from GIT. The GIT path is.

Select clone from GIT Repo

Press OK

The project is ready.

Files in the project

To add a file press New File button

To run the app press the Show button

Pressing the Show button provides two options. Run in new window and run next to the code.

Let us try both.

New window

Next to Code

Press the + button and select an option from the list.

Press Add

Then scroll down and find Delhi

Press the Chrome menu



Open Developer tools.

Go to the Network Tab and check the condition of the app in offline, slow 3G and fast 3G conditions



Run an audit


and check the results



Check out the PWA parts



We will add a manifest now

What is a manifest

The web app manifest is a simple JSON file that gives you, the developer, the ability to control how your app appears to the user.

Using the web app manifest, your web app can:

Tell the browser you want your app to open in a standalone window (display).
Define what page is opened when the app is first launched (start_url).
Define what the app should look like on the dock or app launcher (short_name, icons).
Create a splash screen (name, icons, colors).
Tell the browser to open the window in landscape, or portrait mode (orientation).
And plenty more.

Manifest description

Create a file by pressing new file. Then write the name of the file.


The file will be created.

Click to edit the manifest.json file and add the following code

“name”: “Weather”,
“short_name”: “Weather”,
“icons”: [{
“src”: “/images/icons/icon-128×128.png”,
“sizes”: “128×128”,
“type”: “image/png”
}, {
“src”: “/images/icons/icon-144×144.png”,
“sizes”: “144×144”,
“type”: “image/png”
}, {
“src”: “/images/icons/icon-152×152.png”,
“sizes”: “152×152”,
“type”: “image/png”
}, {
“src”: “/images/icons/icon-192×192.png”,
“sizes”: “192×192”,
“type”: “image/png”
}, {
“src”: “/images/icons/icon-256×256.png”,
“sizes”: “256×256”,
“type”: “image/png”
}, {
“src”: “/images/icons/icon-512×512.png”,
“sizes”: “512×512”,
“type”: “image/png”
“start_url”: “/index.html”,
“display”: “standalone”,
“background_color”: “#3E4EB8”,
“theme_color”: “#2F3BA2”


This contains the icons for different screen sizes. It also contains the app name and the app short name. Name and shortname are compulsory.


Check audit/application. We still do not have a manifest.

Add a reference to the manifest in the index.html file inside the head.


<!– CODELAB: Add link rel manifest –>
<link rel=”manifest” href=”/manifest.json”>



Audit/App again

Check the manifest again. It is available.


Check the SEO tab now.

We do not have a meta tag.


Add it

SEO is 100% now.

Add a theme color now

<meta name=”theme-color” content=”#2F3BA2″ />



Leave a Reply

Your email address will not be published. Required fields are marked *