Every website and web app should have a service worker | Go Make Things
Needless to say, I agree with this sentiment.
I’ve worked with a lot of browser technology over the years. Service workers are pretty mind-blowing.
Link tags: caching
46
Add a Service Worker to Your Site | CSS-Tricks - CSS-Tricks
Damn, I wish I had thought of giving this answer to the prompt, “What is one thing people can do to make their website better?”
If you do nothing else, this will be a huge boost to your site in 2022.
Chris’s piece is a self-contained tutorial!
Now THAT’S What I Call Service Worker! – A List Apart
This is terrific! Jeremy shows how you can implement a fairly straightforward service worker for performance gains, but then really kicks it up a notch with a recipe for turning a regular website into a speedy single page app without framework bloat.
Service Workers | Go Make Things
Chris Ferdinandi blogs every day about the power of vanilla JavaScript. For over a week now, his daily posts have been about service workers. The cumulative result is this excellent collection of resources.
Request with Intent: Caching Strategies in the Age of PWAs – A List Apart
Aaron outlines some sensible strategies for serving up images, including using the Cache API from your service worker script.
Offline Page Descriptions | Erik Runyon
Here’s a nice example of showing pages offline. It’s subtly different from what I’m doing on my own site, which goes to show that there’s no one-size-fits-all recipe when it comes to offline strategies.
Blog service workers and the chicken and the egg
This is a great little technique from Remy: when a service worker is being installed, you make sure that the page(s) the user is first visiting get added to a cache.
Offline listings
This is brilliant technique by Remy!
If you’ve got a custom offline page that lists previously-visited pages (like I do on my site), you don’t have to choose between localStorage or IndexedDB—you can read the metadata straight from the HTML of the cached pages instead!
This seems forehead-smackingly obvious in hindsight. I’m totally stealing this.
Self-Host Your Static Assets – CSS Wizardry
Trust no one! Harry enumerates the reason why you should be self-hosting your assets (and busts some myths along the way).
There really is very little reason to leave your static assets on anyone else’s infrastructure. The perceived benefits are often a myth, and even if they weren’t, the trade-offs simply aren’t worth it. Loading assets from multiple origins is demonstrably slower.
Distinguishing cached vs. network HTML requests in a Service Worker | Trys Mudford
Less than 24 hours after I put the call out for a solution to this gnarly service worker challenge, Trys has come up with a solution.
Tuning Performance for New and “Old” Friends | Filament Group, Inc., Boston, MA
This is a really clever technique from Scott that he unveiled at An Event Apart in Seattle. It uses a header sent by a service worker to distinguish between returning and new visitors—much neater than relying on a cookie. I’ve updated my service worker on The Session to use this technique now.
Cache-Control for Civilians – CSS Wizardry
Harry breaks down cache-control headers into steps that even I can understand. I’ll be using this a reference for sure.
Introducing Background Fetch | Web | Google Developers
I’m going to have to read through this article by Jake a few times before I begin to wrap my head around this background fetch thing, but it looks like it would be perfect for something like the dConstruct Audio Archive, where fairly large files can be saved for offline listening.
PushAPI without Notifications | Seblog
Remember when I wrote about using push without notifications? Sebastiaan has written up the details of the experiment he conducted at Indie Web Camp Berlin.
Push and ye shall receive | CSS-Tricks
Imagine a PWA podcast app that works offline and silently receives and caches new podcasts. Sweet. Now we need a permissions model that allows for silent notifications.
Inlining or Caching? Both Please! | Filament Group, Inc., Boston, MA
This just blew my mind! A fiendishly clever pattern that allows you to inline resources (like critical CSS) and cache that same content for later retrieval by a service worker.
Crazy clever!
Thoughts on Offline-first | Trys Mudford
Service Workers have such huge potential power, and I feel like we (developers on the web) have barely scratched the surface with what’s possible.
Needless to say, I couldn’t agree more!
Trys is thinking through some of the implicatons of service workers, like how we refresh stale content, and how we deal with slow networks—something that’s actually more of a challenge than dealing with no network connection at all.
There’s some good food for thought here.
I’m so excited to see how we can use Service Workers to improve the web.
Offline Content with Service Worker — Chris Ruppel
A step-by-step walkthrough of a really useful service worker pattern: allowing users to save articles for offline reading at the click of a button (kind of like adding the functionality of Instapaper or Pocket to your own site).
On HTTPS and Hard Questions - TimKadlec.com
A great post by Tim following on from the post by Eric I linked to last week.
Is a secure site you can’t access better than an insecure one you can?
He rightly points out that security without performance is exlusionary.
…we’ve made a move to increase the security of the web by doing everything we can to get everything running over HTTPS. It’s undeniably a vital move to make. However this combination—poor performance but good security—now ends up making the web inaccessible to many.
Security. Performance. Accessibility. All three matter.
Securing Web Sites Made Them Less Accessible – Eric’s Archived Thoughts
This is a heartbreaking observation by Eric. He’s not anti-HTTPS by any stretch, but he is pointing out that caching servers become a thing of the past on a more secure web.
Can we do anything? For users of up-to-date browsers, yes: service workers create a “good” man in the middle that sidesteps the HTTPS problem, so far as I understand. So if you’re serving content over HTTPS, creating a service worker should be one of your top priorities right now, even if it’s just to do straightforward local caching and nothing fancier.