Fun with workers

Posted: 17 November, 2018 Category: code Tagged: service workersindexeddblocalForagedev console

So after all the caffaffling about last time, I realised after reading more on the topic that workbox has a wizard I could have used to generate a workbox config (which in turn could be used to generate the actual service worker file). I had been abstracted from all this because I was using the vue-cli. So I never needed to run workbox wizard --injectManifest or its non-interactive equivalent, workbox injectManifest path/to/config.

I also didn't have to meddle with configuring precaching or picking cacheing strategies, because (at least for trivial cases) the v3 vue-cli does all of this for you, under the hood, and injects your service worker file with the needed precaching code so that you can focus on the business logic of your worker, such as talking to a database. To wit:

Fun with service workers...

I was poking around in the dev console learning how to get service workers to write to indexeddb:

The place for nuking things :) delete everything!

Also... did not realise that the cache doesn't necessarily automatically refresh. You may have to do this (right-click): cache refresh

Also Also: I managed to create a database and populate it (squee!!) thanks to the excellent workbox lab tutorial.... rows of data!

But seriously...

All the heavy lifting I was gonna do has already been done by some enterprising folks:

  • IndexedDB Promised - Jake Archibald's promisifed IndexedDB interface. But wait, there's more!
  • LocalForage - wraps all that up in your usual browser "local storage"-esque "getItem", "setItem" lingo. But wait!
  • Vuex-persist - lets you basically map your vuex store to anything local-storage-esque... including LocalForage's abstraction of IndexedDB!!

So Good Golly, Miss Molly! You don't have to reinvent a single kot tam wheel!!!

Methinks I know how to finish my current ticket now...