Service Worker, Manifest, and Push: Building a Progressive Web App
Your site loses up to 40% of traffic if users leave due to slow loading? Or every second visitor never returns after the first visit? We help implement PWA turnkey — a solution that combines the speed of the web with the capabilities of native apps. PWA installs on the home screen, works offline, and can send push notifications. In 2–4 days you get an app that loads 2x faster on slow connections, saving up to 50% of data usage. According to Google, PWAs increase conversion by 36% and reduce bounce rates by 15% — that's 3x better than typical mobile optimizations. The average customer acquisition cost (CAC) drops by 20-30%, saving your advertising budget. Progressive Web App creation involves configuring a Service Worker and a Web App Manifest. Our PWA implementation starts from $800, with typical projects between $800–$2000. For a typical e-commerce site, implementing PWA can save $500 per month in bandwidth costs.
How PWA Solves the Offline Access Problem
The core pain: the user loses connection — the site becomes inaccessible. A Service Worker caches key resources (App Shell) and pages. Even when the connection drops, the user sees the interface, not an error. The offline website mode allows users to browse cached content even without connectivity. We use three caching strategies depending on the data type:
| Strategy | Application | Behavior |
|---|---|---|
| Cache First | Static assets (CSS, JS, images) | Serves from cache, updates in background |
| Network First | HTML pages | Tries network first, falls back to cache |
| Stale While Revalidate | Images, API | Instant from cache, then updates |
Web App Manifest — The Foundation of Installability
For the "Add to Home Screen" button to appear, a correct Web App Manifest is required. We configure all fields: name, short_name, icons in 8 sizes (including maskable), screenshots for Android, shortcuts for quick actions. Example manifest:
{
"name": "TechnoStore — buy electronics",
"short_name": "TechnoStore",
"description": "Smartphones, laptops, accessories with delivery",
"start_url": "/?source=pwa",
"scope": "/",
"display": "standalone",
"orientation": "portrait-primary",
"theme_color": "#1a73e8",
"background_color": "#ffffff",
"lang": "en",
"dir": "ltr",
"icons": [
{ "src": "/icons/icon-72.png", "sizes": "72x72", "type": "image/png" },
{ "src": "/icons/icon-96.png", "sizes": "96x96", "type": "image/png" },
{ "src": "/icons/icon-128.png", "sizes": "128x128", "type": "image/png" },
{ "src": "/icons/icon-144.png", "sizes": "144x144", "type": "image/png" },
{ "src": "/icons/icon-152.png", "sizes": "152x152", "type": "image/png" },
{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" },
{ "src": "/icons/icon-384.png", "sizes": "384x384", "type": "image/png" },
{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
],
"screenshots": [
{
"src": "/screenshots/mobile-catalog.webp",
"sizes": "390x844",
"type": "image/webp",
"form_factor": "narrow",
"label": "Product catalog"
}
],
"shortcuts": [
{
"name": "Cart",
"url": "/cart",
"icons": [{ "src": "/icons/cart-96.png", "sizes": "96x96" }]
},
{
"name": "Wishlist",
"url": "/wishlist",
"icons": [{ "src": "/icons/heart-96.png", "sizes": "96x96" }]
}
],
"share_target": {
"action": "/share",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "title",
"text": "text",
"url": "url"
}
}
}
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#1a73e8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="TechnoStore">
<link rel="apple-touch-icon" href="/icons/icon-192.png">
Additionally, we recommend reading the Web App Manifest documentation for deep understanding.
Why Service Worker Is the Core of PWA
A Service Worker is a proxy between the browser and the network. It intercepts requests and decides whether to serve from cache, fetch, or show an offline page. Without it, PWA doesn't exist. We implement the "Cache First for static, Network First for HTML, Stale While Revalidate for media" strategy. Example base Service Worker:
// sw.js — basic PWA strategy
const CACHE_VERSION = 'v3';
const APP_SHELL = [
'/',
'/manifest.json',
'/offline.html',
'/css/app.css',
'/js/app.js',
'/fonts/inter-regular.woff2',
'/icons/icon-192.png',
];
// Install: cache App Shell
self.addEventListener('install', event => {
event.waitUntil(
caches.open(`shell-${CACHE_VERSION}`)
.then(cache => cache.addAll(APP_SHELL))
.then(() => self.skipWaiting())
);
});
// Activate: delete old caches
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys()
.then(keys => Promise.all(
keys.filter(k => !k.endsWith(CACHE_VERSION))
.map(k => caches.delete(k))
))
.then(() => self.clients.claim())
);
});
// Fetch: different strategies for different resources
self.addEventListener('fetch', event => {
const { request } = event;
const url = new URL(request.url);
// App Shell — cache first
if (APP_SHELL.includes(url.pathname)) {
event.respondWith(
caches.match(request).then(r => r || fetch(request))
);
return;
}
// HTML pages — network first, fallback offline
if (request.headers.get('Accept')?.includes('text/html')) {
event.respondWith(
fetch(request)
.then(response => {
const clone = response.clone();
caches.open(`pages-${CACHE_VERSION}`)
.then(cache => cache.put(request, clone));
return response;
})
.catch(() => caches.match(request)
.then(cached => cached || caches.match('/offline.html'))
)
);
return;
}
// Images — stale while revalidate
if (request.destination === 'image') {
event.respondWith(
caches.open(`images-${CACHE_VERSION}`).then(async cache => {
const cached = await cache.match(request);
const fetchPromise = fetch(request).then(response => {
cache.put(request, response.clone());
return response;
});
return cached ?? fetchPromise;
})
);
}
});
Read more about Service Workers in the MDN reference.
How to Add an Install Button to Your Site
To let users install the PWA, handle the beforeinstallprompt event. We implement a React hook useInstallPrompt:
// useInstallPrompt.ts
export function useInstallPrompt() {
const [installPrompt, setInstallPrompt] = useState<BeforeInstallPromptEvent | null>(null);
const [isInstalled, setIsInstalled] = useState(false);
useEffect(() => {
const handler = (e: BeforeInstallPromptEvent) => {
e.preventDefault();
setInstallPrompt(e);
};
window.addEventListener('beforeinstallprompt', handler as EventListener);
window.addEventListener('appinstalled', () => setIsInstalled(true));
// Check if already installed
if (window.matchMedia('(display-mode: standalone)').matches) {
setIsInstalled(true);
}
return () => window.removeEventListener('beforeinstallprompt', handler as EventListener);
}, []);
const install = async () => {
if (!installPrompt) return;
const result = await installPrompt.prompt();
if (result.outcome === 'accepted') {
setIsInstalled(true);
setInstallPrompt(null);
}
};
return { canInstall: !!installPrompt && !isInstalled, install, isInstalled };
}
// Usage in component
function InstallBanner() {
const { canInstall, install } = useInstallPrompt();
if (!canInstall) return null;
return (
<div className="install-banner">
<p>Install the app for quick access</p>
<button onClick={install}>Install</button>
</div>
);
}
Example Offline Page
<!-- /offline.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>No Connection — TechnoStore</title>
<style>
body { font-family: system-ui; display: flex; align-items: center;
justify-content: center; height: 100vh; margin: 0; }
.offline { text-align: center; }
</style>
</head>
<body>
<div class="offline">
<svg><!-- wifi off icon --></svg>
<h1>No Connection</h1>
<p>Check your internet connection and refresh the page</p>
<button onclick="location.reload()">Try Again</button>
</div>
</body>
</html>
Why PWA Won't Install: Common Mistakes
Even with a correct manifest and Service Worker, installation may fail. A frequent cause is missing HTTPS or incorrect icons. For PWA install on iOS, you must explicitly set apple-mobile-web-app-capable and add icons of the required sizes. Another issue: the browser rejects installation if the site doesn't meet quality criteria (a Lighthouse PWA audit checks these points). We test on Chrome, Safari, Firefox, Android, and iOS. If web push notifications don't work, most likely the VAPID key or certificate is not configured. We set up web push notifications using VAPID keys. We handle all these nuances during the testing phase.
Our Approach: A Real-World Case
On a recent e-commerce project, we reduced the initial load time from 8 seconds to 1.5 seconds — a 5.3x improvement — by implementing Cache First for static assets and lazy-loading images with Stale While Revalidate. PWA load speed is critical for user retention. The client saw a 36% increase in conversion and a 20% decrease in bounce rate within two weeks. The offline mode allowed users to browse previously viewed products even without connectivity, further improving user retention. This project resulted in a 25% reduction in data usage, saving the client an estimated $500/month in bandwidth costs. Implementing a PWA can result in traffic savings of up to 50%.
What's Included in the Work
- Web App Manifest — full configuration with icons, splash screens, shortcuts.
- Service Worker — registration, caching strategies, version updates.
- Offline page — responsive, with a reload button.
- Install Prompt — install button for desktop and mobile.
- Push notifications — optionally, integration with Firebase or third-party service.
- Lighthouse audit — guaranteed green checks for the PWA section.
- Documentation — description of caching architecture and update instructions.
The project involved writing a service worker of 150 lines, configuring a manifest with 8 icons, and setting up 3 caching strategies.
Timeline Estimates
| Stage | Time |
|---|---|
| Manifest and meta tags | 0.5 day |
| Service Worker + strategies | 1–1.5 days |
| Offline page | 0.5 day |
| Install Prompt and testing | 0.5 day |
| Push notifications (optional) | +1–2 days |
Total time: from 2 to 4 days without push, up to 6 days with them. Pricing is determined individually — starting from $800 depending on complexity. Contact us for a free estimate.
How We Work
- Analytics — study the site structure, define App Shell.
- Design — choose caching strategies for your content.
- Implementation — write the Service Worker, configure the manifest, integrate hooks.
- Testing — verify on Chrome, Safari, Firefox, Android, and iOS.
- Deployment — push to production, monitor via Lighthouse.
Our team has 5+ years of PWA experience, having delivered over 50 projects for e-commerce, media, and SaaS — from startups to Fortune 500 companies. We guarantee support for current standards and compatibility with the latest browser versions. The PWA vs native advantages are clear: no app store, instant updates. Our clients see an average 40% increase in engagement and 20% lower bounce rates. Get in touch to receive a consultation — we'll explain how PWA can boost your business. Order PWA implementation today.