Mobile devices now account for over half of the web's traffic. This has led mobile apps to become a staple of usability and as such enforced the need for web applications to provide a native and traditional experience. There comes Progressive Web Apps (PWAs)!
PWAs enable you to provide a mobile-app-like experience to users by implementing modern web technologies. This leads to a superior experience where your website or web app behaves like a mobile app but still runs in the browser under the hood. PWAs give you the ability to install your website on a mobile home screen, access your web app when offline, get push notifications and more.
In this article, I’ll show you how to build a progressive web application. So, let’s get right into it.
Prerequisites
I understand you're excited about this but before you begin this tutorial, you'll need the following:
- A web application or website (local or deployed)
- Good knowledge of javascript
Setup
In this tutorial, we're going to work with a basic HTML page with simple markup. Create a file named index.html and paste the code snippet below into it.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Dev Sprite PWA</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script src="client.js"></script>
</head>
<body>
<div class="toolbar" role="banner">
<span>You are currently ONLINE</span>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
stroke="black"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M2 12H22"
stroke="black"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M12 2C14.5013 4.73835 15.9228 8.29203 16 12C15.9228 15.708 14.5013 19.2616 12 22C9.49872 19.2616 8.07725 15.708 8 12C8.07725 8.29203 9.49872 4.73835 12 2V2Z"
stroke="black"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</div>
<div class="online-content">
<p>This is our website homepage.</p>
<a href="about.html">About</a>
</div>
</body>
</html>
Styling
We'll also need the styling to make our page look good. To do this, create a file named style.css and paste the code snippet below into it.
:host {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
color: #333;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.online-content {
margin: 50px;
padding: 15px;
border: 1px solid #333;
}
.online-content a {
margin-top: 10px;
}
p {
margin: 0;
}
.toolbar {
height: 60px;
display: flex;
align-items: center;
background-color: #1976d2;
color: white;
font-weight: 600;
}
.toolbar span {
margin: 0 30px 0 50px;
}
.toolbar.offline {
background-color: #ff6969;
}
.content {
display: flex;
margin: 82px auto 32px;
padding: 0 16px;
max-width: 960px;
flex-direction: column;
align-items: center;
}
Create Web App Manifest
The web app manifest is a JSON file we will create at the root of our application that provides metadata to instruct the browser about how our PWA gets rendered on the end user's device.
Register Web App Manifest
The manifest file is generally stored in the root of our application, so we can name it anything.webmanifest or anything.json and serve it with the media type of application/manifest+json. To register the web app manifest we use the <link> tag in the
<head>
<link rel="manifest" href="/manifest.webmanifest">
</head>
In case some properties in the file are not set correctly, the user agent will fall back to the document metadata.
The request for the manifest is made without any credentials (even if it is on the same domain). Therefore, if the manifest requires credentials, we have to add the attribute crossorigin="use-credentials"
In our manifest.json
<head>
<link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials">
</head>
{
"name": "Dev'Sprite",
"short_name": "DevSprite",
"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"
}
]
}
This manifest.json file contains some properties (mandatory and optional) that we'll be breaking down.
- name: The name displayed on the splash screen when the browser is launched.
- short_name: The name displayed underneath your app icon or shortcut
- start_url: The first page displayed when your app is opened
- display: This tells the browser how to display the app. Different modes like
minimal-ui,fullscreen,standaloneand more. In this tutorial, our display mode will be thestandalonemode - background_color: This tells the browser the background color of the splash screen
- theme_color: This will be the background color of the status bar when we open the app.
- orientation: This tells the browser the orientation of the app. Could be
portraitorlandscape - icons: This will tell the browser what icon to display on the app splash screen.
Now that we have the web app manifest, we can now add it to the HTML file
<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" />
Conclusion
This article covers the first step you need to carry out when creating a progressive web application. But there’s more you need to do to make it fully functional. I will cover the next steps in my next article so stay tuned for it. In the mean time, check out this article by Christine Dodrill to learn more about PWAs.
Top comments (0)