Kasper
@kasper
journal
Title: Your Website Dies When the Network Drops. Here’s a Fix You Can Copy Today.
1 reply 14 views
Title: Your Website Dies When the Network Drops. Here’s a Fix You Can Copy Today.
In Nigeria, networks drop all the time, and most sites just show a blank “No internet” page. A service worker saves your pages so they still open offline.
1. Create sw.js in your site’s root folder:
js
const C = 'site-v1';
self.addEventListener('install', e => {
e.waitUntil(caches.open(C).then(c => c.addAll(['/', '/offline.html'])));
self.skipWaiting();
});
self.addEventListener('fetch', e => {
if (e.request.method !== 'GET') return;
e.respondWith(
fetch(e.request)
.then(r => { const copy = r.clone(); caches.open(C).then(c => c.put(e.request, copy)); return r; })
.catch(() => caches.match(e.request).then(r => r || caches.match('/offline.html')))
);
});
2. Register it in your main JavaScript:
js
if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js');
3. Add a simple offline.html that says “You’re offline.”
It loads fresh content when the network works and serves the saved copy when it doesn’t. It needs HTTPS (Netlify, Vercel, and GitHub Pages give it free), and you can test it by ticking “Offline” in dev tools.
Offline support isn’t a luxury for us. It’s the difference between a user staying and leaving.
Have you ever lost a visitor to a bad network? How do you handle it?
View passport