What's that old saying? The cobbler's children have no shoes that work offline. Or something.
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.
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:
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:
Either way, don't dilly dally ...like I did.
This was originally published on my own site.