Your site goes down. A visitor’s connection drops. They hit a blank browser error page and leave — a lost reader, a lost sale, or a lost lead. It happens every day to WordPress sites that haven’t set up offline mode.
This isn’t a niche feature anymore. It’s a baseline expectation for any site that wants to hold attention past the first shaky connection. This guide covers exactly how to enable offline mode on WordPress, what’s happening under the hood, and which approach makes the most sense for your setup.
What “Offline Mode” Actually Means for WordPress
Offline mode runs on a browser technology called a Service Worker — a background script that operates separately from the main page. It intercepts network requests and serves cached versions of pages, assets, and content when no connection is available.
As visitors browse your site, the Service Worker quietly caches what they’ve already loaded. If their connection drops, they see that cached content instead of a browser error. For a WooCommerce store, product pages stay visible. For a blog, articles stay readable. For a membership site, logged-in content stays accessible.
This is the foundation of Progressive Web App (PWA) technology. Offline mode is one of the core features that makes a PWA feel like a native app rather than a website.
Method 1: Enable Offline Mode with a PWA Plugin (Recommended)
The most practical approach is installing a PWA plugin that handles Service Worker registration, caching strategy, and fallback pages for you. No manual coding required.
Using Progressify
Progressify is a WordPress PWA plugin that enables offline mode as part of a complete Progressive Web App setup. Here’s how to get it running:
Step 1: Install and activate the plugin
Download Progressify from WordPress.org (free version) or install the Pro version through the DaftPlug membership. Activate it from your Plugins dashboard.
Step 2: Configure your offline settings
Go to the Progressify settings panel in your WordPress admin. Under the Offline section, you’ll find options to:
- Set a custom offline fallback page — what visitors see when they request uncached content without a connection
- Choose your caching strategy (cache-first, network-first, or stale-while-revalidate)
- Define which content types to cache on first visit
Step 3: Set your fallback page
Create a simple WordPress page — something like “You’re Offline” — with a short message explaining the situation. Point Progressify to it in the offline settings. Visitors who try to load an uncached page will see this instead of a browser error.
Step 4: Test it
Open Chrome DevTools, go to the Application tab, and confirm your Service Worker is registered and active. Then switch to the Network tab, toggle “Offline,” and reload a page you’ve already visited. It should load from cache.
Beyond offline mode, Progressify also adds Add to Home Screen prompts, push notifications, and app-like UI components. Visitors can install your site to their phone’s home screen and browse it like a native app.
Method 2: Manual Service Worker Implementation
If you want full control and don’t mind writing code, you can register a Service Worker manually. This suits developers who need custom caching logic or are building headless WordPress setups.
The Basic Structure
Create a file called sw.js in your theme’s root directory:
const CACHE_NAME = 'my-site-cache-v1';
const OFFLINE_URL = '/offline/';
const urlsToCache = [
'/',
'/offline/',
'/wp-content/themes/your-theme/style.css',
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request).catch(() => caches.match(OFFLINE_URL));
})
);
});
Then register it in your theme’s functions.php:
function register_service_worker() {
echo '<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js");
}
</script>';
}
add_action('wp_footer', 'register_service_worker');
Limitations of the Manual Approach
Manual Service Workers need ongoing maintenance. WordPress updates, theme changes, and new content can all invalidate your cache in ways that quietly break the offline experience. Cache versioning alone gets messy fast on sites with frequent updates.
For most WordPress sites, a plugin-based approach is more reliable and far less time-consuming to keep running.
Caching Strategies: Which One Should You Use?
The strategy you pick shapes how offline mode actually behaves. Three options cover most WordPress use cases:
Cache-First: The Service Worker checks the cache before hitting the network. Fast page loads, but visitors may occasionally see slightly stale content. Works well for static pages and blogs.
Network-First: Tries the network first, falls back to cache when offline. Content stays fresh when connected, with a reliable fallback when it’s not. The right call for WooCommerce stores where product data changes regularly.
Stale-While-Revalidate: Serves cached content immediately, then fetches a fresh version in the background for the next visit. The best balance of speed and freshness for most sites.
Progressify lets you configure all three without touching code.
What Gets Cached (and What Doesn’t)
Knowing the limits of offline mode prevents confusion later.
Typically cached:
- Pages and posts a visitor has already loaded
- Theme CSS and JavaScript files
- Images loaded in the browser
- Your custom offline fallback page
Not cached by default:
- Pages the visitor has never visited
- Dynamic content requiring a server request — cart totals, logged-in member content
- Third-party scripts and embeds (Google Analytics, social widgets)
- Form submissions
For WooCommerce sites, product pages cache well, but checkout and cart functionality need a live connection. That’s expected behavior — you can explain it clearly on your offline fallback page.
Offline Mode as Part of a Bigger Performance Strategy
Offline mode solves one specific problem: what happens when a visitor loses their connection. But it works best when the rest of your site’s performance is already solid.
A site that loads in 6 seconds doesn’t suddenly feel fast because it has offline support. Core Web Vitals still matter — FCP, LCP, CLS, INP, and TTFB all affect how your site feels before any offline scenario comes into play.
DaftPlug bundles Progressify (PWA and offline mode) with Lightify (full-page caching, image optimization, Core Web Vitals monitoring) and Generatify (AI chatbot) under one subscription at $37.99 per year. If you’re already paying $59 per year for WP Rocket’s caching alone, the math isn’t complicated.
Frequently Asked Questions
Service Workers are supported in Chrome, Firefox, Edge, and Safari (iOS 11.3 and later). Internet Explorer doesn’t support them, but coverage across modern browsers is effectively universal in 2026.
No. Service Workers run in a separate thread from the main page and don’t block rendering. A well-configured Service Worker actually speeds up repeat visits by serving cached assets instead of making fresh network requests.
Yes — by manually writing and registering a Service Worker. You get more control, but you also take on the maintenance burden as your site evolves. For most WordPress sites, a plugin is the practical choice.
Partially. Product pages and static content cache well. Cart, checkout, and real-time inventory all require a live connection. Visitors can browse products offline but can’t complete a purchase without reconnecting.
A Service Worker is the browser technology that makes offline mode possible. Offline mode is the result: a site that stays functional when the connection drops. You need a Service Worker to have offline mode, but Service Workers can also handle push notifications and background sync.
No. Offline mode works through any modern browser without app store involvement. App store publishing — Google Play and Apple App Store — is a separate step that Progressify supports if you want to go that route.
Open Chrome DevTools, go to the Application tab, and confirm your Service Worker shows as “activated and running.” Then go to the Network tab, check the “Offline” box, and reload a page you’ve previously visited. If it loads without a network error, you’re good.
Offline mode is one of those features most visitors never consciously notice — until their connection drops and your site still works. That’s exactly the point. Set it up once, test it, and move on. Your visitors will thank you without knowing why.