Frontend70-100 min
Service Workers and Offline Support
Register a service worker, cache the app shell, use route-specific strategies, and avoid stale-cache deployment bugs.
Service WorkerWorkboxPWACache API
Prerequisites
- A web app served over HTTPS in production.
- A list of assets and routes that should work offline.
- A plan for service worker updates.
1
Plan the implementation
Start by choosing the exact page, route, API, or deployment surface you want to improve. A narrow target makes the implementation measurable and easier to verify.
- Write down the current behavior and the user-facing problem it creates.
- Pick one measurable success signal such as bundle size, latency, error rate, security coverage, or UI responsiveness.
- Identify the files, routes, providers, and environment variables involved.
- Create a rollback note before changing production-sensitive configuration.
2
Set up the required tools
Install or configure only the tools needed for this implementation. Keep config close to the feature so future developers can find the moving parts quickly.
Implementation snippet
npm install -D vite-plugin-pwa workbox-windowChecklist
- Dependencies are added to the correct workspace package.
- Environment variables are documented in `.env.example` when needed.
- Local development still starts without production-only secrets.
- The change is small enough to review in one pull request.
3
Implement the core pattern
- Decide whether you need offline fallback, faster repeat visits, or both.
- Precache the app shell and static assets generated by the build.
- Use network-first for fresh API data and cache-first for versioned assets.
- Show an offline page when navigation cannot reach the network.
- Test update behavior after deploying a changed build.
Implementation snippet
if ("serviceWorker" in navigator) {
window.addEventListener("load", () => {
navigator.serviceWorker.register("/sw.js");
});
}4
Handle edge cases
Checklist
- The app does not serve old JavaScript forever after deploy.
- Authenticated API responses are not blindly cached.
- Offline fallback works in airplane mode.
- Users can recover after a bad or stale service worker update.
5
Verify before production
- Run the app locally and test the normal success path.
- Test one failure path, one empty state, and one slow-network or retry path.
- Run the project build and any related unit or integration tests.
- Check browser console, server logs, and network responses for hidden warnings.
- Document the final behavior, commands used, and any follow-up work.