But not just when the website is active, they're able to run in the background of the browser and perform activities for your website, even if it's not the main focus of the browser right now. This allows our website to tap into things like providing push notifications, monitoring the user's network activity, and even running updates in the background to constantly have up-to-date data. Because we use the Vue CLI tool to set up our Vue app, we can actually just use a one-line command to give our current application PWA functionality. So if we open up a terminal, from the project root, all we have to do is run vue add pwa. All right, once this installs, let's close out of this.

So if we open up a terminal, from the project root, all we have to do is run vue add pwa. All right, once this installs, let's close out of this. And we'll see what changes it's made. If we open up our main.js file here, we can see that it's now importing a registerServiceWorker script. And if we open that up, whenever our application is being built for production, it's registering a service worker at the base URL of our website. And it's provided some boilerplate events that are fired during some of these lifecycle moments. This Vue PWA plugin also takes the headache out of registering different meta attributes.

moments. This Vue PWA plugin also takes the headache out of registering different meta attributes to the main index file here. So when we actually build for production and load this up into our browser, we'll have a theme and color, the Apple mobile app attributes, and things like icons and touch icons will automatically be injected into this. And we can actually see that happen. So as everything is right now, let's open up our terminal and run npm run build production. All right, so this finished up completely, so we can exit out of here. And we now have this dist folder that contains all of our production assets.

And then as an event listener for a message. Finally at the bottom, it adds in some caching based on this pre cache manifests that's included with this production item as well. So if we open this up, it's an array containing objects consisting of different files and their URLs available in this production dist folder. So we see we have our app.js here, chunk.vendors.js here, and then the manifest file and robots.txt. So everything available in our dist file that's loaded up is cached in here. So let's go ahead and actually see this working in the browser. Now in order to do this, I can just cd into that dist folder, and then just start up a local php server.

Now in order to do this, I can just cd into that dist folder, and then just start up a local php server. So I can listen to that index.html file. So now if we go to localhost:8000 in the browser, our app is working as expected. We don't have any notes here, though, because the actual address of the app has changed from 8080 before to 8000 now. But if we open up our console, we can see that the service worker is working as intended. The cache has responded to our CSS file, as well as our JavaScript files up here. And so now if we go to our network tab, let me pull this up a bit more so we see this. If we refresh, we can see that our CSS and JavaScript, they don't have a size because

running as its own application in the desktop. And it's actually available in our computer as well if we search for it. Alright now what about trying this offline? Well opening up our PWA wouldn't really do much if my internet was off, considering we're serving this from localhost. So instead what I'm going to do is open up an ngrok tunnel, which gives us an externally hosted domain that we can load up which tunnels to this website. Let's open up a new tab in our terminal, and I'm going to run ngrok http 8000. Let's copy the HTTPS address and load that up in our browser. So just like before, I'll add in a quick note here.