Archive | service workers

RSS feed for this section

Service Worker Cookbook

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.

You can also check out our guide to making a simple site work offline and the offline site that resulted from it.

Direct Link to ArticlePermalink

The post Service Worker Cookbook appeared first on CSS-Tricks.

Going Offline

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

The post Going Offline appeared first on CSS-Tricks.

Making your web app work offline, Part 1: The Setup

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.

Article Series:

  1. The Setup (you are here!)
  2. The Implementation

Basic approach

I’ll be making heavy use …


Making your web app work offline, Part 1: The Setup is a post from CSS-Tricks

Making your web app work offline, Part 2: The Implementation

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.

Article Series:

  1. The Setup
  2. 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 …


Making your web app work offline, Part 2: The Implementation is a post from CSS-Tricks

Implementing Push Notifications: The Back End

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.

Article Series:

  1. Setting Up & Firebase
  2. 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 …


Implementing Push Notifications: The Back End is a post from CSS-Tricks

We built a PWA from scratch – This is what we learned

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.

Direct Link to ArticlePermalink


We built a PWA from scratch – This is what we learned is a post from CSS-Tricks