Provide an offline fallback page
SkillDev toolsoffline-fallback is a skill that guides an AI agent through providing a custom offline fallback page for a website. Instead of the browser's default "No internet connection" screen, users see a branded page that can surface cached content or queue actions. It covers creating the page, pre-caching it in a service worker, and serving it for failed navigation requests.
Available today. Use it from your connected AI after setup.
No other account needed.
Have a web project where a service worker can be added or already exists.
Then ask your AI: use the Provide an offline fallback page skill
What your AI can do with it
- Create a self-contained /offline HTML page that works without network requests
- Pre-cache the offline page during the service worker install event
- Configure the fetch handler to serve the offline page for failed navigation requests
- Review service worker code to verify the fallback is only served for navigation requests
- Explain how service workers intercept failed requests and return cached pages
- Check whether a site shows a custom offline fallback page when disconnected
Getting started
- Have a web project where a service worker can be added or already exists.
- Load the offline-fallback skill so the agent can follow its rule guidance.
- Ask the agent to create a minimal /offline page and pre-cache it at service worker install.
- Have the agent update the fetch handler to serve the offline page for failed navigation requests.
- Test by disconnecting the network and loading a page to confirm the fallback appears.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/offline-fallback/SKILL.md and read by ahel’s review.
The browser's default offline error screen ("No internet connection") is confusing and completely outside your brand. A custom offline page maintains the user experience, reinforces trust, and can surface cached content or useful actions — such as enabling users to continue reading a cached article or queuing a form submission for later.
Quick Reference
- Create a minimal /offline HTML page that works without any network requests
- Pre-cache the offline page during the service worker install event
- Intercept failed navigation requests and serve the offline page instead
- Include helpful guidance so users know what to do while offline
Check
Check whether the site shows a custom offline fallback page when the network is disconnected and a navigation request cannot be fulfilled.
Fix
Create a self-contained /offline page and configure the service worker to pre-cache it and serve it for failed navigation requests.
Explain
Explain how a service worker can intercept failed network requests and return a cached offline fallback page to the user.
Code Review
Review the service worker fetch handler and the offline page markup. Verify the offline page is pre-cached at install time, that it does not depend on external resources, and that the fallback is only served for navigation requests (not sub-resources).
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/performance/offline-fallback
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- What does the offline fallback page do?
- It replaces the browser's default offline error screen with a custom page that maintains the user experience and can surface cached content or useful actions, like continuing to read a cached article or queuing a form submission.
- When should this skill be used?
- When adding PWA capabilities, implementing a service worker, or improving the experience for users on unreliable network connections.
Advanced
- Item type
- skill
- Key
offline-fallback- Source
- github.com/thedaviddias/front-end-checklist