All right, from a previous video we have a basic understanding of what service workers are and how they make our application offline first. So if we open up the dev tools here and refresh, right now we're not caching anything, nothing's coming back from a service worker here, and that's because we are currently running this application through the dev server provided by Vue. The service worker is only installed whenever we build for production. So like we did before, I'm going to go back to my source code and open up a terminal. And we're going to run npm run build production. And once this finishes up we'll cd into that disk directory and run php -S 127.0.0.1:8000. Okay, so we have our PHP development server set up, which all it's doing is just listening to that index.html file, but it's a quick and easy way to get a development environment set up.

Okay, so we have our php development server set up, which all it's doing is just listening to that index.html file, but it's a quick and easy way to get a development environment set up. And now heading to localhost:8000, we see our application here. Except there's a slight problem. If we go ahead and refresh we can see that we're pulling in our script and style from the service worker that we had installed previously, but the problem is that we've made updates since then to our application. We have the notes area here, the plus button, and notes should be showing up here as well. But none of that is present because the assets that are coming through are the ones that we cached previously. So we need to make sure those are invalidated each time that a change comes through. In order to combat this we need to make two changes in our source code. So opening it up, let's get rid of our terminal right now.

comes through. In order to combat this we need to make two changes in our source code. So opening it up, let's get rid of our terminal right now. And we need to create a new config file for Vue at our project root. So actually I'm going to open up our terminal again and in a new window we'll create a file called VueConfig.js. Opening that up, we need to add module.exports. And it's going to export out of this config file an object containing a bunch of options that we can add for our Vue's build service. We're only going to be using one attribute here and that's PWA, options for our PWA plugin, and workboxOptions, which are options for the actual underlying service that builds a service worker, and we're setting an attribute called skipWaiting

here. Now this fires whenever there's any assets in the cache, so like our underlying JavaScript that powers the website. And what we want to do in here, instead of just console.logging that there's a new constant available, is actually force a refresh of the page. Usually reload doesn't have any parameters needed for it, but I believe Firefox uses this true boolean to force a refresh of its caches. It doesn't hurt to just have that in. Okay, so now if anything from the caches is available as a newer version, the app should refresh and we should see that new version pulled in. Let's rebuild everything by opening up our terminal. And cd back to the project root, npm run build production, cd dist, and load up listener. All right, back in the browser, let's give this a refresh. And there we go. So we can see that the cache was now busted and the new data was pulled in.

here and is displayed in our network. So if we refresh, we see that we have this favicon32.png and this one android-chrome-192.png. Both of these are not pulled in by the service worker, and I would like to cache these so that if we were to go offline, they would still show up in the browser. In order to do that though, we need to create our own service worker. So if we go back to our source code, if we go to this disk directory that was generated during the build process, we see this service worker that was generated for us. But we really have no control over this. If we were to change this and rebuild our website for production again, our changes would be overwritten. So instead what I'm going to do is copy this service worker, and I'm going to create a new file in source called service-worker.js. Let's go ahead and open that up, and we'll paste in this content.

and I'm going to create a new file in source called service worker. Let's go ahead and open that up, and we'll paste in this content. Now in order to make sure that this is actually our service worker running, I'm going to change this cache name, and instead of saying offline-first-notes, I'm just going to call it offline-notes. Now in that view.config file that we created earlier, I need to add a couple more options underneath this PWA header. The first is something called Workbox, Plugin Mode, and we're going to set that to Inject Manifest. And then under the Workbox options, after this skip-waiting option that we set, we need another option called Service Worker Source. And we set that to the file that we generated. So for us, that's Source, Service Worker. By setting this Plugin Mode to Inject Manifest, and setting a Service Worker Source attribute in the Workbox

that to the file that we generated. So for us, that's Source, Service Worker. By setting this Plugin Mode to Inject Manifest, and setting a Service Worker Source attribute in the Workbox options, we're letting Vue know that we want to use our own service worker instead of the one generated for us. So now if we go ahead and rebuild our site for production, we're getting this skipWaiting is not a supported parameter. Okay, I guess we can't use that with our own generated service workers. But no worries, this skipWaiting method is what must be added into the generated service worker whenever that option was set to true, so we really don't need it. All right, let's try this one more time. Okay, everything was built. Now let's see if we see this change to our cache name.

All right, let's try this one more time. Okay, everything was built. Now let's see if we see this change to our cache name. And we do! It's now offline-notes, which means that this service worker is our own. So we can make any adjustments to this, and that is what will populate in the service worker installed on our app. Okay, so to cache the images that we want, at the bottom of the service worker, I'm going to add a new event listener for the install event. And in that closure function, we're going to call event.waitUntil() and then provide the cache name, offline-notes. And once that resolves, we get back a cache

and then provide the cache name, offline-notes. And once that resolves, we get back a cache that we can add files to. We'll use this addAll() and pass in an array of the files that we want to cache. And for us, I believe that's under the image icons directory. So it should be image/icons/favicon32x32.png. We'll also do this 16x16 one as well. All right, in order to fully test this, I'm going to have to open up another ngrok tunnel. 28000. And we'll copy the HTTPS address. And opening it up, the service worker installed fine. As we can tell by the install popup that happened up here. And if we refresh,