Coding Shorts: Using the Vite PWA Plug-in

hi this is Sean rollermuth welcome back to coding shorts if this is your first time here I hope you enjoy what I'm going to be showing you but if you've been here before I could use a like or subscribe just to help promote the channel if there's a topic you'd like me to cover please put it in the comments as well I'm open to taking and showing you things that might be a little convoluted for you to learn on your own but for today's topic I want to talk about Veet and pwas or Progressive web applications feat has a plugin that will enable pwas and a lot of the sorts of web applications you're going to be building of course V supports View and react and svelte and even plain old JavaScript projects and so being able to support pwa at sort of an outside the framework level I think is a pretty good solution let's take a look so we're going to start directly in our Visual Studio code project this is actually a sub-project inside of a.net core application that has an API so we'll be able to use that and we in fact we do in our existing project here in one of our views very simple view project but again this doesn't rely on view at all it does rely on V which we're using to actually run this so we can see I'm already building the V project and I might need to stop and restart this but just so you can see what this looks like this is a really simple application it's just an API that's hit to pull down customer information and we can click to call we can go to home really pretty simple things nothing's magical in here for what we want to do one of the things that's missing is the ability to have a little icon up here that says you can install my app or even you could build some UI in your website to install that as well and that's because this doesn't pass any of those things that it needs to know that it's an installable application normally that would involve creating a websocket app normally that would involve writing your own websocket and utilizing the work or to support that there's a few moving pieces there's a manifest file that you have to create that has metadata about how your app is going to behave as well as using a websocket in conjunction with the web box and Chrome Chrome in order to support running this without having to have a web server behind it and so we want to be able to support that without having to write all that nitty-gritty and frankly fairly boilerplate code so we're going to need a few things in our project that we don't have right now and one of the interesting things here is we're going to try to do everything at a minimum you might be expanding this to include more information than you want but we're going to do frankly the least we can possibly do just go to my console and I want to add by installing the V plugin pwa and because this is part of V I'm going to use Dash capital d to install it as a Dev dependency instead of a regular dependency everything that this does it does at build time not at runtime with that installed we can now utilize it by going to our v.config and we're just going to import it pwa from beat plugin pwa and this is going to be a plug-in just like view or react or whatever plugins you're using in order to run this project so I'm going to tell it to just say beat pwa with no parameters now we're going to come back and look at some parameters but for now this is all we really need and so let's go ahead and rerun our application let's go ahead and rebuild the application and we come back here we'll see that we have our application here but there is no magic button to install this app let's see what it tried to do just so we can get a sense of it if I go over here to visual studio I'm using the.net and visual studio and the or JavaScript or typescript in my case with Visual Studio code it's been building into this folder here called ww root and because we've added this V we've actually added through a couple new files so here's the Manifest this is a manifest that contains information about your application actually needs a little more than the Manifest is creating so far and I'll show you how to do that there's a register service worker there's a service worker actual file that's executed and then this workbox which integrates with the workbox to do the things you need now while these exist you're never gonna be dealing with them directly in fact one thing you might notice is if we look at the index.html not only has it linked that the Manifest is here but also to load in that register SW for the service worker right all this is being done at build time so let's go ahead and make it actually work now inside of the pwa here inside the veet.config it allows you to pass in an object has some options and there's a ton of these options in there that you can tweak but we're going to really do the minimum which is to say that I want my manifest to have a couple of properties and the only one we really need to make this all work is an array of icons and we only need one icon and I happen to have icons here in our assets and if we open up the public folder we'll see that there's a number of icons here former R application we're just going to define a single icon so normally you would have different sizes for different applications so Android and iPhone and desktop and Windows and Mac and all of that might have their own sets of icons and so this is just going to have a source which is going to be icons let's say 512.png which just specifies the size we want sizes is going to equal 512 X 512. type is going to be image PNG which is just the mime type and this specific one is going to be purpose any maskable so we have a transparent background on all our icons like you probably should do but this is just allowing us to really specify them now that we've made that change let me just stop this and run it again because we've changed the config it doesn't know to restart our watch and if we refresh this we can actually see up here app available now that we've added this icon to our manifest and if you're curious you can actually look at the Manifest web manifest we can see all the information that's given us for this it has the one icon it has the background color Standalone all these other things that we may actually change in our own small piece of the Manifest but this being read by the browser so we can install the app here I'm gonna go ahead and install it as a pwa and that's all fine right we have it running we're pretty happy but what happens if we use the tools and we change this to offline what happens our app is still here and what it's done is actually if we look at the application tab in the tooling you'll see a few things first you'll see the service worker this is a service worker that's actually going to be serving the files for our application as we need it and there's this special workbox cash and what's in here this is everything it determined that we needed to run our application so you can see some JavaScript files you can see the PNG the index and they have some special revisions so it knows that there's a new version we should go ahead and pull that over so all that's interesting but the reason that this application is still failing is that it can't make the network calls let's go to network and we can see that a couple of things didn't cat get cash fave icon but most importantly this customers because we're considered offline is failing right and that's the API call Api customers that is going and getting our data so we might want to actually cache more than we're looking at here so with the app closed let's come back here and we can actually do this here inside the Veet pwa we can actually add another object if we can come here and say workbox and workbox is going to allow us to make some specifications that are going to change the way the browser is going to utilize things and one of the things we want to support is something called runtime caching and runtime caching are caches that you're going to specify and we're going to use this for our apis so we're only going to specify one runtime cache we're going to specify a you're an Earl pattern for it to look at this can take a regular expression this can take a fixed string or it can take a function and for us we're going to actually utilize this as a function so the function is going to pass in an object that contains Arrow but we only need Arrow so I'm going to destructure that here and then what am I going to return this is essentially a test to see whether it actually can be cached or should be cached and all I'm going to do is say earl.pathname which is everything from the slash after the domain name but not the query string and I'm just going to say if this starts with API and we're seeing an error here because the runtime caching requires a couple other pieces so we're going to first say our Handler and this is a named Handler for the type of Handler you want to do and for us we could say look at the cash first and the network second look at the network first and the cast second or only use the cache or the network in our case we're just going to say cash first here and we're going to tell it that we want this as const and then we're going to have some options what are we going to do once we see these calls that need to be cached pretty simply we're going to give it a cache name and I'll call this our API cache for lack of a better name and then how does how do we know that it's a cash flow response we're actually going to say cash flow response is rules for things that match that Earl but may or may not be catchable and so what we're going to actually do is say for us statuses of 0 or 200 are both cashable let's just make sure that we're getting a valid so it doesn't cache something that maybe is a 201 or 202 and remember because we're doing this caching this really is only caching gets that's an important idea here if you need something less automatic you might want to go ahead and look at writing to local cash and handling in your application I think in our case caching these API results will help us give a better experience when we are actually offline with all of that working let's go ahead and rebuild it probably didn't have to but this whole pwa in the browser I found to be a little touchy and so I've been rerunning the builds and so back here remember we could do this in the browser or as a separate app we're getting the basis both ways is that we have our cache offline but this is working right obviously if I go no throttling it's going to get all the new versions and if I go offline again this continues to work with the apis but how do we know that again let's go over to our application we can now see our cache contains an API cache that we created and what it did was it cached the request here in the browser so that we can go ahead and show those 100 customers even when we're completely offline so that the Crux of it pretty straightforward you can see down in the notes a link to the GitHub repo that contains this as well as all the other coding shorts examples and I hope that this helps you get up to speed with pwas without having to write all your own code by hand this plugin for v i find super useful and there'll be a lot more information in the blog post that accompanies this where we talk about some of the other minutia if you've gotten this far don't forget that you can like And subscribe really helps the channel helps get the word out of course you could share it with your social media as well everything helps trying to build that audience that I think wants this kind of content add comments if you have any questions or have any concerns or disagree with me let's have that conversation in the comments well this has been Sean Wilden with with coding shorts again thanks for joining me [Music]

Channel: Shawn Wildermuth

Views: 6,406

Keywords: Vite, JavaScript, TypeScript, Progressive Web Apps, PWA, Vue, React, SvelteKit

Id: YSGLw4T8BgQ

Length: 14min 5sec (845 seconds)

Published: Wed Feb 08 2023