HTML ROMs: Self-contained web applications
About a year ago, my friends found out that I had never played Pokemon Red or Blue. After some prodding, I agreed to play, filling a supposed void in my childhood. I was on my way to be the best there ever was.
Thanks to OpenEMU, playing classic video games is easier than ever. All you need is a ROM, which are easy to find via Google. They're even legal if you own the original game. ROMs are self-contained time-capsules. Hours of game play, packed into less than 500k of data.
What if we took the idea of ROMs and applied it to the web? A single HTML file containing a full application, no network connectivity required. 2048, Drowning, and A Dark Room are a few examples that come to mind. These games are great, but how long will they be around? Servers die, domain names expire, and files disappear. The archive team can't always be called upon to ride in and save the day.
The answer is to turn them into single-file web applications: HTML ROMs.
The browser as an emulator
HTML ROMs are self contained applications that live in a single HTML file. They can't include any other files and must work without a network connection. A user should be able to save the file, open it locally, and have everything Just Work.
To see how feasible this idea was, I took some time to make some to convert a few HTML games into single-file applications. Behold, 2048 and Drowning as self-contained single-file applications, that you can enjoy whenever and where ever you have access to a web browser.
Development considerations
First, don't compress or minify JavaScript or CSS. This allows other people to easily remix and change the original application. Drowning is a good example of a game that's hard to change, as the original Dart source-code isn't available.
Images, audio, and video should be base64 encoded into data URIs. The increase in file size is worth the increase in portability. You never need to worry about sending or saving more than one file.
Some tooling will be required to make the above easy. A CSS preprocessor that turns URLs into data URIs. A JavaScript ES6 transpiler to compile individual modules into one larger JavaScript file. Tie them together with your favorite build tool, and your on your way.
Sadly, mobile browsers don't make it easy to save and load HTML files from the file system. An application that wraps a web view with easy loading from the file system wouldn't be too hard to right, and would ensure that mobile users can take advantage of permanent offline access, without developers having to worry about the headache that is AppCache.
Go forth and create
Transform your favorite web game into an HTML ROM. Send me a link and I'll add it to the list below: