The demand for using applications rises as smartphone use increases. As a result, businesses invest in responsive website design in addition to their primary focus on website development. Also called a progressive web app, this is. Thus, how can your company build a progressive web app? Now let’s explore this article!
Table of Contents
What is a Progressive Web App?
A progressive web app is an online application that uses contemporary web features to give users an experience similar to that of an app. In the end, it’s just a modified version of your typical website that operates in a browser.
In exchange for some freedom, progressive web apps allow websites to operate more like native mobile apps. Without all the hassle of app store approvals and copious amounts of platform-specific native code, you get native mobile app capability (or something very close to it). A progressive web app can be installed on a user’s home screen and used the same way as a native app.
The app, however, can only be accessed through sites that are sub-paths of the progressive web app’s initial path and is launched into a pseudo-app frame with some limitations. Moreover, they must be served via HTTPS. Therefore, let’s learn how to build a progressive web app now.
>> Learn more: Progressive web app vs Native app
How to build progressive web apps
We’ll demonstrate how to build a progressive web app or specifically is how to transform your current website into a progressive web app in this article. It’s quite easy to build a progressive web app and only really needs the following actions:
1. Markup
The HTML file is rather straightforward. The main tag is used to enclose everything.
In index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="css/style.css" />
<title>Dev'Coffee PWA</title>
</head>
<body>
<main>
<nav>
<h1>Dev'Coffee</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
</ul>
</nav>
<div class="container"></div>
</main>
<script src="js/app.js"></script>
</body>
</html>
Add a navigation bar by using the nav tag. Then, our cards that we later add with JavaScript will be contained in the div with the class .container. After clearing that out, let’s use CSS to style the page.
2. Styling
As usual, we begin by importing the necessary fonts in this instance. We’ll then perform several resets to stop the default behavior.
In css/style.css
@import url("https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #fdfdfd;
font-family: "Nunito", sans-serif;
font-size: 1rem;
}
main {
max-width: 900px;
margin: auto;
padding: 0.5rem;
text-align: center;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
ul {
list-style: none;
display: flex;
}
li {
margin-right: 1rem;
}
h1 {
color: #e74c3c;
margin-bottom: 0.5rem;
}
The primary element’s maximum width is then constrained to 900 pixels in order to make it appear appealing on a large screen. I would like the links and logo to be placed to the right and left of the navbar, respectively. Thus, we utilize justify-content for the nav tag after flexifying its container: a chasm; a line separating them.
In css/style.css
The container element will be presented as a grid because there will be multiple cards. Also, by using the grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)) function, we can now make our cards responsive so that, if there is adequate room, they employ at least 15rem of width (and 1fr if not).
Also, to make them seem good, we utilize object-fit: cover on .card—avatar to stop the picture from stretching and double the shadow effect on the .card class.
Although the situation now appears considerably improved, we still lack facts to present. In the part below, let’s correct it.
3. JavaScript data visualization
You’ll see that I used enormous, slow-loading photos. This will best demonstrate the influence of service personnel. The .container class will house our cards, as was previously stated. As a result, we must choose it.
In js/app.js
const container = document.querySelector(".container")
const coffees = [
{ name: "Perspiciatis", image: "images/coffee1.jpg" },
{ name: "Voluptatem", image: "images/coffee2.jpg" },
{ name: "Explicabo", image: "images/coffee3.jpg" },
{ name: "Rchitecto", image: "images/coffee4.jpg" },
{ name: " Beatae", image: "images/coffee5.jpg" },
{ name: " Vitae", image: "images/coffee6.jpg" },
{ name: "Inventore", image: "images/coffee7.jpg" },
{ name: "Veritatis", image: "images/coffee8.jpg" },
{ name: "Accusantium", image: "images/coffee9.jpg" },
]
In js/app.js
const showCoffees = () => {
let output = ""
coffees.forEach(
({ name, image }) =>
(output += `
<div class="card">
<img class="card--avatar" src=${image} />
<h1 class="card--title">${name}</h1>
<a class="card--link" href="#">Taste</a>
</div>
`)
)
container.innerHTML = output
}
document.addEventListener("DOMContentLoaded", showCoffees)
With the code mentioned above, we can loop through the array and display each element on the HTML file when you build a progressive web app. And in order for everything to function, we wait for the DOM (Document Object Model) content to fully load before executing the showCoffees method.
4. Build an App Manifest
A JSON file called an app manifest contains the following details:
- A shortened form of the website’s canonical name (for icons)
- The website’s color scheme for OS integration
- The website’s backdrop color for OS integration
- The URL range to which a progressive web app is restricted
- The starting URL for newly created instances of the progressive web application
- A description that can be understood by people
- Limits on orientation (Without a strict technological limit, changing this from “any” is not a good idea.)
- Any icons that could be utilized on the home screen of your website (To automatically generate icons, check the manifest generator above)
Upon installation, your progressive web app will use this data as the OS-level metadata.
Now that we are aware of what a web manifest is, let’s together build a progressive web app by creating a new file in the root directory called manifest.json (you must name it that). Then insert the following code block.
In manifest.json
{
"name": "Dev'Coffee",
"short_name": "DevCoffee",
"start_url": "index.html",
"display": "standalone",
"background_color": "#fdfdfd",
"theme_color": "#db4938",
"orientation": "portrait-primary",
"icons": [
{
"src": "/images/icons/icon-72x72.png",
"type": "image/png", "sizes": "72x72"
},
{
"src": "/images/icons/icon-96x96.png",
"type": "image/png", "sizes": "96x96"
},
{
"src": "/images/icons/icon-128x128.png",
"type": "image/png","sizes": "128x128"
},
{
"src": "/images/icons/icon-144x144.png",
"type": "image/png", "sizes": "144x144"
},
{
"src": "/images/icons/icon-152x152.png",
"type": "image/png", "sizes": "152x152"
},
{
"src": "/images/icons/icon-192x192.png",
"type": "image/png", "sizes": "192x192"
},
{
"src": "/images/icons/icon-384x384.png",
"type": "image/png", "sizes": "384x384"
},
{
"src": "/images/icons/icon-512x512.png",
"type": "image/png", "sizes": "512x512"
}
]
}
In the end, it is ultimately just a JSON file with a few required and optional properties.
- name: The name will be seen on the screen when the splash screen is launched by the browser.
- short_name: This is the name that appears next to your app shortcut on the home screen.
- start_url: This will be the page that the user sees when your app first launches.
- display: It instructs the browser on how to show the app. There are numerous modes, including
minimal-ui, fullscreen, browser, etc. Now, we conceal everything browser-related by using the solitary mode. - background_color: This color will serve as the screen’s background when the browser loads the splash screen.
- theme_color: The status bar’s background color when the app is opened will be determined by the theme color.
- orientation: It instructs the browser to display the app in a particular orientation.
- icons: The splash screen will appear as the icon when the browser runs it. To fit the selected icon on any device, I utilized all sizes here. Yet, you only need one or two. You have the choice.
Now we are already done and have a web app manifest in step 3 of how to build a progressive web app process, let’s include it in the HTML file.
In index.html (head tag)
<link rel="manifest" href="manifest.json" />
<!-- ios support -->
<link rel="apple-touch-icon" href="images/icons/icon-72x72.png" />
<link rel="apple-touch-icon" href="images/icons/icon-96x96.png" />
<link rel="apple-touch-icon" href="images/icons/icon-128x128.png" />
<link rel="apple-touch-icon" href="images/icons/icon-144x144.png" />
<link rel="apple-touch-icon" href="images/icons/icon-152x152.png" />
<link rel="apple-touch-icon" href="images/icons/icon-192x192.png" />
<link rel="apple-touch-icon" href="images/icons/icon-384x384.png" />
<link rel="apple-touch-icon" href="images/icons/icon-512x512.png" />
<meta name="apple-mobile-web-app-status-bar" content="#db4938" />
<meta name="theme-color" content="#db4938" />
We attached our manifest.json file to the head tag, as you can see. Add a few more links that manage iOS support so that the status bar is colored in accordance with our style and the icons are displayed. We can now move on to the final section of building progressive web apps and introduce the service provider.
5. Construct the Service Worker
You can set up caching of assets and pages while the user browses when service workers are combined with the fetch event of creating progressive web apps process. This speeds up loading and makes material accessible offline. Today, we’re only going to concentrate on the offline caching capabilities of service workers rather than automatic background syncing because iOS doesn’t yet allow background syncing (although things are moving in a good direction).
Take a broad look at the resources and sites you want your visitors to always have access to (even if it goes out of date). Also, these pages will be cached for any visitor to that website using a service worker-compatible browser. At the very least, we advise implicit caching of the following:
- Any CSS, JavaScript, or image files essential to your website’s functionality that your starting point fails to load
- Contact information for the entity, business, or service responsible for maintaining the progressive web application
- Any additional content or pages that you think your website’s visitors would find beneficial
6. Activate the Service Worker
To load the service worker, we just add the following to your base HTML template at the end of your <body> tag:
<script>
if (!navigator.serviceWorker.controller) {
navigator.serviceWorker.register("/sw.js").then(function(reg) {
console.log("Service worker has been registered for scope: " + reg.scope);
});
}
</script>
The service worker publishing logs should appear in your browser’s console once you apply these changes. Check out the instructions for iOS+Safari and Chrome+Android, respectively, if you’re testing this from a smartphone.
As such, now you know how to build a progressive web app after completing all of these stages. Users will automatically cache any page or asset they load for later offline access. Future development of service industry professionals will be fascinating to watch. Furthermore, by dynamically caching assets, restricting the size of your cache, and other methods, you can use service workers to their full potential when build a progressive web app.
