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.
Source: CSS Tricks Simple Offline Website