Progressive Web Apps with Webflow: Offline Cache & Push (2025 Tutorial)

Published July 2025 • 11 min read

1 — Generate manifest.json

Add file via Site Settings → Custom Code → Files. Include icons 192 px & 512 px.

2 — Inject Service Worker

<script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}
</script>

Add to Before </body> site-wide.

3 — Build sw.js with Workbox

import { precacheAndRoute } from 'workbox-precaching';
precacheAndRoute(self.__WB_MANIFEST);

Run npx workbox injectManifest during CI, output to Assets, then reference path.

4 — Offline strategy

• HTML: Network First.
• CSS/JS: Stale While Revalidate.
• Images: Cache First with 30-day expiration.

5 — Push notifications (optional)

Use OneSignal SDK; add API keys in Designer Embed.

6 — Install prompt polish

Listen to beforeinstallprompt, stash event, show custom banner. On click event.prompt().

7 — Lighthouse PWA audit

Target score ≥ 90. Fix maskable icon and content width issues.

Conclusion

PWA capabilities give Webflow sites offline resilience and native-like UX—just a few lines of JS away.