Introduction to Progressive Web Apps

champak
Free
  • 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?

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

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.

Next

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

 

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″ />

 

end

Leave a Reply

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