It made the rounds a while back that Chris Bolin built a page of his personal website that could only be viewed while you are offline.
This page itself is an experiment in that vein: What if certain content required us to disconnect? What if readers had access to that glorious focus that makes devouring a novel for hours at a time so satisfying? What if creators could pair that with the power of modern devices? Our phones and laptops are amazing platforms for inventive content—if only we could harness our own attention.
Now Bolin has a whole magazine around this same concept called The Disconnect!
The Disconnect is an offline-only, digital magazine of commentary, fiction, and poetry. Each issue forces you to disconnect from the internet, giving you a break from constant distractions and relentless advertisements.
I believe it’s some Service Worker trickery to serve different files depending on the state of the network. Usually, Service Workers are meant to serve cached files when the network is off or slow such as to make the website continue to work. This flips that logic on its head, preventing files from being served until the network is off.
I love how they don’t allow toggling offline mode via dev tools.
Check out the ‘Network’ tab, amigo.
Not working for me. I think it’s thinking my VirtualBox interface (used for connecting to VMs via network, or via a “network” on your computer) is the Internet maybe?
You can still watch the offline version of the page while actually having an internet connection by either working offline (on Firefox: File -> Work offline) or by opening the console and dispatching an offline event to the window object:
window.dispatchEvent(new Event("offline"))
That being said, it has nothing to do with Service Workers and the like. It’s a simple DOM Event called “offline” introduced in HTML5. This page just listens for this event. More information:
https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/Online_and_offline_events
https://html.spec.whatwg.org/multipage/indices.html#event-offline