📡Offline Page Using Service Worker
Offline Page Using Service Worker
Have you ever been browsing a website — let’s say watching a trailer on JioCinema or checking something on YouTube — and suddenly your internet goes off?
On most sites, you’re hit with that boring “No Internet Connection” error screen from the browser. But on some websites, instead of this default message, you see a custom offline page that says something helpful like:
“Oops! You’re offline. Please reconnect and try again.”
That’s not magic — it’s done using a Service Worker.
What’s cool? You don’t need a full PWA. Just a simple Service Worker file and one static offline page can do the trick — even in a standard React web app.
🧠 What’s a Service Worker?
A Service Worker is a special JavaScript file that runs in the background of your browser and can:
Intercept network requests
Cache files
Serve fallback responses when offline
In our case, it will catch failed requests and display a friendly offline page instead.
✅ What We’ll Build
A React-based web app that:
Registers a service worker
Caches a simple
offline.htmlpageShows that page when internet is lost
🔧 Step-by-Step Implementation
🗂️ 1. Create offline.html
Create a file named offline.html inside the public/ folder of your React project:
<!-- public/offline.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Offline</title>
</head>
<body>
<h2>You’re offline 🚫</h2>
<p>Please check your internet connection.</p>
</body>
</html>✅
public/is important because React serves this folder directly.
⚙️ 2. Create service-worker.js
Also inside public/, create a file named service-worker.js:
// public/service-worker.js
const CACHE_NAME = 'offline-cache-v1';
const OFFLINE_URL = '/offline.html';
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => {
return cache.addAll([OFFLINE_URL]);
})
);
});
self.addEventListener('fetch', event => {
if (!navigator.onLine) {
event.respondWith(
caches.match(event.request).then(response => {
return response || caches.match(OFFLINE_URL);
})
);
}
});📦 3. Register the Service Worker
Open your src/index.js (or src/main.jsx if you're using Vite) and add this code:
// src/index.js
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then(reg => console.log('✅ Service Worker registered'))
.catch(err => console.log('❌ SW registration failed:', err));
});
}This will register the service worker when your app loads.
🔁 How It Works
On first visit, the service worker installs and caches
offline.html.If the internet goes out, all requests are intercepted.
If the request fails and isn’t cached, the service worker returns
offline.html.
📌 Final Notes
This approach works on HTTPS or
localhost.You don’t need
manifest.json, icons, or full PWA setup.This is perfect for apps where you only care about offline fallback, not installation.
🚀 Summary
If your app isn’t a PWA but you still want a graceful offline experience, this is the way to go:
✅ Clean
✅ Lightweight
✅ Custom offline message
✅ Easy for React apps
🙌 Final Thoughts
Adding offline support with a service worker — without going full PWA — is a small step that delivers a big UX improvement.
Instead of users hitting a dead-end "No Internet" page, you give them a smooth fallback that keeps your app feeling reliable and thoughtful.
Whether you're building with React or any other framework, this pattern is simple to integrate and powerful in execution.
💬 Let's Connect
If you tried this out or have questions, I’d love to hear from you!
Feel free to reach out or follow me on:
💻 GitHub: @kashyapprajapat
🐦 X (Twitter): @Kashyap14112003
💼 LinkedIn: Kashyap Prajapati
Thanks for reading! 🙏
Let’s build better — even when the internet breaks. ⚡
Join Kashyap on Peerlist!
Join amazing folks like Kashyap and thousands of other builders on Peerlist.
4
16
1