Getting Titular

Getting Titular

Most of the time I just screw around with things on this site, trying to figure out new technology and generally just breaking stuff that no one really looks at. It’s good and helpful and makes me better at what I do. Problem is, I never write about what I learn. It’s the same old story: sure, I’ve been doing this for 20+ years but I’m a dummy and no one wants to read about the lessons of a dummy. It makes perfect sense in my head don’t ya know. This post is an attempt to not be like that sometimes, maybe.

You see, lately I’ve been learning about this web technology called Service Workers. They’re more exciting and interesting than they sound, trust me. One of the things these Service Workers let us web smashers do is create a better offline experience. What’s this? Offline web? How can this be? It’s true and it’s amazing. The web relies on networks to link from one place to another but these networks can be unreliable. From tunnels during a commute, to power outages, to a cabin in the mountains, networks come and go. Our enjoyment of the web comes and goes with them. This is where our new Service Workers come in. Fist bump emoji.

As usual I start off learning new things by reading about what others have done and shamelessly stealing some of their shit. One of the people I have shamelessly stolen shit from is Jeremy Keith who tinkers much like I do, but he’s not a dummy. He recently wrote a book called Going Offline which is perfectly descriptive. I like to buy books written by people from whom I’ve stolen ideas which means I have a large library. In this most excellent — and quick to read I might add — book Mr Keith tells stories of offline adventures and shows in simple, clear code how you can have offline adventures too. At the end he says — and I’m paraphrasing here — go forth and make things and tell everyone about it. So here we are.

Now, about those titles #now,-about-those-titles

Near the end of the book there are some examples on how to create a more engaging offline page, one which lists the articles a visitor has umm, visited on your site and provide a link to revisit them while offline. What a great idea! I should do that! There are others doing this sort of thing and I had previously copied their ideas for pulling article titles and descriptions from a JSON feed or some such thing. While it worked, it was a data hog, pulling all my articles in a giant mass of JSON when my service worker was installed, caching them, etc. I won’t tell you how many kilobytes were harmed in that madness, I’ll just say it was way too many. What could I do? Where could I get the article titles and descriptions?

And then it dawned on me. “Good grief” I said to myself but with swears. “Good grief, all the data you want is already cached ya dummy”. See, when navigating my site, the service worker caches a copy of the article. This helps with site speed but it also helps when offline. When offline the article just loads like there is nothing wrong with the network! I could use this to my advantage on my offline page by whipping up a script that opens the saved article cache, loops over the articles, tries to fetch them and fails from the network but succeeds from the cache because we’re offline.

With the copy of the article from the cache, I can pull the title and description from the article itself. With the article HTML taken from the cache, I created a new DOMParser instance and accessed the title and description by querying the DOM with good old vanilla Javascript. Just like that, I had the information I needed from data I already cached. No new requests, no crazy JSON in the cache, just being smart with what was already there.

I put the code that I just inline on the bottom of my offline page in a Github Gist. It seems to work pretty well around these parts, but as all things online, your mileage may vary.

© 2018 . All rights reserved.


This post is part of Writing.
Previous post:
Random post: Kejimkujik backcountry, May 2012

Permanent link: https://chrisjones.io/writing/getting-titular/
Subscribe: on the Feeds page

Updated: May 29th, 2018 at 6:51 pm

Similar Writings

This seems to be a unique post, a special snowflake in a world of sameness. Embrace it.