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. Now he has a whole magazine around this same concept called The Disconnect!
This two-part series is a gentle introduction to offline web development. Getting a web application to do something while offline is surprisingly tricky, requiring a lot of things to be in place and functioning correctly. We’re going to cover all of these pieces from a high level, with working examples. This post is an overview, but there are plenty of more-detailed resources listed throughout.
- The Setup (you are here!)
- The Implementation
I’ll be making heavy use …
Making your web app work offline, Part 1: The Setup is a post from CSS-Tricks
This two-part series is a gentle, high-level introduction to offline web development. In Part 1 we got a basic service worker running, which caches our application resources. Now let’s extend it to support offline.
- The Setup
- The Implementation (you are here!)
Making an `offline.htm` file
Next, lets add some code to detect when the application is offline, and if so, redirect our users to a (cached) `offline.htm`.
But wait, if the service worker file is generated automatically, how …
In the first part of this series we set up the front end with a Service Worker, a `manifest.json` file, and initialized Firebase. Now we need to create our database and watcher functions.
- Setting Up & Firebase
- The Back End (You are here)
Creating a Database
Log into Firebase and click on Database in the navigation. Under Data you can manually add database references and see changes happen in real-time.
Make sure to adjust the rule set under …
I hadn’t considered the fact that if you’re fingerprinting your assets (e.g. style.987987090897.css) to take advantage of browser cache, you’ll need to update your Service Worker every time you do that. But I guess you’ve got a build step anyway, so it can be updated in both places:
… we used a NodeJS module called Stacify to automatically create new version numbers in all the places when a file is changed.
We built a PWA from scratch – This is what we learned is a post from CSS-Tricks