Service Workers Are for Every Website β€” Not Just Apps 🌐

March 5, 20267 min read
service workerPWAofflinecachingweb workersprogressive web appsbackground sync

How This Course Began 🎯

Kyle didn't start learning service workers from a textbook. He built a real app β€” a restaurant note-taking app he wanted installed on his phone β€” using nothing but web technologies. No Java, no Swift, just the web stack he already knew.

That hands-on journey led him straight into the chaotic world of Googling scattered docs, piecing together MDN references, and trial-and-error coding. Sound familiar?

"The code we'll be going through today was done exactly that way β€” I set out with here's what I kind of want to build and I spent a lot of time fiddling with it."

That honesty alone made me feel better about my own confusion.


πŸ“š Recommended Resources

Before diving in, Kyle flagged a few go-to references:

  1. "Going Offline" by Jeremy Keith β€” Hands down the best book Kyle found on service workers. Highly recommended.
  2. MDN Docs β€” Comprehensive reference material, but requires a lot of piecing together.
  3. Google's write-ups β€” Useful but scattered.
  4. Workbox β€” A framework/library for writing service workers declaratively (more on this below).

Two Paths: Workbox vs. Raw Service Workers πŸ’‘

There's an important fork in the road when getting started:

  1. Workbox β€” A framework that lets you set up service workers declaratively with clean APIs. Great if you're shipping something at work fast and don't have time to explore deeply.
  2. Raw Service Workers β€” What this course covers. More code, more complexity, but also fine-grained control and real understanding of what's happening under the hood.

Kyle went the raw route on purpose β€” he wanted to know what was actually possible, including things most tutorials never even mention. This course follows that same philosophy.

If you're trying to get something shipped quickly, Workbox is a great starting point. But if you want to truly understand service workers, raw is the way to go.


The Big Claim: Every Website Needs a Service Worker πŸ”₯

Here's where things got interesting. Most resources frame service workers as a Progressive Web App thing β€” like they're only relevant if you're building the next Gmail.

Kyle pushes back hard on that:

"Literally every single website on the internet needs a service worker. The static one-pager someone wrote 20 years ago. The fancy Gmails of the world. Everything in between."

We get distracted by shiny web features β€” CSS Grid, retina images, fancy web fonts, SVG animations β€” and forget the base plumbing fundamentals of the web. Service workers are that plumbing.


The Real Problem: Browser Caching Is Not What You Think πŸ€”

We've always had a naive mental model of caching:

"It's in the cache β†’ browser uses it. Not in the cache β†’ browser fetches it."

That's not how it works. The actual decision tree inside a browser for handling cached requests is enormously complex. It's not binary. And because we've mentally filed caching under "the browser handles that," we've completely ignored it β€” and users are paying the price.


The Offline Story That Says It All ✈️

Kyle travels constantly β€” Lithuania, Australia, all over β€” mostly on 2G speeds (free roaming via T-Mobile, slow but usable). This gives him a front-row seat to how broken the web can be for most of the world.

Here's a scenario that perfectly captures the problem:

  1. You're sitting in an airport. A tweet comes by with an interesting blog post.
  2. You tap it, start reading the first few paragraphs.
  3. They board the plane. You pocket your phone.
  4. 30,000 feet in the air, no Wi-Fi, airplane mode on.
  5. You open that tab β€” blank white screen. Failed to load.

The content was right there before takeoff. Nothing changed on your end. But it's gone. (Likely culprit? A background ad request that failed and took the whole page with it.)

"There's a difference between tolerating a degraded experience and getting absolutely nothing."


The Flawed Assumption We've All Made 😬

We design the web as if users will always have:

  • βœ… Perfect Wi-Fi
  • βœ… Continuous connectivity
  • βœ… Full battery
  • βœ… No interruptions

But the reality for the vast majority of the world's web users is none of that. Spotty connections, airplane mode, 2G speeds, rural areas β€” this is normal.

The web was built assuming a perfect, contiguous experience. Service workers exist to fix that assumption.


It's Our Responsibility as Developers πŸ§‘β€πŸ’»

This is where Kyle stops being descriptive and gets prescriptive. Throwing expires headers at the problem and calling it caching? Not good enough.

"It is our responsibility as the builder of a web experience to ensure that the person gets to continue to experience as much of that as possible, regardless of the conditions they may be in."

If a storm knocks out the cell towers, users shouldn't be completely lost. If Wi-Fi drops mid-session, they shouldn't hit a blank screen. Not every piece of dynamic data can be preserved β€” and that's okay β€” but the baseline experience should survive.


The Twitter Case Study 🐦

Kyle tweeted (ironically) about his frustration with Twitter's own PWA. He'd be scrolling his timeline, board a plane, open Twitter in airplane mode β€” and get a completely blank screen.

The response he got back from people online was telling:

"There's no possible way Twitter could cache the entire stream of billions of tweets!"

That's not what he asked for. This kind of all-or-nothing thinking is exactly what leads to poorly designed products. The actual ask was simple:

"Show me the hundred tweets before and the hundred tweets after what I was already looking at. Is that too much to ask?"

No laws of physics need to be broken. No impossible data downloads required. Just cache what the user already had β€” the content they were literally looking at moments ago.


The Offline Tweet Problem 😀

Here's another sharp edge Kyle pointed to β€” the case of sending a tweet on a bad connection:

  1. You start composing a tweet while online.
  2. By the time you hit send, you're on 2G or just went offline.
  3. Twitter shows no error. The tweet just... vanishes.
  4. Nobody saw it. No likes. No record of it. Gone.

The problem isn't just full offline β€” it's the grey zone of terrible connectivity. The request might have left your device but never reached the server. Or it never left at all. Either way, the user has no idea.

What should happen? Any number of reasonable alternatives:

  1. Queue it β€” save the tweet locally and send it when connectivity returns.
  2. Warn the user β€” "Your tweet didn't send, but it's saved. We'll retry."
  3. Ask them β€” "You appear to be offline. Want us to send this later?"

Any of these would be better than silent failure. The point is someone needs to think about this.


What This Course Will Actually Cover πŸ—ΊοΈ

The course isn't going to turn every website into an installable home screen app. That's not the goal. The goal is more practical:

Use service worker technology to improve experiences for users on any website β€” fully static, fully dynamic, or anywhere in between.

The demo used throughout the course is a simple blog-style site. The scenarios explored include:

  1. Navigating previously seen blog posts while offline β€” you should always be able to get back to content you already loaded.
  2. Handling dynamic content gracefully β€” not pretending it's there, but not failing silently either.
  3. Slow connection strategies β€” because "offline" and "online" are just the two extremes of a very long spectrum.

Every product will have a slightly different answer to these questions. Service workers give you the tools to build your answer thoughtfully.


Key Takeaway 🎯

Service workers aren't a PWA-only feature. They're the missing infrastructure layer that every website needs β€” and implementing them well is a developer responsibility, not a browser responsibility.

The browser won't do this for you. Expires headers won't do this for you. You have to think about it, build for it, and test it.