Getting Started with Service Workers

Getting started with Service Workers was both an exciting and extremely frustrating experience. It started when I was working on an old html5/canvas game that I had made as a proof of concept that used the AppCache API. I knew AppCache was on its way out and that Service Workers, along with the new Cache API, was the new fancy replacement and just hadn’t gotten around to implementing them. While working on the game I noticed a deprecation message about the AppCache API in the developer tools console, and this kicked off my journey into Service Workers.

As with learning any new API, I first started reading official documentation from Google Web Developers and Mozilla Developers Network, and then followed that up with some blogs and articles. In case others are still learning Service Workers here are links to each resource I used:

• Promises
  • https://web.dev/promises/
• Service Workers API
  • https://developers.google.com/web/fundamentals/primers/service-workers
  • https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker
  • https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
  • https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer
  • https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/service-workers
  • https://redfin.engineering/service-workers-break-the-browsers-refresh-button-by-default-here-s-why-56f9417694
  • https://redfin.engineering/how-to-fix-the-refresh-button-when-using-service-workers-a8e27af6df68
• Web Workers API
  • https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API
• Fetch API
  • https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api
• Cache API
  • https://developer.mozilla.org/en-US/docs/Web/API/Cache
  • https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage
• Debugging
  • https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps
• Misc
  • Stuff I wish I’d known sooner about service workers
    https://gist.github.com/Rich-Harris/fd6c3c73e6e707e312d7c5d7d0f3b2f9

Once I got my mind wrapped around how all of these new APIs are intended to function, and work together, most of what I read seemed pretty straight forward and easy enough to implement. The final version of what I implemented was heavily influenced by the two articles (linked above) from RedFin Engineering. Those were the only articles that fully discussed a proper way to handle activating an updated service worker in spite of multiple browser tabs of the app being open. That said, though my experience was mostly positive there were two exceptions of which I wanted to share.

1. My service-worker.js file absolutely refused to update (install and then activate). While debugging, the only workaround to this was to use browser developer tools to unregister the service worker and then refresh the page. It took several days of troubleshooting and scouring the internet for possible solutions, and even double checking my web server configuration to make sure expire headers were set properly. The most odd thing about this problem was that though my service-worker.js file wouldn’t update I was able to update any of the files being cached by the service worker with just a simple refresh of the page, including images, js, or css files. At the time I had my service worker script saved in my /js/ directory (/js/service-worker.js), and my solution to this problem was simply to move it to the app root (/sw.js) and everything magically began working. This made absolutely no logical sense to me so if anyone has any insight into why this fixed the problem I’d love to hear from you.
2. The CacheStorage appeared to not be updating. Using Firefox Developer Edition version 83.0b5 I could see that my service worker was updating, and all old caches were deleted (according to console logs), but when I looked in the developer tools CacheStorage the version number was never correct. It was always the previous version still. In testing the same code in Google Chrome it all worked perfectly. I eventually came to find out that the CacheStorage was in fact updating (deleting all old caches), but it wasn’t reflected in the developer tools window until I closed them and re-opened them.

All in all, it was a wonderful learning experience and I’m better off for it, but wanted to share the struggles I encountered in case someone else is running into the same problems.