Progressive Web Apps (PWA): A Comprehensive Guide

Progressive Web Apps (PWA): A Comprehensive Guide

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;

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.

screenshot of Youtube landing page

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>
Enter fullscreen mode
Exit fullscreen mode

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
} 
Enter fullscreen mode
Exit fullscreen mode

Output

output of pwa code

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" }] }
Enter fullscreen mode
Exit fullscreen mode

Step 3- Link this manifest file to your HTML.

 <link rel="manifest" href="manifest.json"/> 
Enter fullscreen mode
Exit fullscreen mode

Voila! your app is installable

output of pwa

Splash screen
This is the first screen that is displayed when the app is visited.

splash screen of pwa app

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.

workbox for pwa

Step 3: Generate the Service Worker file

npx workbox generateSW workbox-config.js
service worker for pwa

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') }) }
Enter fullscreen mode
Exit fullscreen mode

Step 5: Deploy
Service workers require https:// to ensure security. Deploy the project to Netlify, or Vercel. View the web app on the browser.

pwa deployment

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

screenshot of lighthouse report pwa

  • 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


Discover more from Coursity

Subscribe to get the latest posts sent to your email.

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

    Leave a Reply

    Your email address will not be published. Required fields are marked *