Podcast Episode Details
Back to Podcast Episodes
Advanced Topics w/ Little Experience
Episode 34
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.
Segment 1 - The Newcomer Effect- 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
Published on 6 years, 9 months ago