It's been over a year since the Clearleft site relaunched and I listed some of the next steps I had planned:
Service worker. It's a no-brainer. Now that the Clearleft site is (finally!) running on HTTPS, having a simple service worker to cache static assets like CSS, JavaScript and some images seems like the obvious next step.
You know how it is. Those no-brainer tasks are exactly the kind of thing that end up on a to-do list without ever quite getting to-done. Meanwhile I've been writing and speaking about how any website can be a progressive web app. I think Alanis Morissette used to sing about this sort of situation.
Enough is enough! Clearleft.com is now a progressive web app. It has a manifest file and a service worker script.
The service worker logic is fairly straightforward, and taken almost verbatim from Going Offline. As you navigate around the site, the service worker applies different logic depending on the kind of file you're requesting:
- Pages are served fresh from the network, falling back to the cache when there's a problem.
- Everything else is served from the cache where possible, resorting to the network only if there's no match in the cache—quite the performance boost!
In both cases, if a page or a file is retrieved from the network, it's gets put into a cache. I've got one cache for pages, and another for everything else. And even if a file is retrieved from that cache, I still fire off a fetch request to grab a fresh copy for the cache. So while there's a chance that a stale file might be served up, it will only ever be slightly stale, and the next time it's requested, it'll be fresh.
In the worst-case scenario, when a page can't be retrieved from the network or the cache, you end up seeing a custom offline page. There you can see a list of any pages that are cached (meaning you can revisit them even without an internet connection).
It's not ideal—page titles would be friendlier than URLs—but it's a start. I'm sure I'll revisit it soon. Honest.
Oh, and after a year of procrastinating about doing this, guess how long it took? About half a day. Admittedly, this isn't my first progressive web app, and the more you build 'em, the easier it gets. Still, it's a classic example of a small investment of time leading to a big improvement in performance and user experience.
If you think your company's website could benefit from being a progressive web app (and believe me, it definitely could), you have a couple of options:
- Arm yourself with a copy of Going Offline and give it a go yourself. Or
- Get in touch with Clearleft. We can help you. (See, I can say that with a straight face now that we're practicing what we preach.)
Either way, don't dilly dally ...like I did.
This was originally published on my own site.