Introduction to Progressive Web Apps → Building a simple PWA

Teacher

champak

Introduction to Progressive Web Apps

Building a simple PWA

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

https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0

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

Goto https://glitch.com.

You will need to register.

Open Glitch now.

Now, we will clone our project from GIT. The GIT path is.
https://github.com/googlecodelabs/your-first-pwapp.git

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.

public/manifest.json

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”
}