I’m a huge proponent of working unplugged. I use Vagrant for my local development environment, which gives me the ability to work without running either a remote server or (usually) a network connection.
Unfortunately, I’ve discovered that many of the tools and tricks we’re using to optimize websites are making it impossible to work truly offline.
Network Dependency
We had some network issues during WordCamp Romania which rendered the Internet inaccessible to my machine for a number of hours. When I tried to take advantage of some downtime to hack on code, I realized a significant issue:
Even on my local system, WordPress was requesting a ginormous[ref]Technical term. Look it up.[/ref] number of external resources. Both the front-end and the admin would sit and spin for up to 10 minutes before the remote requests all timed out and the page loaded.
I quickly realized that, even though I used a local Vagrant box for development, my local development was still dependent on an active network for some sites.
The Offenders
Every image loaded through a CDN fails when running things locally. Every script include from sources like Google fail to download. Any UI logic that depends on the callbacks triggered by these scripts fails.
Advertising fails. User tracking fails. Social network integrations fail. Server-side device optimizations fail.
The majority of the tricks we use to load a site quickly – offloading assets to a CDN, lazy-loading scripts based on the callbacks fired by other scripts, etc – fail to take into account what happens when a site is partially offline. Sure, your visitor will likely not run into this problem, but there are situations that resemble working locally.
I once had a major client experience massive outages from just their CDN. Accessing the main site worked fine, but the DNS mappings for their CDN domains were broken so a total of zero assets loaded on their site. It was a horrible experience.
A Way Forward
The first tool I turned to in attempts to combat this problem is the Airplane Mode plugin for WordPress by Andrew Norcross. It’s a fantastic plugin, but only helps with the server side. The project I was working with uses several cron jobs to sync remote data, and this plugin was invaluable to cleaning up PHP processes on the back-end.
But the front end is still pulling in remote scripts/images/assets that are inaccessible over a compromised network.
Projects like Hoodie help promote an offline-first development experience by syncing data to local storage so there’s no UX interruption. Unfortunately, this tool only addresses data, not things like script and image tags and asynchronous operations.
Is there a way forward? Likely, but it will probably take the format of a browser plugin that detects network outages and responds with similar or cached versions of the unavailable scripts. If such a tool existed, true offline development would be possible – though it would come with its own set of design challenges.
