So in the last lecture, we tweaked our configuration to not precache all static files,
now let's dive a bit deeper and let's start implementing routing. Now routing sounds difficult
or strange,
in the end I mean I want to define that for certain URLs to which a request is sent,
I want to cache a response and we already did this in our own service worker. There
if we go back down to fetch, we already check for a URL and do something special upon this URL.
Now we didn't use this to precache our fonts and our CDN response, though that's not entirely true,
the material icons for example yielded another request if you remember and we manage that with our
else fallback where we use the cache then fallback strategy.
So we already kind of did this dynamically,
now we will also implement it dynamically with workbox though in a highly managed and predictable way.
What do I mean with this?
Well let's have a look.
First of all, we need to adjust our configuration and we want to take advantage of the fact that we can
also build up on an input service worker file because I don't really want to alter the output file because
that will be overwritten whenever I generate a new one.
So I will create a new service worker file and I'll name it
sw-base.js for example.
Now later, we'll remove our old service worker file so that we don't clutter this all with service
worker files. Now sw-base is a file which I can use in conjunction with a variation of the workbox generation
command.
Thus far, we use the generate-sw command to generate a brand new service worker, that worked great and
it analyzed all our files and added them automatically for precaching.
Now if we want to build up on an existing service worker file as we do here, we can't use that because
generate-sw will always generate a brand new file which only does precaching.
So what I want to do instead is I want to create inject manifest.
This basically means take an existing file, analyze all my assets and create this manifest you generate
here already,
by the way, not to be mistaken with the manifest.json,
not related at all,
so take this array and then inject it into my manually created file.
Now of course for this to work, we have to give workbox some additional information.
Specifically we have to add this import in our custom file too because otherwise, it tries to inject it
but it's not able to handle it in this file.
So let's add this
import and additionally, we have to add this code
here though a bit altered.
So let's copy it into the base.js file here,
the sw-base.js file
and here we initialize workbox which is required for it to work.
We have to replace file manifest here with an empty array though and when we run this inject manifest
command here through our generate-sw script, workbox will automatically have a look at the configuration
and see that we want to build up on an existing file because we're going to add it here, sw-source,
we want to build up on public, sw-base.js. So it'll see this line and see
OK I should use this file as I input, it will then have a look at this file and see this hook
so to say. It sees
here's my precache command,
I will enter,
I will inject my created file manifest instead of this empty array.
Let's see it in action.
Let's delete the old service-worker.js file which was generated by workbox and let's rerun this
generate-sw command.
Now to us, the command hasn't changed, we still execute the same script but behind the scenes, we're now
using inject manifest.
So if I hit enter here, you will see that I still get the service-worker.js file and it still generates
this manifest,
however it doesn't store it in extra constant,
it added it to precache and that's what I meant,
it replaced this empty array.
This gives us the chance of defining our own code right before we use precache
but after we initialize workbox because I want to take advantage of some other features it offers.
So that is what we'll now do in the next lecture when we'll finally get to implementing that routing.