Advanced Topics w/ Little Experience

In this episode we take a look at taking on complex tasks in a field where you're not very experienced, something all programmers must do at one point or another in their career.

• This segment is going to focus on our experience configuring a vuejs service worker - I went in with no previous hand-on experience, a complete newcomer to service workers and an amateur at vuejs. Therefore this process is no doubt clunky, but as you’ll hear that’s exactly the point
• I want to be clear before I dive in here that we’re using the following particular scenario because it was recent, we are not pointing the finger at any of the plugins, apps, or resources that we mention below. The issues we’re discussing are industry-wide, and not on a specific service, platform, or individual.
• Recently we went to work with service workers on a Vue.js app (No BS News for Reddit)
• As apart of the coding challenge we had already had a basic service worker setup that allowed the local assets to load when the app was offline
• This functionality was made using a pwa plugin for vuejs
  • We left this plugin mostly, if not completely, in its default configuration
  • This default configuration registers a service worker and then generates a service worker file which caches those offline assets
  • Mike got the project to this point during the coding challenge and then I took over
• This is where things all fell apart for me:
  • I had done a couple of days on reading basic service worker configurations and functionality and then finally decided to dive into our project
  • First thing I did was look around the file structure and I find a file named registerServiceWorker.js
  • This file contained an import line regarding register-service-worker (which fueled my initial Google searches) as well as the registration and basic responses that you’d expect such as successfully registered, detecting offline, etc.
  • Searching register-service-worker led me to the page that I linked above, which had some very brief documentation and a code example that looked like our registerServiceWorker.js file (so far so good)
  • From there I ran some tests in Chrome, checking for service worker install, checking offline mode, etc to get my bearings
  • At that point I wanted to start adding some code of my own to the service worker, from my readings I knew that the service worker was definitely a separate file and from the registerServiceWorker.js file I could see that it was referring to a file called service-worker.js
  • Searching the directory for said file revealed that it didn’t exist
  • I then went and checked in the browser again, taking a look at the sources tab to find out what file was running the service worker, it showed that it was definitely service-worker.js - which indicated that the file was being created dynamically as apart of the build process
  • This led us down a rabbit hole of finding how to inject my service worker code into this autogenerated file
  • Overall, we eventually did find a solution for the code injection, however, it was not in the original register-service-worker documentation, nor was it discussed a lot on stack overflow
  • We did find one Stack Overflow thread that did help, which led us to a useful blog and a couple of interesting links - I also found a separate page on npmjs.com somewhere along the lines which contained the missing code we were looking for
  • Basically we needed to add some injection configuration into the vue.config.js file and then from there make our service worker script
• Now I know that’s long winded, but it points out some very important problems/concerns:
  • The newcomer effect is alive and well, I wrote an article on Medium about what I call the newcomer effect a long time ago, it basically means that any documents/signs/directions that are available for any given experience rarely take into account the needs of those that are complete beginners - increasing the entry “budget” for newbies
  • I’m not sure how documentation writers do it - maybe it’s because they’ve been working on their projects for so long - that they completely miss major steps in their documentation. It’s got to be mentioned that we desperately need better documentation for beginners and furthermore, more linking between potentially helpful guides
  • In this particular case, maybe it’s because many folks won’t write their own service worker, but rather just want the default to cache the local assets and that’s it, but shouldn’t it at least be mentioned that if you want to write your own service worker - please see x
  • Toxicity and useless comments are alive and well - on various forum posts, comments, and of course Stack Overflow posts there are typically an abundance of comments that dismiss questions...