Progressive Web Apps (PWAs) are becoming increasingly essential in today’s web development landscape. With their ability to combine the best features of web and mobile apps, they’re a fantastic choice for modern developers. If you’re working with Vite and React, you’re already leveraging tools that emphasize speed and efficiency. Now, let’s make your app a full-fledged PWA.
Thank me by sharing on Twitter 🙏
Why PWAs Matter
PWAs bring significant advantages to the table: offline capabilities, installability on devices, faster load times, and enhanced user engagement. They’re also supported across major browsers, making them an accessible and impactful addition to your development toolkit. By following these steps, you’ll not only enhance the functionality of your app but also provide a superior experience for your users.
Setting Up the VitePWA Plugin
The core of adding PWA capabilities to your Vite React app is the vite-plugin-pwa. This plugin makes integrating service workers, manifests, and other PWA features seamless.
Start by installing the plugin if you haven’t already:
npm install vite-plugin-pwa --save-dev
Next, update your Vite configuration file. Open vite.config.ts and modify it to include the plugin:
Learn Spanish While You Sleep & Learn Spanish While Driving in Your Car: Over 50 Hours of Learning Spanish Lessons from Beginner or Basic Spanish to Intermediate Conversational Spanish
$26.21 (as of February 25, 2025 13:13 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
Elon Musk
$16.99 (as of February 25, 2025 13:13 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
The Coming Wave: Technology, Power, and the Twenty-First Century's Greatest Dilemma
$17.72 (as of February 25, 2025 13:13 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';
export default defineConfig({
plugins: [
react(),
VitePWA({
registerType: 'autoUpdate',
devOptions: {
enabled: true,
},
manifest: {
name: 'My Vite PWA',
short_name: 'VitePWA',
description: 'A Progressive Web App built with Vite and React',
theme_color: '#ffffff',
background_color: '#ffffff',
display: 'standalone',
icons: [
{
src: '/favicon-192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: '/favicon-512x512.png',
sizes: '512x512',
type: 'image/png',
},
],
screenshots: [
{
src: '/screenshots/screenshot1.png',
sizes: '1280x720',
type: 'image/png',
form_factor: 'wide',
},
],
},
}),
],
});
This configuration enables the plugin during development, sets up a basic PWA manifest, and registers a service worker that updates automatically when you deploy new code.
Creating the Manifest and Screenshots
The manifest key in the plugin configuration defines metadata about your app. While it includes essential properties like the app name and theme color, the screenshots property deserves special attention for a richer installation experience on desktop.
Adding Screenshots
Take screenshots of your app that showcase key features or interfaces. Resize them to common dimensions such as 1280x720 for desktop compatibility. Save these images in a public/screenshots folder. Once added, reference them in the screenshots array of the manifest, as shown in the example above.
Developing with PWA Features
With devOptions enabled in the plugin configuration, you can test PWA features like service worker registration and offline caching during development. Run your development server with:
npm run dev
Open your browser’s developer tools and navigate to the “Application” tab. Under “Service Workers,” verify that a service worker is registered. In the “Manifest” section, ensure that all metadata, including screenshots, appears correctly.
Generating Certificates for HTTPS
PWAs require a secure context (HTTPS) for service workers and other features to work. To simulate this during local development, you’ll need SSL certificates. On macOS, you can use the following shell script to generate them:
#!/bin/bash
CERT_DIR="./certs"
KEY_FILE="localhost-key.pem"
CERT_FILE="localhost.pem"
mkdir -p $CERT_DIR
# Generate private key
openssl genrsa -out $CERT_DIR/$KEY_FILE 2048
# Create a certificate signing request (CSR)
openssl req -new -key $CERT_DIR/$KEY_FILE -out $CERT_DIR/localhost.csr -subj "/C=US/ST=California/L=Localhost/O=Dev/OU=Local/CN=localhost"
# Create self-signed certificate
openssl x509 -req -days 365 -in $CERT_DIR/localhost.csr -signkey $CERT_DIR/$KEY_FILE -out $CERT_DIR/$CERT_FILE
rm $CERT_DIR/localhost.csr
echo "Certificates generated at $CERT_DIR"
Run this script, then configure Vite to use HTTPS by updating the server key in vite.config.ts:
server: {
https: {
key: fs.readFileSync('./certs/localhost-key.pem'),
cert: fs.readFileSync('./certs/localhost.pem'),
},
},
Restart your development server to test HTTPS locally.
Testing Your PWA
Before deploying your app, it’s essential to ensure it meets PWA requirements. Google Chrome’s Lighthouse tool makes this easy.
- Open your app in Chrome.
- Open DevTools and navigate to the “Lighthouse” tab.
- Run a PWA audit.
Check the results for any warnings or missing features, such as proper service worker registration, valid icons, or screenshots.
Deploying Your PWA
When your app is ready for production, build it with:
npm run build
Then, deploy it to a secure environment. Hosting platforms like Vercel, Netlify, or Firebase Hosting are excellent choices, as they provide HTTPS by default. Once deployed, test your app again to confirm it installs correctly and functions offline.
Final Thoughts
Turning your Vite React app into a PWA is a straightforward process that significantly enhances its functionality and usability. By integrating the VitePWA plugin, configuring a manifest, and ensuring HTTPS during development, you’re providing a better experience for your users. With the steps outlined here, your app will be well-equipped to take advantage of all the benefits PWAs offer.
