I recently created a Progressive Web App (PWA) using Vite called “Ramadan Tracker“. This PWA helps users keep track of their fasting schedule and prayer times, all without needing an internet connection. For March, during Ramadan, it had a total of 380+ visitors, over 1000 page views, and 30 active users.
So, I thought of writing a couple of articles on Progressive Web Apps (PWA) and how to build them using Vite on React. So, in this article, I will start with the basics of what PWAs are and how they work.
Let’s begin:
PWA, or Progressive Web App, is a web application that utilizes modern web technologies to provide a fast, reliable, and installable experience similar to a native app while remaining accessible through a web browser.
Characteristics of PWAs
- Installable
- Similar to a native app, PWAs can be installed on a user’s device, both mobile and desktop, which would allow users to access the app directly from the home screen.
- App-like Experience
- Like a native app, PWAs also provide users with a similar experience, with features like push notifications, offline functionality, and a full-screen view.
- Reliable and Fast
- PWAs are intended to be quick and stable, even on sluggish or unreliable network connections, and they can operate offline.
- Cross-Platform
- PWAs can be used on any device with a web browser and share a single codebase, making development and deployment easier.
- Built with Web Technologies
- PWAs use standard web technologies such as HTML, CSS, and JavaScript for easy development and maintenance.
- Progressive Enhancement
- PWAs leverage current APIs to enhance the user experience across all browsers, including older ones.
Here is a breakdown of how PWA is versus Web App and Native App:
| Feature | Web App | PWA | Native App |
|---|---|---|---|
| Works Offline | ❌ No | ✅ Yes (via caching) | ✅ Yes |
| Installable | ❌ No | ✅ Yes | ✅ Yes |
| Push Notifications | ❌ No | ✅ Yes | ✅ Yes |
| Performance | ⚡ Fast | ⚡⚡ Faster | ⚡⚡⚡ Fastest |
| Development Cost | 💲 Low | 💲 Medium | 💲💲 High |
How do PWAs Work?
PWA runs differently compared to a normal web app. Here’s how they work:
- Service Workers:
- These act as a middle layer between the browser and the internet, caching files and enabling offline functionality.
- Example: Even if you’re offline, a PWA like Starbucks lets you browse the menu.
- Web App Manifest:
- A JSON file that tells browsers how to install the app (icons, name, theme color, etc.).
- Without this, a web app cannot be installed like an app.
- HTTPS Requirement:
- Ensures security and protects user data.
Want to build your own PWA? 🚀 In my next article, I’ll show you step-by-step how to create a PWA using Vite & React—stay tuned!
If you have any questions, please comment below, and I shall answer them.
Leave a Reply