Just recently I was in the process of writing a new blog post on Progressive Web Applications. In the post, I was going to document my conversion to a PWA site. This blog to be exact. And so I did what most developers who are attempting to learn something new would do. I jumped on Google and looked up "Progressive Web App". Lo and behold the first result seemed like the answer I was looking for. "Introduction to Progressive Web Apps". It's a good start.
After reading the customary few introductory paragraphs that will walk me through the process, I began to set up my environment. I downloaded the sample code that was suggested and installed the necessary software, in this just a simple Chrome plugin that would allow me to use Chome as a server. Easy enough.
At this point I have 2 options. Either continue with the example as is, with the nagging feeling that I should be building this correctly from the ground up to begin with, or to follow the rabbit hole into a whole new realm that I didn't even know existed. So I did what any programmer would do. I jumped on the idb bandwagon.
I couldn't tell much about what idb actually was, except this.
This is a tiny library that mirrors IndexedDB, but replaces the weird IDBRequest objects with promises, plus a couple of other small changes.
So I figured I'd try my luck with localForage instead. Easy enough it seems. It's a wrapper for all offline storage methods, such as localStorage, indexedDB and webSQL. webSQL is deprecated now, so we can ignore that. Now that I know a bit more about the options for offline storage, it's time to jump back to the example. For the time being, I will continue with local storage so that I'm not slowed down too much just yet.
The next stopping point came with Service Workers. For those not familiar with them, here is a brief definition:
A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. Today, they already include features like push notifications and background sync.
So before anything else, I had to branch off a bit into a few other how to's and articles on the nature of Service Workers, and how to debug them and such. This wasn't a terrible thing, as I was able to write a blog post about service workers along the way. However, during the process I was stopped once again with a detour pushing me towards Push Notifications. Just to understand the entire process more I decided to follow that tangent. Except that it was outdated.
And so instead it directed me to Web Push Notifications. So I reeled it back again once again, and went back to Service Workers. I needed to stay focused on the task at hand here. Eventually, I'll get around to using Push Notifications. But not for the sake of this example.
Things were sort of going smoothly. The lingo was somewhat new, and trying hard to sound tech-savvy for the most part.
Service worker is a programmable network proxy, allowing you to control how network requests from your page are handled.
At this point, I sort of gave up on the whole idea of learning about PWA and decided that my time was much better spent on something else. Anything else. Like watching Batman: The Animated series clips on YouTube. I wish I was Batman sometimes. He doesn't have to worry about these things. He helps people, in passing, and broods about it.
It seems I need to make sure that I have HTTPS enabled on my website. Which I do, luckily. If you don't however, then here is a quick guide on how I went about adding it through GoDaddy.
The next few lines made sense, and I felt like I was finally getting on the right track, and that soon enough I would have a fantastically built PWA site up and running for the world to enjoy. Then this appeared.
Fine, in the spirit of just moving forward always, I continued on. I won't use this code in production. Next up was debugging service workers through the browser, which I skipped for now, as I just want to see the thing run more than anything. I copied and pasted some more code, of which returned no errors and marched onward.
Some tea. Some self-contemplation later. I continued to read through the material. Now that .js and .css files can finally be cached, it's time to cache the data on the website. For me that meant essentially, caching the blog posts, just in case you really need to read about programming while you have no internet. If you have no internet, just enjoy it. Take a deep breathe, look around, have a snack.
I don't know if I really learned anything about the web during this entire process. I learned other things. I learned about myself, and about not having to implement every new technology that makes the rounds on the web. Maybe next year PWA will go the route of webSQL and be deprecated too. Then we'll all be redirected to Web PWA, which is kind of the same, but not really.
The point of this article was to showcase the process that, I'm sure, many developers go through when trying to learn something new online. When trying to stay up to date with technology in a world of perhaps too much information. Perhaps this is why older folks tend to shy away from new technologies. Maybe one day I will be telling the younger folks about how in my day, the browser did the caching and we just stayed back and relaxed. Or maybe I'll just push the code live now and move on to converting the blog to an AMP website.
Thumbs up if you enjoyed this post!
Suggest the next blog post
Walter G. is a software engineer with over 10 years of professional experience. When he isn't blogging or being a CTO he enjoys coding randomly complex things that he hopes many people will get a chance to use one day.