A little while back, Nicolas Bevacqua wrote the fantastic article Making a Simple Site Work Offline with ServiceWorker. We kinda tag teamed the idea. Nicolas did all the work, but I put forth the idea (and designed the crappy little website) that we were going to make work offline. I wanted a site that wasn’t as complicated as a major web app with loads of resources and API usage, but wasn’t as simple as a single HTML page.
Everything in that article is up-to-date and serves as a great reference to getting started with offline capabilities for a site. Just a few notes:
- I updated the repo to make sure it was all working properly. Again the example isn’t totally barebones, but simple. It has a little build script that represents fairly normal modern web development: Sass, asset concatenation/minification/sourcemaps, SVG icon system, and… shuffling things around to make a production offline version.
- I moved the demo to a CodePen Project. Now it’s easier to see the code and the site itself together, and easier to fork and play around.
- I also tossed the site up at simpleoffline.website so you can see it all alone, which makes use of CodePen Projects ability to use Custom Domains.
Simple is good. Good work, thanks.
When can we buy tickets to Offline Conf?
Jussssst in case it’s not obvious to everybody: Offline Conf isn’t real ;)
You mean it is an online conf?
Sounds like a fun project! I’ve been working on something similar.
I’m harnessing my local development to link to all my credit accounts, another to track all my login information, and I’m currently working on migrating all of my checkbook transactions into a database that will give me complete control over me and my wife’s’ spending.
Where can we submit our talk proposals for Offline Conference?
Kidding.
I’ve added in a manifest.json file to make it home screen enabled as well, might be a good addition for the Code Pen project.