Did you know that your web apps built with HTML, CSS, JavaScript, or any front-end framework can become installable, and work offline providing an enhanced user experience?
This article will introduce progressive web apps to beginners, and anyone looking to improve their front-end development skills. In this article, you will learn;
How to implement offline functionality in Progressive Web Apps.
Tips for improving app performance, load time, and user experience.
Prerequisite: A basic knowledge of HTML and CSS is required for a full understanding of this article.
What is a Progressive Web App?
A Progressive Web App (PWA) is a type of web application that combines the best features of traditional websites and native mobile apps. PWAs are designed to be fast, reliable, and engaging, providing a native app-like experience on the web.
Why Progressive Web Apps?
The benefits of PWA include but are not limited to:
Improved Performance: PWAs load faster and perform better, which can enhance user experience and engagement.
Offline Functionality: With service workers, PWAs can cache web page content and function offline or in low-network conditions.
Increased Engagement: Push notifications, and home screen installation, without the hassle of going to the app store increase user engagement and experience.
SEO Friendly: PWAs are discoverable by search engines, improving visibility and reach.
Safe: They are served via HTTPS to prevent snooping and ensure content hasn't been tampered with.
Progressive Web App Examples
Many big companies such as YouTube, Facebook, and even Dev.to made their web apps progressive (installable). If viewing from a mobile browser, click on the three dots at the top right corner, then click Install or add to the home screen. From a desktop, click on the install icon at the top right corner of your browser as in the image below.
How to Make Your Web Apps Installable
Whether you are building with Plain HTML, React, Vue, or any front-end framework, the steps of making your progressive web app installable are the same.
This PWA tutorial will take you through the steps.
Step 1: Set up your project.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>PWA tutorial</title>
</head>
<body>
<section class="main">
<h1>Recipe App</h1>
<p>The best culinary treats</p>
<button>Explore</button>
</section>
</body>
</html>
CSS
body{
background-color: aliceblue;
}
.main{
margin: 0 auto;
background-color: cadetblue;
text-align: center;
padding: 3rem;
}
h1{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: #fff;
font-size: 3rem;
}
button{
padding: 1rem 2rem;
color: darkcyan;
border:#fff;
background-color: #fff;
}
p{
color: #fff;
font-size: 1.6rem
}
Output
Step 2: Create a "Manifest.json" file. This step makes the app installable. The following details will make the splash screen of your application.
{
"name": "Recipe Application",
"short_name": "My Recipes",
"description": "A recipe application for creating awesome recipes",
"start_url": "/",
"theme_color": "#000000",
"background_color": "#ffffff",
"display": "standalone",
"icons": [
{ "src": "./icon.png",
"sizes": "192x192",
"type": "image/png"
}]
}
Step 3- Link this manifest file to your HTML.
<link rel="manifest" href="manifest.json"/>
Voila! your app is installable
Splash screen
This is the first screen that is displayed when the app is visited.
Implementing Offline Feature in Progressive Web Apps
Offline capabilities in Progressive Web Apps enhance user experience. It ensures users enjoy the app with or without an internet connection. This is possible through service workers, background sync, Caching, etc.
A service worker (SW) intercepts network requests and gives responses from the cache when internet connection is not available.
While making your PWA offline, you can code the service worker manually or utilize tools like Workbox, PWA Builder Online, PWA Studio, etc.
For this tutorial, Workbox, owned by Google is the library of choice because it offers comprehensive features like precaching, background sync, push notifications, ease of use, etc.
How to Integrate Workbox for Offline Functionality
Step 1: Install Workbox on the command line
Using "npx" ensures the latest version is always installed. If you are building with React.js, run "npm run build" before this step to generate a build folder (contains static files ready for deployment).
npx workbox wizard
Step 2: Answer questions prompts from the Workbox wizard as in the image below.
For React.js projects, the build folder should serve as the root of the application.
Step 3: Generate the Service Worker file
Step 4: Paste this script code into your index.js file to register the SW. Ensure it is linked to your HTML document.
if('serviceWorker' in navigator){
window.addEventListener('load', () =>{
navigator.serviceWorker.register('/sw.js')
})
}
Step 5: Deploy
Service workers require https:// to ensure security. Deploy the project to Netlify, or Vercel. View the web app on the browser.
How to Analyze Web App Performance, Accessibility, and SEO
Chrome Lighthouse is a powerful tool for this analysis. Analyzing web performance, accessibility, and SEO is crucial for building high-quality web apps that provide excellent user experience.
To perform this analysis:
Open Chrome dev tools by right-clicking on your webpage.
Click on Inspect, then navigate to Lighthouse tab
On the tab click on mobile or desktop based on preference
Generate Report
- Check Lighthouse Score
Best Practices for PWA Performance Optimization
Preload URLs and fonts that can slow the loading process of PWA.
Implement Lazy Loading to defer the loading of assets like images until they are needed.
Ensure clean code architecture
Remove unwanted code and spaces to improve the overall performance of PWA.
In Summary,
PWAs are web apps that give a native-app-like experience. From offline functionality to installation prompts. From background sync to push notifications, the list is endless.
Building a progressive web app is an interesting yet challenging feat, but with constant practice and attention to detail, the best user satisfaction is yet to be delivered.
Thank you for reading. Like and follow for more web development and tech-related articles. Buy Me A Coffee to Support my Work
Top comments (25)
Great article!, straight to the point.
Just to mention, that apparently, Google will deprecate Lighthouse in the future, so it will be required to check PWA with a different tool.
Thank you so much @crisarji
What other tools do you recommend?
I appreciate your reply.
Not familiar with any others by the time being, I have always rely on LightHouse for this matter, apparently by default, we would need to access the manual debugging process , it seems to be terrible, though pretty sure we will have new options along the way.
Thank you @crisarji
you may try pagespeed.web.dev/
Interesting topic! Everything is explained articulately and clearly. For your project, consider checking out this free npm package: select-paginated.
Thank you @shaogat_alam_1e055e90254d
I will definitely check it out.
"Thanks for sharing this comprehensive guide on Progressive Web Apps (PWA)! It's incredibly informative and highlights the benefits of PWAs for creating fast, reliable, and engaging user experiences. Great resource for anyone looking to enhance their web presence!" Talmee Ltd Talmee Ltd, located in Manchester, is a leading Software company specializing in mobile app development, AI-driven solutions, and intuitive web design.
Thank you, I will definitely try it out on one of my react project
All the best @idighekere
Thank you for reading.
Thanks for taking time to simplify PWA in a matter of a few minutes reading. I will try this.
Thank you for reading @jreegene
One of the best articles i have read so far on dev.to.
Comprehensive and easy to understand.
Gonna try it myself very soon.
Thank you so much for reading @looph0le
Great Content
Thanks for this
Thanks for reading @dev_frank
Wow Great Sister <3
Thank you @rashedulhridoy, Actually it's sister.
Welcome, @udoka033 Okay Sister <3
Great article!,
Thank you @michal-so
Really good article! Keep writing💖
Thank you for reading @shemanto_sharkar
Some comments may only be visible to logged-in visitors. Sign in to view all comments.