A good PWA should never show the default browser No Internet screen. Create a beautiful, single-file offline fallback page containing inline styles and base64 images so it loads instantly from your cache.
An offline fallback page is a custom HTML document that your Service Worker intercepts and serves to users when they lose internet connection and try to navigate to a page that isn't cached. It replaces the dreaded browser "No Internet" dinosaur game with a branded experience.
When a user is offline, they cannot download external stylesheets, web fonts, or images from your server. To guarantee the page renders perfectly without a network connection, all CSS must be inlined, and all images must be embedded directly into the HTML as base64 data URIs.
Once you integrate the offline.html file with your Service Worker, open Chrome Developer Tools, go to the Network tab, and change the throttling dropdown from "No throttling" to "Offline". Then, try refreshing your app.
If you are using Workbox to manage your Service Worker (which we recommend), you can implement an offline fallback using the offlineFallback recipe. import { offlineFallback } from 'workbox-recipes';
offlineFallback({
pageFallback: '/offline.html',
});
Yes. Writing Service Worker routing logic and managing cache versions by hand can be tricky. With Progressier, your service worker is generated and updated automatically. Sign up for the complete solution.
With Progressier, no need to create or and manage a custom offline page.
Generate PWA See plans