Kasie Udoka Success

Posted on Jul 6

Progressive Web Apps (PWA): A Comprehensive Guide

#javascript #webdev #react #beginners

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;

Everything you need to start building Progressive Web Apps
How to create installable web apps.
How to implement offline functionality in Progressive Web Apps.
How to analyze web performance, accessibility, SEO, etc.
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

npx workbox generateSW workbox-config.js

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 (23)

crisarji • Jul 8

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.

Kasie Udoka Success • Jul 8

Thank you so much @crisarji
What other tools do you recommend?
I appreciate your reply.

crisarji • Jul 9

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.

Kasie Udoka Success • Jul 12

Thank you @crisarji

Chandra Pratap • Jul 13

you may try pagespeed.web.dev/

Shaogat Alam • Jul 8

Interesting topic! Everything is explained articulately and clearly. For your project, consider checking out this free npm package: select-paginated.

Kasie Udoka Success • Jul 8

Thank you @shaogat_alam_1e055e90254d

I will definitely check it out.

Mark Henry • Jul 16

"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.