I stumbled upon this site the other day from Mozilla that’s a collection of recipes to get started with a Service Worker — from caching strategies and notifications to providing an offline fallback to your users, this little cookbook has it all.
Jeremy Keith has written a new book all about service workers and offline functionality that releases at the end of the month. The first chapter is posted on A List Apart. Now that the latest versions of iOS and macOS Safari support service workers, I can’t think of a better time to learn about how progressive web apps work under the hood. In fact, here’s an example of a simple offline site and a short series on making …
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