- 0 student
- 1 lessons
- 0 quizzes
- 10 week duration
-
Introduction
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
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.
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
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
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.
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