Imagine you love using apps on your phone because they’re fast, easy to access, and work even if you lose internet for a while. But then there are websites that sometimes feel slow, clunky, and don’t work without a connection. What if you could have the best of both worlds? That’s where Progressive Web Apps (PWAs) come in.
A PWA is basically a website that behaves like a mobile app. It's still a website, but it feels faster, can work offline, and even lets you install it on your phone like an app. No need to go through an app store—just open the website, and if it's a PWA, you can save it to your home screen.
Why Should You Care?
Let’s say you’re using a restaurant's website to place an order. Normally, you’d need a good internet connection, and you’d have to wait for pages to load. But with a PWA, the site could load instantly because it’s been cached on your phone. Even if your connection is slow or drops for a bit, you can still browse and use the site!
Alright, let's dive into building a basic Progressive Web App (PWA) from the ground up.
- Building Blocks of PWAs: Essential Tools and Technologies
- Creating Your Installable Web App
- Ensuring Your PWA Works, Even When Offline
- How to analyze web performance, accessibility, SEO, etc.
- Tips for Boosting App Performance and User Experience
Most of us might have come across PWAs without knowing it . Common examples of some PWAs are Pinterest and Google Map
Websites that displays a computer icon with a downward arrow indicates the site is a PWA, allowing installation for offline access and native app functionality.
Building Blocks of PWAs: Essential Tools and Technologies
To get started with a PWA, you don’t need a fancy toolkit or complex setup—just a few things:
HTML: The structure of your website.
CSS: To make your website look good.
JavaScript: To add interactivity and offline features.
Service Worker: A script that runs in the background, helping with offline functionality.
Manifest File: This is what makes your web app installable.
Creating Your Installable Web App
A PWA lets users install your website on their home screen, so it feels just like an app. The trick? We need to add something called a Web App Manifest.
Step-by-Step Example:
Start with a Basic HTML Page:
This is our website's structure: (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f5a623">
<title>Burger Hut</title>
<link rel="stylesheet" href="style.css">
<link rel="manifest" href="manifest.json"/>
<link rel="apple-touch-icon" href="images/iconlogo192.png">
</head>
<body>
<header>
<div class="logo">
<img src="images/iconlogo.png" alt="">
</div>
<nav>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#order">Order</a></li>
<li><a href="#locations">Locations</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<a href="#order" class="cta-button">Order Online</a>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<h1>The Juiciest Burgers in Town!</h1>
<p>Crafted with fresh ingredients, served with love.</p>
<div class="hero-buttons">
<a href="#order" class="btn-primary">Order Now</a>
<a href="#menu" class="btn-secondary">See Menu</a>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
Create a Manifest File (manifest.json): This file gives your PWA its metadata like name, icon, and more:
{
"name" : "Burger Hut App",
"short_name" : "Burger Hut",
"start_url" : "./",
"background_color" : "black",
"theme_color" : "#f5a623",
"display" : "standalone",
"icons" : [
{
"src" : "images/iconlogo192.png",
"sizes" : "192x192",
"type" : "image/png"
},
{
"src" : "images/iconlogo512.png",
"sizes" : "512x512",
"type" : "image/png"
}
]
}
CSS Styles (styles.css): Now let’s add some simple CSS to give our app a clean and professional look.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Global styles */
body {
font-family: 'Arial', sans-serif;
background-color: #0a0a0a;
color: #f4f4f4;
margin: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #0a0a0a;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.logo img {
height: 80px;
}
nav {
flex-grow: 1;
margin-left: 50px;
}
.nav-links {
display: flex;
list-style: none;
justify-content: space-evenly;
}
.nav-links li {
margin-left: 20px;
}
.nav-links a {
text-decoration: none;
color: #f4f4f4;
font-size: 18px;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: #f5a623;
}
.cta-button {
padding: 10px 20px;
background-color: #f5a623;
color: #181818;
text-decoration: none;
border-radius: 25px;
font-weight: bold;
transition: background-color 0.3s ease;
}
.cta-button:hover {
background-color: #ffbf47;
}
/* Hero Section */
.hero {
height: 100vh;
background: url('images/hero-background1.jpg') no-repeat center center/cover;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 45px;
/*text-align: center;*/
}
.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6); /* Dark overlay */
}
.hero-content {
max-width: 650px;
position: relative;
z-index: 1;
color: #f4f4f4;
}
.hero h1 {
font-size: 50px;
font-weight: bold;
color: #f5a623;
text-transform: uppercase;
letter-spacing: 2px;
}
.hero p {
font-size: 20px;
margin: 20px 0;
color: #f4f4f4;
}
.hero-buttons {
margin-top: 30px;
}
.hero-buttons a {
padding: 15px 30px;
margin: 0 10px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
transition: background-color 0.3s ease;
}
/* Primary button */
.btn-primary {
background-color: #f5a623;
color: #181818;
}
.btn-primary:hover {
background-color: #ffbf47;
}
/* Secondary button */
.btn-secondary {
background-color: transparent;
border: 2px solid #f5a623;
color: #f5a623;
}
.btn-secondary:hover {
background-color: #f5a623;
color: #181818;
}
Ensuring Your PWA Works, Even When Offline
How to Implement Offline Functionality in PWAs**
Now, let’s make sure our app works even if the user is offline. We’ll add a Service Worker. It’s a little JavaScript file that tells the browser to cache assets (HTML, CSS, JS, etc.), so when there’s no internet, the site still loads.
Service Worker:
JavaScript for Registering the Service Worker (script.js):
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("sw.js").then(registration => {
console.log("SW Registered!")
console.log(registration);
}).catch(error => {
console.log("SW Registration Failed!");
console.log(error);
})
}
Service Worker Script (sw.js):
This script caches files and serves them when the user is offline:
self.addEventListener("install", e => {
e.waitUntil(
caches.open("static").then(cache => {
return cache.addAll(["./", "style.css", "images/iconlogo192.png"]);
})
);
});
self.addEventListener("fetch", e => {
e.respondWith(
caches.match(e.request).then(response => {
return response || fetch(e.request)
})
)
});
Incredible 👏, you did it, you've turned your website to a progressive web app.
Go ahead and click the install icon and then install. You should see something like this this:
Now our web app is installed on our computer and can be accessed offline, you can also pin it to the taskbar if you want.
The service worker handles file caching and offline functionality you can check this on the web browser using the inspect tool.
How to analyze web performance, accessibility, SEO, etc.
Once your app is running, it’s important to check if it’s fast, accessible, and SEO-friendly. The easiest way to do this is by using Lighthouse, a tool built into Chrome.
How to Run Lighthouse:
- Open your site in Chrome.
- Right-click, choose Inspect, and go to the Lighthouse tab.
- Click “Generate Report.” It’ll give you insights on performance, accessibility, SEO, and more.
Tips for Boosting App Performance And User Experience
To make sure your PWA is fast and feels like a native app, follow these tips:
Minify your CSS and JavaScript: Use tools like UglifyJS for JavaScript and CSSNano for CSS to remove unnecessary code and reduce file sizes.
Optimize Images: Compress images using tools like TinyPNG. This reduces load time, especially on mobile networks.
Lazy Loading: Only load images or content when they’re visible on the screen. This speeds up the initial load.
Cache Important Assets: Use the service worker to cache JavaScript, CSS, and images so that the app loads quickly.
Responsive Design: Make sure your app looks good on all screen sizes using media queries in CSS.
You’ve made it to the end and gotten smarter by learning about PWAs. Now, try practicing what you’ve learned. Good luck!
If you enjoyed this journey and would like to show your support, here’s how you can:
Top comments (2)
Thanks for reading! 🚀 Have you tried building or using a PWA? Share your experience or questions below, I’d love to hear your thoughts!
I've recently added PWA feature in llmchat. I'd invite all the devs learning PWA to help find issues and improve the feature at github