How to add service workers in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Service workers enable offline functionality, asset caching, and progressive web app features, improving application reliability and user experience during poor network conditions. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented service workers in production React applications throughout my 12 years of frontend development since 2014. The most effective approach is registering a service worker with proper lifecycle management and using Workbox for caching strategies. This method provides reliable offline support, automatic asset caching, and update handling without complex manual service worker coding.
Register service worker in index.js and create service worker file with caching strategies using Workbox.
// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import * as serviceWorkerRegistration from './serviceWorkerRegistration'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
)
serviceWorkerRegistration.register({
onSuccess: (registration) => {
console.log('Service Worker registered successfully:', registration)
},
onUpdate: (registration) => {
console.log('New content available, please refresh.')
if (registration.waiting) {
registration.waiting.postMessage({ type: 'SKIP_WAITING' })
window.location.reload()
}
}
})
// src/serviceWorkerRegistration.js
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
window.location.hostname === '[::1]' ||
window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
)
export function register(config) {
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
if (isLocalhost) {
checkValidServiceWorker(swUrl, config)
} else {
registerValidSW(swUrl, config)
}
})
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then((registration) => {
registration.onupdatefound = () => {
const installingWorker = registration.installing
if (installingWorker == null) {
return
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
console.log('New content is available and will be used when all tabs are closed.')
if (config && config.onUpdate) {
config.onUpdate(registration)
}
} else {
console.log('Content is cached for offline use.')
if (config && config.onSuccess) {
config.onSuccess(registration)
}
}
}
}
}
})
.catch((error) => {
console.error('Error during service worker registration:', error)
})
}
function checkValidServiceWorker(swUrl, config) {
fetch(swUrl, {
headers: { 'Service-Worker': 'script' }
})
.then((response) => {
const contentType = response.headers.get('content-type')
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
navigator.serviceWorker.ready.then((registration) => {
registration.unregister().then(() => {
window.location.reload()
})
})
} else {
registerValidSW(swUrl, config)
}
})
.catch(() => {
console.log('No internet connection found. App is running in offline mode.')
})
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready
.then((registration) => {
registration.unregister()
})
.catch((error) => {
console.error(error.message)
})
}
}
// public/service-worker.js (using Workbox)
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.5.4/workbox-sw.js')
const { registerRoute } = workbox.routing
const { CacheFirst, NetworkFirst, StaleWhileRevalidate } = workbox.strategies
const { ExpirationPlugin } = workbox.expiration
const { CacheableResponsePlugin } = workbox.cacheableResponse
self.addEventListener('message', (event) => {
if (event.data && event.data.type === 'SKIP_WAITING') {
self.skipWaiting()
}
})
workbox.core.clientsClaim()
workbox.precaching.precacheAndRoute(self.__WB_MANIFEST || [])
registerRoute(
({ request }) => request.destination === 'image',
new CacheFirst({
cacheName: 'images',
plugins: [
new ExpirationPlugin({
maxEntries: 60,
maxAgeSeconds: 30 * 24 * 60 * 60
})
]
})
)
registerRoute(
({ url }) => url.pathname.startsWith('/api/'),
new NetworkFirst({
cacheName: 'api-cache',
plugins: [
new CacheableResponsePlugin({
statuses: [0, 200]
}),
new ExpirationPlugin({
maxEntries: 50,
maxAgeSeconds: 5 * 60
})
]
})
)
registerRoute(
({ request }) =>
request.destination === 'style' ||
request.destination === 'script',
new StaleWhileRevalidate({
cacheName: 'static-resources'
})
)
Here the serviceWorkerRegistration module handles registration with feature detection checking for service worker support. The register function waits for window load event before registering to avoid performance impact. The onupdatefound callback detects when new service worker versions are available. The SKIP_WAITING message allows immediate activation of updated service worker. Workbox provides high-level caching strategies like CacheFirst for images, NetworkFirst for API calls, and StaleWhileRevalidate for static resources. ExpirationPlugin manages cache size and age automatically. The precacheAndRoute method caches all build assets during installation.
Best Practice Note:
This is the service worker implementation we use in CoreUI React templates for building progressive web apps with offline capabilities. Test service worker behavior in production builds since Create React App disables service workers in development mode, implement user notifications for available updates with manual refresh options, and use workbox-webpack-plugin in custom webpack configurations for advanced precaching and runtime caching strategies.
